Category: android

Become a Master Builder with these Android Dev Tools

Become a Master Builder with these Android Dev Tools

Day-to-day tasks as an Android Developer can consist of varying jobs to complete your work effectively. Whether it is making sure your network requests are correct or ensuring pixel-perfect screens, there are a few tools that have made my day-to-day development easier. These are some of my favourites:

Vysor

Vysor is my go-to tool for screen sharing of physical devices. It allows you to plug in your device to your laptop and mirror the screen as well as allowing control of the device. A must have for working remotely.

https://www.vysor.io/

Chucker

Chucker is an on-device network interceptor. It monitors network calls you make and displays them in an easy-to-use interface that can be copied and shared from your device.

I love this tool because it runs on device, logs all network requests and keeps a history of the requests and responses that your app made. It has helped me pick up weird inconsistencies in my apps, with easy to spot duplicate requests or strange authorisation errors.

https://github.com/ChuckerTeam/chucker

Stetho

Stetho is a tool that connects to Chrome Developer Tools and gives access to a bunch of app information, as if it were a webpage you were debugging. You can get access to on-device databases, update SharedPreferences and monitor network requests and responses.

https://github.com/facebook/stetho

LeakCanary

LeakCanary helps you pick up any memory leaks that you may have in your applications. It does some pretty complex magic to analyse heaps and helps narrow down the cause of your memory leaks.

https://github.com/square/leakcanary

Shape Shifter

ShapeShifter is my favourite tool for creating AnimatedVectorDrawable animations. It takes the guesswork away from creating cute animations, helps fix paths and generate all the required XML for creating an AVD. If you want to see a quick overview of how to use it, check out my talk on animations here.

https://shapeshifter.design/

Charles Proxy

Charles Proxy is a tool for network debugging. It allows you to intercept network requests and change the response or requests. Charles Proxy is a great tool for testing error conditions or just recording what your app is doing.

https://www.charlesproxy.com/

Accessibility Scanner

Accessibility Scanner is an Android app that scans through your apps UI and makes accessibility recommendations based on the content of your screen. It lets you know what your app is missing in terms of content descriptions, if your colors don’t contrast well enough or the tap targets are too small. It is a great tool for improving your apps accessibility.

https://play.google.com/store/apps/details?id=com.google.android.apps.accessibility.auditor&hl=en_ZA

Window VQA

Window VQA (Visual Quality Assurance) is an app for measuring views on screen. It provides a useful overlay on top of your app which allows you to click on the views and get the measurements of them in px or dp.

https://play.google.com/store/apps/details?id=com.dziemia.w.window

Screen Recorder

Say no more, every Android Developer needs a screen recording app. This one is my favourite because there are no ads and it is super easy to use.

https://play.google.com/store/apps/details?id=com.kimcy929.screenrecorder

Dev Tiles

DevTiles is an app that allows you to easily access some developer options right from your devices shortcuts/tiles. Options include a tile for showing touches, enabling/disabling demo mode, toggling animator durations etc.

https://play.google.com/store/apps/details?id=xyz.mustafaali.devqstiles


All these tools have helped me and made my workflow easier. What are your favourite tools that help you build Android Apps? Let me know your thoughts on Twitter.

Dark Mode Musings: Beware of the Context 🌗

Dark Mode Musings: Beware of the Context 🌗

I’ve been working on getting Dark Mode in our app fully supported and I stumbled upon an interesting finding:

The Application#applicationContext does not keep information about the theme that you have set via AppCompatDelegate.setDefaultNightMode(), only a View or Activity context has this information stored. 

After reading through Chris Banes’ articles and watching some great talks about Styles, Themes & Dark Mode, I felt pretty comfortable that I knew quite a bit about the Theming system on Android. However, this particular issue was something that I was not expecting, which is why I decided to document this particular problem I faced. 

The Problem

I have the “Dark theme” set on in my system settings, but inside my app I am explicitly setting the theme to light mode (even though my device theme is set to Dark):

AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO)

I have two bitmap resources: one located in drawable and one located in drawable-night

Despite my app theme overriding the mode to “light”, the resource from drawable-night was loaded instead of the one from thedrawable folder. 

Why was this happening? 🧐

I was using the Application#applicationContext to load up the Bitmap: 

class BitmapLoader(val context: Context) {

override fun loadBitmap(@RawRes resourceId: Int, bitmapConfig: Bitmap.Config): Bitmap? {
val options =
BitmapFactory.Options().apply { inPreferredConfig = bitmapConfig }
return BitmapFactory.decodeResource(
context.resources, resourceId, options
)
}
}
// This class was used in a similar way to the following usage:
val bitmapLoader = BitmapLoader(application.applicationContext)

The Solution

The fix in this case was to use the Activity#context method or View#context, instead of Application#applicationContext

The lesson here is that the Application#applicationContext should not be used for retrieving UI resources. The Application object will only have system-level information and not information that is set by AppCompatDelegate. AppCompatDelegate only works on the activity-level.

You need to be very careful of the context you use when obtaining resources that could change based on the theme. 


Thanks for reading, if you have any questions or comments — feel free to reach out on Twitter @riggaroo

Thanks to Chris Banes and Alan Viverette for confirming what I was experiencing is intentional.

Lessons Learnt with Kotlin: Extension Functions

Lessons Learnt with Kotlin: Extension Functions

At Over, we’ve been using Kotlin since we started the new Android version of the app in November 2018. From day one, we’ve been excited to try the language features and leverage them to build our mobile design app.

One of the features we were most excited about was extension functions.

What is an Extension Function?

An extension function allows you to extend a classes functionality without needing to edit (or have access to) the class itself. They are great for libraries whose classes you can’t access. 

This is an example of an extension function in Kotlin: 

fun Canvas.center(): Point = Point(width / 2f, height / 2f)

You can then use it wherever required, as if that function formed part of the Canvas class itself, although it is not explicitly part of the API: 

val centerPoint = canvas.center()

How we overused them:

When we first started writing Kotlin, we were eager to use the new functionality of the language. We wanted to use extension functions and we didn’t realise the consequences of over-using them. We ended up with a code base that used them everywhere

The main functionality of the app (i.e. the rendering of projects), was written with extension functions. Want to render an image to the screen? Extension function. Want to render some text to the screen? Extension function. Want to do anything that doesn’t quite fit into the MVVM/MVP/MVI model? Extension function. 

This got tricky when we needed to start doing background loading and caching. Where should that logic and state be kept if everything is just an extension function? 🤨

It was at this point that we realised we had overused extension functions. Instead of creating new classes and concepts, we had created extension functions. 

This meant we needed to do a large refactor of the rendering to remove extension functions and rather create a new class to perform this related functionality.  

Disclaimer

This is not a blog post stating that “extension functions are terrible! don’t use them!”. They are an extremely useful feature of the language and we still use them at Over. We are just a bit more careful about what we use them for and where

We don’t do this ❌

We don’t use extension functions for non-related methods. For instance, this example below should not form part of the String API. It is unrelated functionality to the String class and shouldn’t be provided as an extension on that class since its specific to our business logic.  

fun String.toUserProperties() : UserProperties {
return UserProperties(this.toUppercase())
}

In this case, we would rather not make the extension function at all and just use the constructor of the UserProperties class to get this functionality. 

One thing to remember is that this function will be made available to your entire project (if you don’t make it private), which is also a great reason not to make an extension function. 

We do this ✅

We add extension functions onto classes when it makes sense to do so and the function relates to the class that we are extending.

For example, this method can totally be a part of the String API since it is related to String manipulation and it is commonly used throughout our app:

fun String.toGraphemeCharsList(): List<String> {
// do something to get list of grapheme characters
}

Side note: For those who are unfamiliar with the word grapheme . A grapheme is the smallest unit of a writing system. In Java/Kotlin, calling the loved String.toCharArray() method, will return characters in their unicode form. So if you are working with emoji or special characters, they are generally made up of more than one unicode character. For instance, the following emoji: 👩‍👩‍👧 is actually a combination of multiple emojis (as well as multiple unicode characters), so String.toCharArray() returns the “incorrect” number of visible characters on screen, it returns the number of unicode characters. Read more about this here.

However, we favor creating new classes for new behaviour, instead of adding extension functions onto existing classes.

We use extension functions on classes that aren’t extendable (i.e. classes that are part of the framework or primitives). We also create private extensions and use them only in the file they were created.

Summary 📃

Extension functions are a powerful feature in Kotlin that can be overused if you are not careful about when and where you use them. We made that mistake early on and now we are a lot more aware of our usages of them. 

Hopefully this article helps you reason about extension functions, when you are considering using them in your code. 

Have any thoughts or questions? Find me on Twitter.

Over ❤️ Kotlin – How we’ve used Kotlin to build our design app

Over ❤️ Kotlin – How we’ve used Kotlin to build our design app

I recently presented this talk at Kotlin Everywhere South Africa as the keynote for the event. I really enjoyed preparing this talk as it spoke about how we use Kotlin, mistakes we’ve made along the way and our opinion on how we decide to use certain features. 

Talk Description:

Over the past year and a half, I’ve worked primarily on a Kotlin codebase. We at Over, were lucky enough to get a chance to start a project from scratch and we chose Kotlin for many reasons. Our app has been featured multiple times on the Google Play Store and we have found ourselves facing some unique challenges with the product.

In this talk, I’ll cover what my experience has been like working on a Kotlin codebase. I will cover some of the features in Kotlin we use the most, some features we eagerly over used and some of the mistakes we’ve made along the way.

The video recording can be found here: 

The slides for the talk can be found here:

Android Canvas Drawing: Useful Graphics Classes & Operations 🧪

Android Canvas Drawing: Useful Graphics Classes & Operations 🧪

Drawing on an Android Canvas is quite overwhelming, there are many different classes and concepts to understand when drawing something. If you haven’t already read part one of this series make sure to read it here.

In this post, we will be covering some classes that you will find available within the Android Framework which can make your life a bit easier when working with a canvas.

Rect / RectF ◼️

A rectangle class that stores four values: topleftright and bottom. These can be used for drawing directly on canvas or just for storing sizes of objects that you want to draw.

The difference between the Rect and RectF class is that the RectF stores float values, where as the Rect class stores integers.

val rect = RectF(100.0f, 200.0f, 300.0f, 400.0f)

With KTX there are many graphics extension functions that you should take advantage of. For instance, there are some for Rect and RectF. One such extension is the destructuring declaration which gets components out of a Rect object:

val rect = RectF(100.0f, 200.0f, 300.0f, 400.0f)
val (left, top, right, bottom) = rect
// left = 100.0f, top = 200.0f, right = 300.0f, bottom = 400.0f

You can do other operations with a Rect class, for instance, you can union two Rects together. This basically just includes the points from both Rectsand returns a bigger Rect that contains both Rects inside it. There are also extension functions for this operation, but it is also possible without the extension:

val rect = RectF(100.0f, 200.0f, 300.0f, 400.0f)
val otherRect = RectF(50.0f, 400.0f, 150.0f, 500.0f)
rect.union(otherRect)
// rect = RectF(50.0, 200.0, 300.0, 500.0)
// alternatively:
val combinedRect = rect + otherRect
// or alternatively:
val combinedRect = rect or otherRect
// combinedRect = RectF(50.0, 200.0, 300.0, 500.0)

There are other operations you can perform on a Rect, such as : andxoror.


Point / PointF 👉🏽

Stores an x and y coordinate which represents a “point” on a canvas. Point stores integer values, whereas PointF stores floating point values.

val point = PointF(200.0f, 300.0f)

If you are using KTX, there are some extension functions built onto the Point and PointF classes that make working with points much easier. For instance, operator overloads which add the ability to plus and minus two points from each other.

val start = PointF(100.0f, 30.0f)
val end = PointF(20.0f, 10.0f)
val difference = start - end
val together = start + end
// together = Point(120.0f, 40.0f)

There also exists destructuring declarations for these classes, so we can easily get out x and y coordinates out easily from the Point class:

val start = PointF(100.0f, 30.0f)
val end = PointF(20.0f, 10.0f)
val (x, y) = start - end
// x = 80.0f y = 20.0f

Matrix 🔢

A 3 by 3 Matrix that stores information which can be used to transform a canvas. A Matrix can store the following kind of transformation information: scale, skew, rotation, translation.

Below is an example of using a Matrix to transform a Bitmap that is drawn on a Canvas.

Examples of Matrix transformations

To use a Matrix when drawing, you can do the following:

val customMatrix = Matrix()
// in onDraw()
customMatrix.postRotate(20.0f)
canvas.withMatrix(customMatrix) {
    drawBitmap(bitmap, null, rect, paint)
}

The above code will draw a bitmap on a canvas that is rotated at 20 degrees. There are a few other functions on a Matrix that we can use such as scaling, rotating and skewing. The great part about using a Matrix over doing everything yourself manually with Canvas transformations, is that the Matrix holds cumulative information about the transformations that are applied to it.

If you translate the Matrix, rotate, scale and translate again, the end values of the translation would be a bit different than the original values. If you were to do this yourself, you would need to calculate that manually if you were performing normal Canvas translate, scale functions.

preRotate vs proRotate vs setRotate

You might be wondering what postRotate means, considering the fact that there are other methods such as setRotate and preRotate on a Matrix. These three methods all do slightly different things:

setRotate — Completely resets the current Matrix and applies the rotation, thus losing any information that you may already have stored in your Matrix.

preRotate — The rotation will be applied before whatever the currentMatrix contains.

postRotate — The rotation will be applied after whatever the currentMatrix contains.

Perspective Drawing with Matrix

Matrix object can also provide us with the ability to perform perspective drawing, which is not possible to achieve with just standard Canvas transformation APIs. The function that allows perspective drawing or skewing of a canvas is Matrix#setPolyToPoly() . This method does sound a bit confusing at first, but once you wrap your head around how it works, it is not so bad!

Here is an example bitmap that has been “skewed” using the setPolyToPolymethod.

Bitmap drawn with setPolyToPoly

The setPolyToPoly method takes input (src) “points”, and maps them to the specified output (dst) “points”. I say “points” because they aren’t real point objects as we’ve just explored earlier in this post, but they are rather just values in a float array, which can be quite confusing.

You can see in the src array below, the first two values are representing the top left point of the image, the second two values represent the top right point and so on. These points can be in any order, but they must match with the corresponding point that you want it to map to, in the dstarray.

val src = floatArrayOf(
    0f, 0f, // top left point
    width, 0f, // top right point
    width, height, // bottom right point
    0f, height // bottom left point
)
val dst = floatArrayOf(
    50f, -200f, // top left point
    width, -200f, // top right point
    width, height +200f, // bottom right point
    0f, height // bottom left point
)
val pointCount = 4 // number of points

// the second and fourth arguments represent the index in the src and dest arrays from which the points should start being mapped from
newMatrix.setPolyToPoly(src, 0, dst, 0, pointCount)

canvas.withMatrix(newMatrix) {
   drawBitmap(bitmap, null, rect, paint)
}

In this example, the bottom right point, will be mapped from the point [width, height] to the point [width, height +200f].

So you can see from the above example that a Matrix can do some pretty powerful and interesting stuff.

Tip: Use the Matrix class to work between different coordinate systems

If you have two different coordinate systems that you are dealing with on a single view, then leveraging a Matrix class can help you map between the two.

For instance, if you get a touch event from Android that is measured in the height and width of the size of the screen, but you would like to know what that point would be inside the image you are drawing on screen, within that coordinate system (ie the coordinate system of the image), you can use a Matrix to map between these two systems.

Example of two different coordinate systems

In order to get the point mapped inside the image drawn on screen, we can use the Matrix#mapPoints() method:

fun mapPoint(point: PointF): PointF {
computeMatrix.reset() // apply the same transformations on the matrix that are applied to the Image
computeMatrix.postTranslate(20f, 20f)
computeMatrix.postRotate(20f, x, y) // create float array with the points we want to map
val arrayPoint = floatArrayOf(point.x, point.y) // use the map points function to apply the same transformations that the matrix has, onto the input array of coordinates
computeMatrix.mapPoints(arrayPoint) // get the points out from the array, these will now be transformed by the matrix.
return PointF(arrayPoint[0], arrayPoint[1])
}

In the above example, the input point would be the touch event from Android, and the translation and rotation that we apply on the computeMatrix is the same translation and rotation we applied on the image when it was drawn. Then we create a float array which contains the original x and y point. We then call the mapPoints method with this array. It’ll then transform the values in place and when we query the array for the first and second values it’ll be the mapped coordinate, which is the point inside the image view.


Summary 👨🏾‍🎨

You can see that the Android Graphics APIs contain loads of useful classes that you can leverage to do a lot of the calculations and mathematics for you. From Points to Rects to more complex calculation classes like Matrixclasses, we can see that there are many things we can use to help us draw graphics on the screen! Make sure to include KTX to have an even smoother experience when working with Android Graphics classes.

Have any questions or comments? Feel free to reach out and say hi to me on Twitter.