Display badge on top of bottom navigation bar's icon
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
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>
Edit 2020:
Use
BottomNavigation
from material components instead, it gives support to add badges on items and many other features out of the box:https://github.com/material-components/material-components-android/blob/master/docs/components/BottomNavigation.md
Old Answer:
When using support library Bottom Navigation bar, its quite complex to show a badge/notification on menu items. However there are easy solutions to get it done. Such as https://github.com/aurelhubert/ahbottomnavigation
This library is more advanced version of Bottom Navigation bar. And you can set a badge on menu item simply using this code snippet.
bottomNavigation.setNotification(notification, bottomNavigation.getItemsCount() - 1);
And you'll get following result