How to make sure that your Android menu icon is displayed whatever the background color is

Wow, that’s a long title ;-)

The problem with background colors

Today I downloaded the Action Bar Icon Pack from the official Android develop site and I used one of the icons (“2_action_help.png”) in the menu of one of my applications.

In the icon pack, each icon comes in 2 different colors: one for the “holo dark” theme and one for the “holo light” theme. I chosed the one from the “holo dark” theme, with this menu.xml:


<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
   <item
      android:id="@+id/about_menu_2"
      android:icon="@drawable/action_help_holo_dark"
      android:title="About"/>
</menu>

…and ended up with this result in the Android emulator:

about_emulator

So far so good. Then I deployed my application on a real device (same Android version as the emulator) and ended up with this:

about_real

What the f… ?

Yes indeed: on my real device, the menu has a white background, which means that the icon cannot be seen (white on white). Using the “holo light” icon instead fixes the problem, but in that case the icon is not displayed on the emulator (where the menu has a black background).

What actually happens is that the real device manufacturer (SAMSUNG for me), can choose to customize the Android default theme and in that case, it will be different from the one used by your emulator.

How to solve this issue

It turns out that this is a common problem and there are lots of blog posts to talk about this. 4 solutions are usually suggested:

  1. Use a set of icons that will work with all background colors as suggested here.
  2. Embeds different icons in your application and dynamically select the one that will best match the background color.
  3. Customize the menu by specifying your own background/text color as suggested here.
  4. Use the builtin icons

Let’s talk about option #4: using the Android builtin icons

Using Android built-in icons

Android comes with a bunch of built-in drawables that are available in “android.R.drawable”.

Jeremy Logan created a great website that displays all the built-in drawables for all Android version, check out androiddrawables.com.

So basically, if I want to use the built-in “help” icon, I need to do this:


<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
   <item
      android:id="@+id/about_menu_1"
      android:icon="@android:drawable/ic_menu_help"
      android:title="About"/>
</menu>

Result on the emulator:

about_emulator_2

Result on the real device:

about_real_2

Why does it work ? Because if the real device manufacturer decides to change the default Android theme… then he also needs to change the built-in icons !

Some people will tell you that referencing these built-in icons is a bad idea and that you should copy them in your local drawable folders. In fact, the official Android documentation states that:

Warning: Because these resources can change between platform versions, you should not reference these icons using the Android platform resource IDs (i.e. menu icons under android.R.drawable). If you want to use any icons or other internal drawable resources, you should store a local copy of those icons or drawables in your application resources, then reference the local copy from your application code. In that way, you can maintain control over the appearance of your icons, even if the system’s copy changes.

The problem with this “recommanded” approach is that we end up with the initial problem ! Anyway, in case you want to do this, the png files for the built-in icons are here: [ANDROID_SDK_HOME]/platforms/android-[VERSION]/data/res

Creating your own drawables

As an added bonus, Google provides a cool online icon generator tool, you may want to check it out: Android Asset Studio.

About these ads

One Response to How to make sure that your Android menu icon is displayed whatever the background color is

  1. Pingback: Changing the color of the background menu in Android « The skiing cube

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: