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.

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"/>

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.