Show badge count on MenuItem of BottomNavigationView?

Question

As the title, I want to show badge count on MenuItem of BottomNavigationView. I have searched several ways but there is no one worked for me.

Please give me an direction to solve this problem. I will grateful any help.

Answer 1

BottomNavigationView is a FrameLayout. Put a TextView inside the BottomNavigationView for counting:

    <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 2

While using bottom navigation view. its diffcult to include a badge. Bu there are easy ways to do so. You can use this lib: AHBottomNavigation.

Its an advanced version of bottom navigation. Code will go something like below.

bottomNavigation.setNotification(notification,bottomNavigation.getItemsCount() - 1);

Answer 3

Created sample project and shared in GITHub, Hope this helps

https://github.com/chandrahasan/BadgeView-Android/

 badgeIcon = (View) findViewById(R.id.badgeIcon);
 initBadge(this);

 private void initBadge(Context paramContext) {
        this.badgeCount = new BadgeView(paramContext);
        this.badgeCount.setTargetView(this.badgeIcon);
        this.badgeCount.setBadgeCount(count);
        this.badgeCount.setBadgeMargin(9);
 }