How to get text on an ActionBar Icon?

Question

I want something like this:

The 3rd icon is for notifications and it is just a png image now. Is it possible to do something, so that i can change the text/number ie.., 03 programatically to show the actual no.of notifications.

Thank You

Answer 1

Here is some example code that worked for me.

1: Create a layout for your badge menu item.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="48dp"     android:layout_height="fill_parent"     android:layout_gravity="right" >      <!-- Menu Item Image -->     <ImageView         android:layout_width="48dp"         android:layout_height="fill_parent"         android:clickable="true"         android:src="@drawable/bkg_actionbar_notify_off" />      <!-- Badge Count -->         <TextView         android:id="@+id/actionbar_notifcation_textview"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_alignParentRight="true"         android:padding="@dimen/padding_small"         android:text="99"         android:textColor="@color/holo_orange_dark" />  </RelativeLayout> 

2: Create a menu item in res/menu and set the actionLayout to your layout

<menu xmlns:android="http://schemas.android.com/apk/res/android" >     <item         android:id="@+id/badge"         android:actionLayout="@layout/actionbar_badge_layout"         android:icon="@drawable/icn_menu_posts"         android:showAsAction="always">     </item> </menu> 

3: Then in onCreateOptionsMenu of your activity or fragment you can do something like this...

public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {     inflater.inflate(R.menu.badge, menu);      RelativeLayout badgeLayout = (RelativeLayout) menu.findItem(R.id.badge).getActionView();     TextView tv = (TextView) badgeLayout.findViewById(R.id.actionbar_notifcation_textview);     tv.setText("12"); } 

Note: If you wanted to change the badge count later on, you could store a reference to the Menu object passed to onCreateOptionsMenu and use the same code to get the required view and set a value.

=== ApCompat Warning ==================================================

If using the AppCompatActivity then you must set the actionView in onCreateOptionsMenu

 @Override  public boolean onCreateOptionsMenu(Menu menu) {       getMenuInflater().inflate(R.menu.main_menu, menu);       MenuItem item = menu.findItem(R.id.badge);       MenuItemCompat.setActionView(item, R.layout.actionbar_badge_layout);       RelativeLayout notifCount = (RelativeLayout) MenuItemCompat.getActionView(item);      TextView tv = (TextView) notifCount.findViewById(R.id.actionbar_notifcation_textview);     tv.setText("12");      return super.onCreateOptionsMenu(menu); 

Answer 2

One option is to create your own action view for this. Use android:actionLayout in the XML and getActionView() in Java after inflation to manipulate it. Your action view would be an ImageView (for the icon) and... something for the badge. I suspect that you will find that trying to make that badge via text will be difficult, and that you are better served with a bunch of badge images, one of which you layer on top of the icon (e.g., via RelativeLayout or FrameLayout, or by wrapping the icon in a LayerListDrawable).

Another option is simply to have N versions of the icon+badge, perhaps wrapped in a LevelListDrawable, that you choose from at runtime.