A/B Test your App using Firebase Remote Config

Last week I was in Nairobi and Cape Town giving a talk on Remote Config and Test Lab in Firebase. I had such a great time and thought I should share some of the content I presented online.

What is A/B Testing?

A/B testing is the process of experimentally testing your UI on different audiences in order to determine the best (or most profitable) user experience.  Firebase Remote Config enables us to do A/B testing by allowing us to randomly segment our app audiences easily. Continue reading A/B Test your App using Firebase Remote Config

ConstraintLayout 101 & the new Layout Builder in Android Studio

I was lucky enough to attend Google I/O and I went to the talk about the new Layout – ConstraintLayout . I was really excited about this feature that I couldn’t wait till I got home to try it out.

What is ConstraintLayout?

ConstraintLayout  is a new type of layout that you can use in your Android App, it is compatible down to API level 9 and is part of the support library. Its aim is to reduce layout hierarchies (and improve performance of layouts) and it also reduces the complexity of trying to work with RelativeLayouts .  It is compatible with other layouts, so they can live in harmony together without having to choose one or the other. Continue reading ConstraintLayout 101 & the new Layout Builder in Android Studio

Optimizing Layouts in Android – Reducing Overdraw

You have a great idea and you have launched your application into the wild. Now you hear people complaining how your app is slow and horrible to use. Sad face.

One such step to improve the rendering time of your application is to have a look at the GPU Overdraw tool.

What is Overdraw?

Overdraw happens every time the application asks the system to draw something on top of something else. The “Debug GPU Overdraw” tool overlays colours on top of your screen to indicate how many times a pixel has been redrawn.

How do I enable the tool Debug GPU Overdraw?

  1. Go to Settings on your device.
  2. Go to Developer Options
  3. Select “Debug GPU Overdraw”.
  4. Select “Show overdraw areas”

You will notice your screen change colour – don’t panic. Navigate to your application and now we can begin to understand how to improve our layouts.

What do the different colours mean?

Screenshot_2016-02-01-11-08-40The colours mean the following things:

Original colourno overdraw – The pixels have been painted once on the screen.

Blue1x Overdraw –  The pixels have been painted 2 times on the screen.

Green –  2x Overdraw – The pixels on the screen have been painted 3 times on the screen.

Pink3x Overdraw – The pixels on the screen have been painted 4 times on the screen.

Red – 4x Overdraw – The pixels on the screen have been painted 5 times on the screen.

GPU Overdraw

You can see from my Book Dash application, that my initial layout was doing a lot of overdraw. 🙁


How do you fix overdraw?

In the example above, I removed the background colour that was set on the RelativeLayout and let the theme draw the background.

So going from this:

to this:

Modifying the layout yielded the following result 😊:

After removing the background colour.As you can see, the overdraw has been minimized. The red overdraw has been reduced.

This could be further improved to the layout showing mostly its true colour and a slight amount of blue overdraw. Some overdraw is inevitable.

Not all cases of overdraw are related to background colours. Other problems can be present too, like very complex layout hierarchies or too many views.

You should aim for a maximum overdraw of 2x (Green).

You can also use other tools to see why overdraw is happening, tools such as Hierarchy Viewer and GL Tracer.

How do you debug overdraw issues? Do you have any other tips to share?

Also, you should totally Download the Book Dash App or contribute on Github!


Get it on Google Play