How to display the number of notifications in the toolbar icon in android

Question

I would like to create an icon counter for Android, just like in a cart. I saw how the number of icons in the e-commerce application basket increased. I am showing a flipkart application snapshot .: -

Answer 1

In my decision, when a new notification arrives, the counter will increase (as it is observed in trading applications)

Try this, it works on my MOTO e2.

Make sure API Level> 14

Create a layout, for example:

</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 create a method for the 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 link here

Answer 2

You can do the following:

The custom item in my menu is main.xml

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

Custom drawing form (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> 

The layout for my view is 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 - customizing 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 3

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

Answer 4

Instead of creating shapes and drawing, you can use the icon style in TextView . Just use a custom floating button style to suit 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" />