How To Add an Android Action Bar Badge

knowventBanner

There is a real need for display a badge along side of an action bar item. Unfortunitely the actionbarsherlock and android’s actionbar implementation does support any type of badging.

However, a library was developed, called android-viewbadger, to add badges to views. However, this library does not support badging action bar items at the time of this article. THis is because action bar UI objects are not derived from the View or ViewGroup class.

Setting Up an Android Action Bar Badge

The setup is going to be as follows (this assumes you already have the viewbager library mentioned above setup in your project):

1) Create the layout definitions

R.menu.actionbar_menu_messages:

<menu xmlns:android="http://schemas.android.com/apk/res/android"
         >
    <item android:showAsAction="ifRoom" android:icon="@drawable/action_bar_pk_content_email"
        android:id="@+id/menuMessages" android:title="More"></item>

</menu>

R.layout.common_messages_indicator:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             android:layout_width="64dp"
             android:layout_height="fill_parent"
             android:paddingTop="10dp"
             android:gravity="center">
    <ImageView
        android:id="@+id/imgMessagesIcon"
        android:layout_width="32dp"
        android:layout_height="fill_parent"
        android:layout_gravity="center"
        android:scaleType="fitCenter"
        android:src="@drawable/messages_button"
        android:background="@android:color/transparent"
        android:focusable="false"
        />

   </FrameLayout>

2) Setup a onCreateOptionsMenu private Menu messagesAction; public boolean onCreateOptionsMenu(Menu menu) { super.onCreateOptionsMenu(menu); MenuInflater inflater = getSupportMenuInflater(); inflater.inflate(R.menu.actionbar_menu_messages, menu); MenuItem msgItem = menu.findItem(R.id.menuMessages);

    messagesAction = msgItem;
    msgItem.setActionView(R.layout.common_messages_indicator);

    if(msgItem.getActionView().findViewById(R.id.imgMessagesIcon) != null)
    {
        imgMessagesIcon = ((ImageView)msgItem.getActionView().findViewById(R.id.imgMessagesIcon));

        imgMessagesIcon.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                ((SlidingMenuBase)view.getContext()).onOptionsItemSelected(msgItem);
            }
        });
        updateMessagesBadge();
    }

    return true;
}

The main point here is we are implementing a custom action view for the message menu item by setting msgItem.setActionView(R.layout.common_messages_indicator) to a custom view that contains a image button view.

This is how we implement the android-viewbadger against a view (as opposed to an action bar item where the library falls short).


3) Apply Badge view to the action bar view

private void updateMessagesBadge(int badgeCount)
{
    if(messagesAction != null)
    {
        ImageView imgMessagesIcon = ((ImageView)messagesAction.getActionView().findViewById(R.id.imgMessagesIcon));
        if(messageCenterBadge == null && badgeCnt > 0)
        {
            messageCenterBadge = new BadgeView(this, imgMessagesIcon);
            messageCenterBadge.setBadgePosition(BadgeView.POSITION_TOP_RIGHT);
            messageCenterBadge.setBadgeMargin(0);
            messageCenterBadge.setTextSize(12);
            messageCenterBadge.setText(String.valueOf(badgeCount));
            messageCenterBadge.show();
        }
        else if(messageCenterBadge != null && badgeCnt > 0 )
        {
            messageCenterBadge.setText(String.valueOf(badgeCnt));
            messageCenterBadge.show();
        }
        else if(messageCenterBadge != null && badgeCnt == 0) {
            messageCenterBadge.hide();
        }
    }
}

Since we setActionView using a custom view we could instantiate the android view badge against an ImageView.

Here we are just applying some view rules to decide to hide the badge when it is zero.


That is it. Enjoy adding badge counts to your action bar items

Let me know if this helped you or if you have any questions below.

Posted in Uncategorized.
  • Justin Hyland

    The MessageCenterBadge variable is a class level private variable which is constructed see above

    private BadgeView MessageCenterBadge;