AppCompat |

we have started with “How to change the Backgound and Text color of AppCompat Light DarkActionBar Theme” . Sometimes you want to add icons in the android app overflow menu. Here is the final result:

Sometimes it is not enough to define the icon in you activity xml file located in res/menu:

&lt;item&gt; 
...
    android:title="@string/action_profil"
    android:icon="@drawable/ic_action_person"
...
&lt;/item&gt;

<item>

...

android:title="@string/action_profil"

android:icon="@drawable/ic_action_person"

...

</item>

In some cases this will not have any effect to display the icon beside the item title.

Let we start to download the Action Bar Icon Pack from the following Android download link: https://developer.android.com/design/downloads/index.html#action-bar-icon-pack.

You can also create your own icons, just respect the different devices display format:

drawable-mdpi: 32 x 32 px
drawable-hdpi : 48 x 48 px
drawable-xhdpi 64 x 64 px
drawable-xxhdpi 96 x 96 px

After dowloading the zip file, just unziped and search for the “Action Bar Icons” folder. You have to choice which icons folder you want to use in your theme. You have two folders: the Holo Light and the Holo Dark .

Next step is to search for the icon that you want to use for the overflow title. In our example we will use the “06_social_add_person” icons.

Just copy the different folders inside your project workspace (/res folder).

Now you have all icons available:

Your activity xml should now have following entry’s:

&lt;item
        android:id="@+id/action_profil"
        android:orderInCategory="0"
        android:title="@string/action_profil"
        android:icon="@drawable/ic_action_person"
        app:showAsAction="never"/&gt;

<item

android:id="@+id/action_profil"

android:orderInCategory="0"

android:title="@string/action_profil"

android:icon="@drawable/ic_action_person"

app:showAsAction="never"/>

You have to specify the title in /res/values/strings.xml :

&lt;string name="action_profil"&gt;Profil&lt;/string&gt;

1	<string name="action_profil">Profil</string>

The orderInCategory is just to ensure the item sequence in the overflow menu. We start the profile menu with the “0” position.

So, lets add some standard java code to be able to display the menu icons. Add followig code to your Activity located in /src/YourActivity.java

@Override
	 public boolean onMenuOpened(int featureId, Menu menu)
	 {
	     if(featureId == Window.FEATURE_ACTION_BAR && menu != null){
	         if(menu.getClass().getSimpleName().equals("MenuBuilder")){
	             try{
	                 Method m = menu.getClass().getDeclaredMethod(
	                     "setOptionalIconsVisible", Boolean.TYPE);
	                 m.setAccessible(true);
	                 m.invoke(menu, true);
	             }
	             catch(NoSuchMethodException e){
                         //write in the LogCat 
	                 Log.e(TAG, "onMenuOpened", e);
	             }
	             catch(Exception e){
	                 throw new RuntimeException(e);
	             }
	         }
	     }
	     return super.onMenuOpened(featureId, menu);
	 }

Eclipse ADT will suggest to import the necessary classes, in this case:

import java.lang.reflect.Method;
import android.view.Window;
import android.util.Log;

That’s all !

Here is a simple way how to change the background and text color on the Android AppCompat Light DarkActionBar.
Here is the final result:

Let say your app has following name :<MyTheme>

and you are using the Andoird 3.0 version.
In res/AndoidManifest.xml you will have following code:

 &lt;uses-sdk 
     android:minSdkVersion="14" 
     android:targetSdkVersion="16" /&gt;

<uses-sdk

android:minSdkVersion="14"

android:targetSdkVersion="16" />

1. Add following code in the res/values/styles.xml file:

&lt;style name="MyTheme"  parent="Theme.AppCompat.Light.DarkActionBar"&gt;
         &lt;item name="actionBarStyle"&gt;@style/MyActionBar&lt;/item&gt;
    &lt;/style&gt;

    &lt;style name="MyActionBar" parent="@style/Widget.AppCompat.ActionBar.Solid"&gt;
            &lt;item name="titleTextStyle"&gt;@style/MyTitleTextStyle&lt;/item&gt;
            &lt;item name="background"&gt;@color/actionBarBg&lt;/item&gt;
    &lt;/style&gt;
    
    &lt;style name="MyTitleTextStyle"  parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"&gt;
        &lt;item name="android:textColor"&gt;@color/actionBarText&lt;/item&gt;
    &lt;/style&gt;

<item name="actionBarStyle">@style/MyActionBar</item>

</style>

<item name="titleTextStyle">@style/MyTitleTextStyle</item>

<item name="background">@color/actionBarBg</item>

</style>

<item name="android:textColor">@color/actionBarText</item>

</style>

2. Create the color definition file under: res/values/colors.xml and add following code:

&lt;resources&gt; 
 &lt;!-- White text color  --&gt; 
 &lt;color name="actionBarText"&gt;#FFFFFF&lt;/color&gt; 
   
 &lt;!-- facebook blue color --&gt;  
 &lt;color name="actionBarBg"&gt;#45619D&lt;/color&gt; 
  
&lt;/resources&gt;

<color name="actionBarText">#FFFFFF</color>

</resources>

That’s all.

In the next tutorial we will see How to show icons in ActionBar overflow menu