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.

Answer 3

Had to make some changes to domji84's answers. For some reason the clicking on imageview was not calling the click event, it works find after removing the clicklabe = "true" from image view.

menu_item_cart.xml

    <!-- Menu Item Image -->
    <ImageView
        android:layout_width="30dp"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher" />

    <!-- Badge Count -->
    <TextView
        android:id="@+id/cartCountTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:padding="5dp"
        android:layout_marginTop="5dp"
        android:text="99"
        android:textColor="@android:color/white"
        android:textStyle="bold"/>

</RelativeLayout>

menu_main.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".MainActivity">
    <item
        android:id="@+id/action_settings"
        android:title="@string/action_settings"
        android:orderInCategory="100"
        app:showAsAction="never" />

    <item
        android:id="@+id/action_cart"
        android:title="test"
        app:actionLayout="@layout/menu_item_cart_count"
        app:showAsAction="always">
    </item>
</menu>

Activity code

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.menu_main, menu);
    menu.findItem(R.id.action_cart).getActionView().setOnClickListener(this);
    return true;
}

Answer 4

Here you can use Custom action bar with default action bar... firstly prepare layout by xml or java.then use display matrics and get window manager.After this inflate the layout. like this

            DisplayMetrics dm = new DisplayMetrics();
    getWindowManager().getDefaultDisplay().getMetrics(dm);
    ActionBar ab = getSupportActionBar();
    View mactionbar = getLayoutInflater().inflate(R.layout.main2, null);