How to add notification badge on Bottom Navigation View?

Question

<item
        android:id="@+id/nav_gallery"
        app:actionViewClass="android.widget.TextView"/>

This is the menu of bottom Navigation.

   TextView gallery=(TextView)  
   MenuItemCompat.getActionView(navigationView.getMenu().
   findItem(R.id.nav_gallery)); //getting menu item of bottom nav view
   gallery.setText("99+");

But this code doesnot work for bottom navigation view.BottomNavigationView is shown without setting any notification counter.

Possible duplicate of [Display badge on top of bottom navigation bar's icon](https://stackoverflow.com/questions/42682855/display-badge-on-top-of-bottom-navigation-bars-icon) — skylerb, Jul 03 '18 at 17:28

Atif Amin · Answer 1 · 2020-02-17T11:42:18.703

4

The Latest Material dependency now supports natively add badge count, Need to just updated Material dependency in build.gradle

implementation 'com.google.android.material:material:1.1.0-alpha09'

and just add

val navBar  = findViewById<BottomNavigationView>(R.id.bottom_navigation)
navBar.getOrCreateBadge(R.id.action_stamp).number = 2

and in style.xml just change "AppCompat" to "MaterialComponents"

<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">

edited Feb 17 '20 at 11:42

answered Feb 17 '20 at 11:33

Atif Amin

490
2
6
17

I think in the end, you must set `isVisible = true` – Kaaveh Mohamedi Dec 02 '20 at 13:12
In case, if your count exceeds a certain limit and you want to show truncated version of count, you can use `setMaxCharacterCount(int maxCharacterCount)` – iCantC Feb 08 '22 at 09:12

score 1 · Answer 2 · answered Apr 19 '22 at 12:56

Firstly create a layout file of your badge, then follow these steps

BottomNavigationMenuView menuView = (BottomNavigationMenuView) navigation.getChildAt(0);
 
BottomNavigationItemView itemView = (BottomNavigationItemView) menuView.getChildAt(2);

View messageBadgeView = LayoutInflater.from(this).inflate(R.layout.message_badge_view, menuView, false);    
TextView textView = messageBadgeView.findViewById(R.id.counter_badge);        
textView.setText("15");

itemView.addView(messageBadgeView);`

score -1 · Answer 3 · answered Aug 27 '20 at 05:00

-1

Another way for those who couldnt access the getOrCreaeteBadge is to use the method below;

Make sure your theme on your bottom Navigation is set on: Theme.MaterialComponents.Light.DarkActionBar

Then now:

 String messages = getIntent().getStringExtra("messages_count");
 messages = messages.substring(10,11);
 Log.d("MessagesCount", "getIncomingIntent: "+messages);
 navigation.showBadge(R.id.bottom_messages).setNumber(Integer.parseInt(messages));

And you're good to go! Sample output is below

answered Aug 27 '20 at 05:00

Daniel Kabu Asare

244
3
13

1

there is no such method as `showBadge` in `com.google.android.material.bottomnavigation.BottomNavigationView` – user25 Nov 19 '20 at 16:50
make sure you import the dependency `com.google.android.material:material:1.1.0-alpha06` – Daniel Kabu Asare Nov 20 '20 at 11:24
The material dependency makes no difference. ShowBadge is a custom method. – MGLabs Jul 06 '21 at 09:10

How to add notification badge on Bottom Navigation View?

3 Answers3