How to display badge for a menuItem of BottomNavigationView of material library (version 1.1.0-alpha08)?

Question

I just want to add badge for a menuItem of BottomNavigationView in my app. I'm using BottomNavigationView of Material Components library(version 1.1.0-alpha08) since its the latest version released just 7 days ago from now I didn't found any tutorial for the same, Now because there are changes made in this version of BottomNavigationView's showBadge method we cannot use that method.

I've tried calling getBadge and getOrCreateBadge method over instance of BottomNavigationView.

BottomNavigationView bottomNavigationView = findViewById(R.id.bottom_nav);
if (bottomNavigationView.getBadge(3) == null) {
    audioPlayingCountBadge = bottomNavigationView.getOrCreateBadge(3);
    audioPlayingCountBadge.setBackgroundColor(
        getResources().getColor(R.color.colorPrimaryDark)
    );
} else {
    audioPlayingCountBadge = bottomNavigationView.getBadge(3);
}
audioPlayingCountBadge.setVisible(true);

If anyone can provide solution for this problem in detail that would be very grateful to me.

Disciplinary

Answer 1

• First migrate your project to androidX. How to migrate
• Include dependency in your build.gradle:

implementation 'com.google.android.material:material:version' Get Version

• Your Base AppLevel theme should use Material Component Theme like:

Your App Level Theme

  <style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

Activity code:

val menuItemId: Int = btm_nav.menu.getItem(0).itemId //0 menu item index.
badgeDrawable = btm_nav.getOrCreateBadge(menuItemId)
badgeDrawable.isVisible = true
badgeDrawable.number = 10

badgeDrawable.badgeGravity = BadgeDrawable.TOP_END    //badge gravity
//BadgeDrawable.TOP_START
//BadgeDrawable.BOTTOM_END
//BadgeDrawable.BOTTOM_START

badgeDrawable.isVisible = false   //hide badge
badgeDrawable.clearNumber()

XML layout:

 <com.google.android.material.bottomnavigation.BottomNavigationView
      android:id="@+id/btm_nav"
      style="@style/Widget.Design.BottomNavigationView"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      app:menu="@menu/bottom_nav_menu"/>

Holeproof

it worked by changing data type of variable menuItemId to int. Thanks @SumitShukla – Disciplinary

holy crap thank you, I was wondering what happened to showBadge when I upgraded from 1.1.0alpha07 – Cowitch

Answer 2

In 2021, showing dot notification is really simple just need to add 1 line.

bottomNavigationView=findViewById(R.id.YOUR_BOTTOM_NAVIGATION_LAYOUT_ID);

To Show dot over bottom navigation item just use this bottomNavigationView.getOrCreateBadge(R.id.YOUR_NAV_ITEM_ID).setVisible(true);

and To Hide dot over bottom nav item use this line bottomNavigationView.getOrCreateBadge(R.id.YOUR_NAV_ITEM_ID).setVisible(false);

You can also set numbers if you want just go through the latest document to read about it.

Dav

Hi . I am being trying to do the same. But studio is not unable to reference getOrCreateBadge methods. can you help me with this – Erick

Have you initilized bottom navigation because it would give option over it.? – Dav

Yes I did. But unable to find badgeDrawable class also in android studio – Erick

Please add Gradle dependency implementation 'com.google.android.matetial.matetial.1.2.1' – Dav

using 1.4.0 . but still no luck – Erick

then seems everything fine, it may ask to import its class – Dav

unable to find BadgeDrawable class. What things should I consider. I mean what could be the reason – Erick

you should have created menu items for bottom navigation. If you have but still this is the case then I think you should consider raising separate question specific to your issue. – Dav

I am adding menu items at runtime – Erick

raise a proper question how you are doing and what issue you facing – Dav

done here : #68284125 – Erick