How to show border around text in android action bar menu item?

Issue

I intend to add Chrome like functionality to my android application (see arrow in the screenshot below) where a number would be displayed in the action bar menu with a border around it. How can I do this?

Solution

Let's start with the box frame:

/res/drawable/count_frame.xml

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
       android:inset="2dp">
    <shape
        android:shape="rectangle">

        <corners android:radius="2dp"/>
        <solid android:color="@android:color/transparent"/>
        <stroke
            android:width="2dp"
            android:color="#FF404040"/>
    </shape>

</inset>

That count_frame box is going to go around a TextView:

/res/layout/menu_action_count_view.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView android:id="@+id/text"
          xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:tools="http://schemas.android.com/tools"
          android:layout_width="24dp"
          android:layout_height="24dp"
          android:layout_margin="12dp"
          android:background="@drawable/count_frame"
          android:gravity="center"
          android:textColor="#FF000000"
          android:textSize="13sp"
          android:textStyle="bold"
          tools:text="4"/>

This TextView is going to be an action view for your menu item. (Using the app: namespace since I am assuming you are using AppCompatActivity):

/res/menu/menu_main.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/action_result_view"
        android:title="@string/count"
        app:actionLayout="@layout/menu_action_count_view"
        app:showAsAction="always"/>

</menu>

Now in your onCreateOptionsMenu override, you get the action view and set it up. Let's assume your count is in private int mCount;

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.menu_main, menu);
    TextView count = (TextView) menu.findItem(R.id.action_result_view).getActionView();
    count.setText(Integer.toString(mCount));  // so the int isn't mistaken for a resource id!
    count.setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View v) {
            // do your action here
        }
    });
    return true;
}

When the count changes, call supportInvalidateOptionsMenu().

In case you wanted to show the overflow menu on the tap of this bordered textview, use the following code in onCreateOptionsMenu

@Override
public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main, menu);
        final Menu m = menu;
        final MenuItem item = menu.findItem((R.id.action_result_view));
        TextView count = (TextView) menu.findItem(R.id.action_result_view).getActionView();
        count.setText(Integer.toString(mCount));  // so the int isn't mistaken for a resource id!
        count.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                m.performIdentifierAction(item.getItemId(), 0);
            }
        });
        return true;
    }

Answered By - kris larson