Change the launcher icon depending on build type

In the last post we saw how we configure build.gradle to create different builds that can be simultaneously installed on the same device.

Now that we have a few builds on the device, a minor inconvenience is that we have the same name and launcher in the apps on the device. Our testers at Xero have been asking us to rename the build to identify what build it is. That is the easy part and we all know how we can change the name by just changing the name in the strings.xml file in various builds.

However we wanted to change the launcher and the name also. Of course, we can change the launcher also and request our designers to recreate for each build. That would mean that our designers have to create different launcher icons and that might not be a very productive use of their time depending on the audience.

So we use Imagemagick to do the trick for us from our build server. As soon as we pull down the code for the app, we change the launcher color and give it a new label also on the launcher. This is easy but can be a little time taking and may require a few trials to see what color works well for each build. After that we add a label to the icon itself and position it according to where it looks best. This also requires a little playing around with.

Here is what we do for that build step in TeamCity.

echo "Changing mdpi Launcher"
convert mipmap-mdpi/ic_launcher.png -modulate 100,100,24 mipmap-mdpi/ic_launcher.png
convert mipmap-mdpi/ic_launcher.png -fill black -pointsize 8 -annotate +4+40 'QA' mipmap-mdpi/ic_launcher.png

echo "Changing hdpi Launcher"
convert mipmap-hdpi/ic_launcher.png -modulate 100,100,24 mipmap-hdpi/ic_launcher.png
convert mipmap-hdpi/ic_launcher.png -fill black -pointsize 12 -annotate +6+60 'QA' mipmap-hdpi/ic_launcher.png

echo "Changing xhdpi Launcher"
convert mipmap-xhdpi/ic_launcher.png -modulate 100,100,24 mipmap-xhdpi/ic_launcher.png
convert mipmap-xhdpi/ic_launcher.png -fill black -pointsize 16 -annotate +7+80 'QA' mipmap-xhdpi/ic_launcher.png

echo "Changing xxhdpi Launcher"
convert mipmap-xxhdpi/ic_launcher.png -modulate 100,100,24 mipmap-xxhdpi/ic_launcher.png
convert mipmap-xxhdpi/ic_launcher.png -fill black -pointsize 24 -annotate +11+124 'QA' mipmap-xxhdpi/ic_launcher.png

We repeated it four times for the 4 configurating we have assets for mdpi, hdpi, xhdpi and xxhdpi.
All we are doing is two things:

  1. Change color of launcher
convert mipmap-xhdpi/ic_launcher.png -modulate 100,100,24 mipmap-xhdpi/ic_launcher.png

All you need to do there is change the third parameter to change the color. 24 here. It can range from 0-200. You may go over but it just repeats.

  1. Label it according to build type as Dev/QA/REG according to the build. It is QA in this build
convert mipmap-xhdpi/ic_launcher.png -fill black -pointsize 16 -annotate +7+80 'QA' mipmap-xhdpi/ic_launcher.png

I configure two things here depending on the size of icon. Text size and Position where it is placed on the icon. 16 is text size here and +7+80 is the position. You may notice that it is different for each density.

This is how it looks for our Xero Me app. Notice the Xero Me builds, their ridiculously saturated colors and the positioning of text on them.

That is it. Now you should be able to run the rest of your build steps and have launcher icons configured to different builds.