Display badge on top of bottom navigation bar'

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

As @zxbin answer. you can check BadgeView and try below code

BottomNavigationView navigation = (BottomNavigationView) findViewById(R.id.navigation);
navigation.setOnNavigationItemSelectedListener(this);
navigation.setSelectedItemId(R.id.navigation_store);
BottomNavigationMenuView bottomNavigationMenuView =
        (BottomNavigationMenuView) navigation.getChildAt(0);
View v = bottomNavigationMenuView.getChildAt(4); // number of menu from left
new QBadgeView(this).bindTarget(v).setBadgeNumber(5);

source from my gist

Answer 2

Using support library BottomNavigationView is difficult. An easy solution is using external components. One easy to handle is: https://github.com/roughike/BottomBar Checking its documentation it's as easy as:

BottomBarTab nearby = bottomBar.getTabWithId(R.id.tab_nearby);
nearby.setBadgeCount(5);

// Remove the badge when you're done with it.
nearby.removeBadge/();

Answer 3

You can try this way:

Put a TextView inside the BottomNavigationView for counting (BottomNavigationView is a FrameLayout):

    <android.support.design.widget.BottomNavigationView android:id="@id/bottomMenu" style="@style/bottomMenu">
        <TextView android:id="@id/bottomMenuSelectionsNumber" style="@style/bottomMenuSelectionsNumber"/>
    </android.support.design.widget.BottomNavigationView>

And style them like this:

<style name="bottomMenu">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">@dimen/toolbarHeight</item>
    <item name="android:layout_gravity">center|bottom</item>
    <item name="android:background">@color/colorThird</item>
    <item name="itemBackground">@drawable/tabs_ripple</item>
    <item name="itemIconTint">@drawable/bottom_menu_item_color</item>
    <item name="itemTextColor">@drawable/bottom_menu_item_color</item>
    <item name="menu">@menu/bottom_menu</item>
</style>

<style name="bottomMenuSelectionsNumber">
    <item name="android:text">@string/bottomMenuSelectionsNumber</item>
    <item name="android:textSize">@dimen/appSecondFontSize</item>
    <item name="android:textColor">@color/white</item>
    <item name="android:layout_width">@dimen/bottomMenuSelectionsNumberDim</item>
    <item name="android:layout_height">@dimen/bottomMenuSelectionsNumberDim</item>
    <item name="android:layout_gravity">right|bottom</item>
    <item name="android:layout_marginRight">@dimen/bottomMenuSelectionsNumberMarginR</item>
    <item name="android:layout_marginBottom">@dimen/bottomMenuSelectionsNumberMarginB</item>
    <item name="android:gravity">center</item>
    <item name="android:includeFontPadding">false</item>
    <item name="android:background">@drawable/bottom_menu_selections_number_bg</item>
</style>

And bottom_menu_selections_number_bg:

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
    <solid android:color="@color/colorAccent"/>
    <corners android:radius="@dimen/cornerRadius"/>
</shape>

Answer 4

Using the same idea as @Tinashe, here is the essential part for implementing in Xamarin.Android.

    _bottomNavigation = FindViewById<BottomNavigationView>(Resource.Id.tabsRootBottomNavigation);
    var notificationsTab = _bottomNavigation.FindViewById<BottomNavigationItemView>(Resource.Id.tab_notifications);
    _notificationBadgeView = LayoutInflater.From(this).Inflate(Resource.Layout.component_tabbar_badge, null, false);
    _notificationBadgeTextView = _notificationBadgeView.FindViewById<TextView>(Resource.Id.notificationsBadgeTextView);
    notificationsTab.AddView(_notificationBadgeView);

For a full explanation visit: Android BottomNavigationView with Badge

Answer 5

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

Answer 6

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, bottomNavigationMenuView, false);

itemView.addView(badge);

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