Display badge on top of bottom navigation bar's icon

Question

I have implemented the bottom navigation view in my app and I have looked every where to display badges on top of the icons like this I was wondering whether this is even possible to implement. Any help is appreciated. Thank you.

Answer 1

If you just want to use a stock BottomNavigationView and no third party lib here's how I've done it:

BottomNavigationMenuView bottomNavigationMenuView =             (BottomNavigationMenuView) navigationView.getChildAt(0); View v = bottomNavigationMenuView.getChildAt(3);  BottomNavigationItemView itemView = (BottomNavigationItemView) v;  View badge = LayoutInflater.from(this)             .inflate(R.layout.notification_badge, itemView, true); 

Then here's the layout file:

<merge xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:app="http://schemas.android.com/apk/res-auto"     xmlns:tools="http://schemas.android.com/tools">      <TextView         android:id="@+id/notifications.badge"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_gravity="top|center_horizontal"         android:layout_marginLeft="10dp"         android:layout_marginStart="10dp"         android:background="@drawable/notification_badge"         android:gravity="center"         android:padding="3dp"         android:text="9+"         android:textColor="@color/white"         android:textSize="11sp" /> </merge> 

Then just find TextView by id and set text. @drawable/notification_badge is just a circle shape drawable

Answer 2

Adding badges is natively supported now, using the latest material dependency add this to your build.gradle

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

in your layout add this

<!-- The rest of your layout here ....-->    <com.google.android.material.bottomnavigation.BottomNavigationView             android:id="@+id/bottom_navigation"             android:layout_width="match_parent"             android:layout_height="?attr/actionBarSize"             app:menu="@menu/bottom_nav_menu"             /> 

then you can just

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

R.id.action_add for you would be the id of the menu item you want to put a badge on. Check it from the menu file you feed to the BottomNavigationView.

Make sure your app theme is in Theme.MaterialComponents

you can check it in styles or manifest. for this example mine was this

     <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>         <item name="android:statusBarColor" tools:targetApi="lollipop">@color/colorPrimary</item>     </style>