How to display count of notifications in toolbar icon in android

Question

I would like to make an icon counter for android just like the cart. I have seen many e-commerce app cart icon count increase. I show flipkart app snapshot.:-

Answer 1

You can do as follows

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;    

@Override
public 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();
}

Answer 2

Just change android:actionLayout="@layout/feed_update_count" to app:actionLayout="@layout/feed_update_count". it will work

Answer 3

In my solution, whenever a new notification arrives, the counter will increase (as observed in shopping apps)

Try this, it works on my MOTO e2.

Make sure your API Level > 14

Create a layout like:

</RelativeLayout>
    <ImageView
        android:id="@+id/counterBackground"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/unread_background" />

    <TextView
        android:id="@+id/count"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1"
        android:textSize="8sp"
        android:layout_centerInParent="true"
        android:textColor="#FFFFFF" />
</RelativeLayout>

In onCreateOptionMenu,

@Override
public boolean onCreateOptionsMenu(Menu menu) {
   getMenuInflater().inflate(R.menu.menu_main, menu);

   MenuItem menuItem = menu.findItem(R.id.testAction);
   menuItem.setIcon(buildCounterDrawable(count,  R.drawable.ic_menu_gallery));

   return true;
}

Now, build method for Icon :

private Drawable buildCounterDrawable(int count, int backgroundImageId) {
    LayoutInflater inflater = LayoutInflater.from(this);
    View view = inflater.inflate(R.layout.counter_menuitem_layout, null);
    view.setBackgroundResource(backgroundImageId);

    if (count == 0) {
        View counterTextPanel = view.findViewById(R.id.counterValuePanel);
        counterTextPanel.setVisibility(View.GONE);
    } else {
        TextView textView = (TextView) view.findViewById(R.id.count);
        textView.setText("" + count);
    }

    view.measure(View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED),
            View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED));
    view.layout(0, 0, view.getMeasuredWidth(), view.getMeasuredHeight());

    view.setDrawingCacheEnabled(true);
    view.setDrawingCacheQuality(View.DRAWING_CACHE_QUALITY_HIGH);
    Bitmap bitmap = Bitmap.createBitmap(view.getDrawingCache());
    view.setDrawingCacheEnabled(false);

    return new BitmapDrawable(getResources(), bitmap);
}

You can refer from here

Answer 4

Instead of creating shape and drawable, You can use badge style in TextView itself. Just use custom floating button style as per your theme.

Example-

        <TextView
                android:id="@+id/fabCounter"
                style="@style/Widget.Design.FloatingActionButton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentEnd="true"
                android:layout_centerVertical="true"
                android:layout_marginEnd="10dp"
                android:padding="5dp"
                android:text="-9"
                android:textColor="@android:color/black"
                android:textSize="14sp" />