Actionbar notification count icon (badge) like Google has

I am not sure if this is the best solution or not, but it is what I need.

Please tell me if you know what is need to be changed for better performance or quality. In my case, I have a button.

Custom item on my menu - main.xml

<item    android:id="@+id/badge"    android:actionLayout="@layout/feed_update_count"    android:icon="@drawable/shape_notification"    android:showAsAction="always"></item>

Custom shape drawable (background square) - shape_notification.xml

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"   android:shape="rectangle">    <stroke android:color="#22000000" android:width="2dp"/>    <corners android:radius="5dp" />    <solid android:color="#CC0001"/></shape>

Layout for my view - feed_update_count.xml

<?xml version="1.0" encoding="utf-8"?><Button xmlns:android="http://schemas.android.com/apk/res/android"     android:id="@+id/notif_count"     android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:minWidth="32dp"     android:minHeight="32dp"     android:background="@drawable/shape_notification"     android:text="0"     android:textSize="16sp"     android:textColor="@android:color/white"     android:gravity="center"     android:padding="2dp"     android:singleLine="true">    </Button>

MainActivity - setting and updating my view

static Button notifCount;static int mNotifCount = 0;    @Overridepublic boolean onCreateOptionsMenu(Menu menu) {    MenuInflater inflater = getSupportMenuInflater();    inflater.inflate(R.menu.main, menu);    View count = menu.findItem(R.id.badge).getActionView();    notifCount = (Button) count.findViewById(R.id.notif_count);    notifCount.setText(String.valueOf(mNotifCount));    return super.onCreateOptionsMenu(menu);}private void setNotifCount(int count){    mNotifCount = count;    invalidateOptionsMenu();}

Edit Since version 26 of the support library (or androidx) you no longer need to implement a custom OnLongClickListener to display the tooltip. Simply call this:

TooltipCompat.setTooltipText(menu_hotlist, getString(R.string.hint_show_hot_message));

I'll just share my code in case someone wants something like this:

• layout/menu/menu_actionbar.xml

  <?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android">    ...    <item android:id="@+id/menu_hotlist"        android:actionLayout="@layout/action_bar_notifitcation_icon"        android:showAsAction="always"        android:icon="@drawable/ic_bell"        android:title="@string/hotlist" />    ...</menu>

• layout/action_bar_notifitcation_icon.xml

  Note style and android:clickable properties. these make the layout the size of a button and make the background gray when touched.

  <?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="wrap_content"    android:layout_height="fill_parent"    android:orientation="vertical"    android:gravity="center"    android:layout_gravity="center"    android:clickable="true"    style="@android:style/Widget.ActionButton">    <ImageView        android:id="@+id/hotlist_bell"        android:src="@drawable/ic_bell"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:gravity="center"        android:layout_margin="0dp"        android:contentDescription="bell"        />    <TextView xmlns:android="http://schemas.android.com/apk/res/android"        android:id="@+id/hotlist_hot"        android:layout_width="wrap_content"        android:minWidth="17sp"        android:textSize="12sp"        android:textColor="#ffffffff"        android:layout_height="wrap_content"        android:gravity="center"        android:text="@null"        android:layout_alignTop="@id/hotlist_bell"        android:layout_alignRight="@id/hotlist_bell"        android:layout_marginRight="0dp"        android:layout_marginTop="3dp"        android:paddingBottom="1dp"        android:paddingRight="4dp"        android:paddingLeft="4dp"        android:background="@drawable/rounded_square"/></RelativeLayout>

• drawable-xhdpi/ic_bell.png

  A 64x64 pixel image with 10 pixel wide paddings from all sides. You are supposed to have 8 pixel wide paddings, but I find most default items being slightly smaller than that. Of course, you'll want to use different sizes for different densities.

• drawable/rounded_square.xml

  Here, #ff222222 (color #222222 with alpha #ff (fully visible)) is the background color of my Action Bar.

  <?xml version="1.0" encoding="utf-8"?><shape    xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="rectangle">    <corners android:radius="2dp" />    <solid android:color="#ffff0000" />    <stroke android:color="#ff222222" android:width="2dp"/></shape>

• com/ubergeek42/WeechatAndroid/WeechatActivity.java

  Here we make it clickable and updatable! I created an abstract listener that provides Toast creation on onLongClick, the code was taken from from the sources of ActionBarSherlock.

  private int hot_number = 0;private TextView ui_hot = null;@Override public boolean onCreateOptionsMenu(final Menu menu) {    MenuInflater menuInflater = getSupportMenuInflater();    menuInflater.inflate(R.menu.menu_actionbar, menu);    final View menu_hotlist = menu.findItem(R.id.menu_hotlist).getActionView();    ui_hot = (TextView) menu_hotlist.findViewById(R.id.hotlist_hot);    updateHotCount(hot_number);    new MyMenuItemStuffListener(menu_hotlist, "Show hot message") {        @Override        public void onClick(View v) {            onHotlistSelected();        }    };    return super.onCreateOptionsMenu(menu);}// call the updating code on the main thread,// so we can call this asynchronouslypublic void updateHotCount(final int new_hot_number) {    hot_number = new_hot_number;    if (ui_hot == null) return;    runOnUiThread(new Runnable() {        @Override        public void run() {            if (new_hot_number == 0)                ui_hot.setVisibility(View.INVISIBLE);            else {                ui_hot.setVisibility(View.VISIBLE);                ui_hot.setText(Integer.toString(new_hot_number));            }        }    });}static abstract class MyMenuItemStuffListener implements View.OnClickListener, View.OnLongClickListener {    private String hint;    private View view;    MyMenuItemStuffListener(View view, String hint) {        this.view = view;        this.hint = hint;        view.setOnClickListener(this);        view.setOnLongClickListener(this);    }    @Override abstract public void onClick(View v);    @Override public boolean onLongClick(View v) {        final int[] screenPos = new int[2];        final Rect displayFrame = new Rect();        view.getLocationOnScreen(screenPos);        view.getWindowVisibleDisplayFrame(displayFrame);        final Context context = view.getContext();        final int width = view.getWidth();        final int height = view.getHeight();        final int midy = screenPos[1] + height / 2;        final int screenWidth = context.getResources().getDisplayMetrics().widthPixels;        Toast cheatSheet = Toast.makeText(context, hint, Toast.LENGTH_SHORT);        if (midy < displayFrame.height()) {            cheatSheet.setGravity(Gravity.TOP | Gravity.RIGHT,                    screenWidth - screenPos[0] - width / 2, height);        } else {            cheatSheet.setGravity(Gravity.BOTTOM | Gravity.CENTER_HORIZONTAL, 0, height);        }        cheatSheet.show();        return true;    }}

Just to add. If someone wants to implement a filled circle bubble, heres the code (name it bage_circle.xml):

<shape xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="ring"    android:useLevel="false"    android:thickness="9dp"    android:innerRadius="0dp"    >    <solid        android:color="#F00"        />    <stroke        android:width="1dip"        android:color="#FFF" />    <padding        android:top="2dp"        android:bottom="2dp"/></shape>

You may have to adjust the thickness according to your need.

EDIT:Here's the layout for button (name it badge_layout.xml):

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="wrap_content"    android:layout_height="wrap_content">    <com.joanzapata.iconify.widget.IconButton        android:layout_width="44dp"        android:layout_height="44dp"        android:textSize="24sp"        android:textColor="@color/white"        android:background="@drawable/action_bar_icon_bg"        android:id="@+id/badge_icon_button"/>    <TextView        android:id="@+id/badge_textView"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignTop="@id/badge_icon_button"        android:layout_alignRight="@id/badge_icon_button"        android:layout_alignEnd="@id/badge_icon_button"        android:text="10"        android:paddingEnd="8dp"        android:paddingRight="8dp"        android:paddingLeft="8dp"        android:gravity="center"        android:textColor="#FFF"        android:textSize="11sp"        android:background="@drawable/badge_circle"/></RelativeLayout>

In Menu create item:

<item        android:id="@+id/menu_messages"        android:showAsAction="always"        android:actionLayout="@layout/badge_layout"/>

In onCreateOptionsMenu get reference to the Menu item:

    itemMessages = menu.findItem(R.id.menu_messages);    badgeLayout = (RelativeLayout) itemMessages.getActionView();    itemMessagesBadgeTextView = (TextView) badgeLayout.findViewById(R.id.badge_textView);    itemMessagesBadgeTextView.setVisibility(View.GONE); // initially hidden    iconButtonMessages = (IconButton) badgeLayout.findViewById(R.id.badge_icon_button);    iconButtonMessages.setText("{fa-envelope}");    iconButtonMessages.setTextColor(getResources().getColor(R.color.action_bar_icon_color_disabled));    iconButtonMessages.setOnClickListener(new View.OnClickListener() {        @Override        public void onClick(View view) {            if (HJSession.getSession().getSessionId() != null) {                Intent intent = new Intent(getThis(), HJActivityMessagesContexts.class);                startActivityForResult(intent, HJRequestCodes.kHJRequestCodeActivityMessages.ordinal());            } else {                showLoginActivity();            }        }    });

After receiving notification for messages, set the count:

itemMessagesBadgeTextView.setText("" + count);itemMessagesBadgeTextView.setVisibility(View.VISIBLE);iconButtonMessages.setTextColor(getResources().getColor(R.color.white));

This code uses Iconify-fontawesome.

compile 'com.joanzapata.iconify:android-iconify-fontawesome:2.1.+'