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.

Donny

Sure thing it'd be possible. You can create the badge yourself in the layout xml for your bottom navigation view. Craete a frame layout and put your menu icon below the badge and create your logic to show/hide your badge view. – Ator

You can use BadgeView; Or search in github. – Gallardo

https://mcmap.net/q/196069/-how-to-display-badge-for-a-menuitem-of-bottomnavigationview-of-material-library-version-1-1-0-alpha08 – Selda

this link in OP is 404 – Groome

Answer 1

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>

Centralia

If your app theme does not already inherit from Theme.MaterialComponents, like I was (Theme.AppCompat), prepare for some restyling of the rest of your app. I should have figured this bit out first. BTW, the theme change is required or the badging will crash. #53476615 – Seisin

Expanding on my previous comment, to preserve your styling when migrating over from a Theme.AppCompat.* variant, just use the corresponding Theme.MaterialCompoonents.*.Bridge variant for a direct translation without having to restyle anything. medium.com/over-engineering/… – Seisin

Answer 2

This answer was obsoleted by MDC v1.1.0 in February 2020.

Updated example, copied from the documentation:

final var badge = bottomNavigation.getOrCreateBadge(menuItemId);
badge.isVisible = true;
// An icon only badge will be displayed unless a number is set:
badge.number = 99;

---

---

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

Fugere

It isn't necessary to wrap your TextView in a FrameLayout since BottomNavigationItemView extends FrameLayout – Sandhog

Just use this method to remove the badge. public void removeBadge(BottomNavigationView navigationView, int index) { BottomNavigationMenuView bottomNavigationMenuView = (BottomNavigationMenuView) navigationView.getChildAt(0); View v = bottomNavigationMenuView.getChildAt(index); BottomNavigationItemView itemView = (BottomNavigationItemView) v; itemView.removeViewAt(itemView.getChildCount()-1); } – Houri

@Ankit, Okay I got you, the whole Item is removing because I used itemView.getChildCount()-1 here, instead of that, you can just use hardcoded position, If your bottom navigation has the only icon than just use 1 that is badge position or if your bottom navigation has an icon with the title in this case just use 2. Change the following line in above code, use position 1 or 2 according to your case. itemView.removeViewAt(2); – Houri

@Nilesh Rathore, now after count reduce badge is still displaying, it removes when I comeback again on app after killing, why it is not removing badge icon immediately, while it is adding immediately, I tried to refresh that icon view, but could not get any success? – Assimilable

@Nilesh Rathore, I changed that BottomNavigation android native library to (github.com/ittianyu/BottomNavigationViewEx) and it resolved my issue to update that notification badge UI. – Assimilable

in order to change the count then do the following two lines: TextView notificationCount = badge.findViewById(R.id.notifications_badge); notificationCount.setText(count); before adding the page in the line: itemView.addView(badge); – Ulcer

To add to @HeshamYassin comment, there's no need to actually remove the badge view, instead, you can just set its visibility: notificationCount.setVisibility(View.GONE) – Missile

I think I've found a slightly tidier way of removing the badge from @NileshRathore answer. Instead of itemView.removeViewAt(itemView.getChildCount()-1); I instead used: View badge = itemView.findViewById(R.id.notifications_badge); ((ViewGroup)badge.getParent()).removeView(badge); – Lodmilla

I have got a runtime exception: android.view.InflateException: Binary XML file line #1: <merge /> can be used only with a valid ViewGroup root and attachToRoot=true – Levo

@Adobels, same error, but i worked around by wrapping it under RelativeLayout instead, with full_width, and textview horizontally centered aligned inside it. – Ashby

Answer 3

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

Ginder

For 2020 ans, please look at @Abel's answer below which shows a way to do using stock view from google's material library. For more info: material.io/develop/android/components/bottom-navigation-view – Danieldaniela

google has now, greatly simplified these badges implementation into its material library. – Slake

Answer 4

EDIT 2:
BottomNavigationView now supports showing badge natively, as said in the doc here.

bottomNavigation.getOrCreateBadge(menuItemId)

---

I was facing the same issue and I didn't want to use a library.

So I created a custom layout called layout_news_badge:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/badge_frame_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <TextView
        android:id="@+id/badge_text_view"
        android:layout_width="19dp"
        android:layout_height="19dp"
        android:textSize="11sp"
        android:textColor="@android:color/white"
        android:background="@drawable/news_bottom_nav_bg"
        android:layout_gravity="top"
        android:layout_marginTop="4dp"
        android:layout_marginStart="16dp"
        android:gravity="center"
        android:padding="2dp"
        tools:text="9+" />
</FrameLayout>

TextView background(news_bottom_nav_bg):

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
    <solid android:color="?attr/colorPrimary" />
</shape>

Then I created a BottomMenuHelper with this 2 methods:

public static void showBadge(Context context, BottomNavigationView 
    bottomNavigationView, @IdRes int itemId, String value) {
    removeBadge(bottomNavigationView, itemId);
    BottomNavigationItemView itemView = bottomNavigationView.findViewById(itemId);
    View badge = LayoutInflater.from(context).inflate(R.layout.layout_news_badge, bottomNavigationView, false);
    
    TextView text = badge.findViewById(R.id.badge_text_view);
    text.setText(value);
    itemView.addView(badge);
}

public static void removeBadge(BottomNavigationView bottomNavigationView, @IdRes int itemId) {
    BottomNavigationItemView itemView = bottomNavigationView.findViewById(itemId);
    if (itemView.getChildCount() == 3) {
        itemView.removeViewAt(2);
    }
}

Then when I call it in my Activity:

BottomMenuHelper.showBadge(this, mBottomNavigationView, R.id.action_news, "1");

EDIT 1: Added improvement by suggestion jatin rana

Boer

Answer 5

Update: now material support badge, see more below

material baging

bottom navigation

val badge = bottomNavigation.getOrCreateBadge(menuItemId)
badge.isVisible = true
// An icon only badge will be displayed unless a number is set:
badge.number = 99

Old answer

base on @Tinashe's answer, i'd like badge show as bellow without number:

code:

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener)
        // position = 2
        addBadge(POSITION_HISTORY)
    }

    /**
     * add badge(notification dot) to bottom bar
     * @param position to get badge container
     */
    @SuppressLint("PrivateResource")
    private fun addBadge(position: Int) {
        // get badge container (parent)
        val bottomMenu = navigation.getChildAt(0) as? BottomNavigationMenuView
        val v = bottomMenu?.getChildAt(position) as? BottomNavigationItemView

        // inflate badge from layout
        badge = LayoutInflater.from(this)
                .inflate(R.layout.badge_layout, bottomMenu, false)

        // create badge layout parameter
        val badgeLayout: FrameLayout.LayoutParams = FrameLayout.LayoutParams(badge?.layoutParams).apply {
            gravity = Gravity.CENTER_HORIZONTAL
            topMargin = resources.getDimension(R.dimen.design_bottom_navigation_margin).toInt()

            // <dimen name="bagde_left_margin">8dp</dimen>
            leftMargin = resources.getDimension(R.dimen.bagde_left_margin).toInt()
        }

        // add view to bottom bar with layout parameter
        v?.addView(badge, badgeLayout)
    }

badge_layout.xml (badge_size=12dp)

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="@dimen/badge_size"       
    android:layout_height="@dimen/badge_size"
    android:background="@drawable/new_notification" />

and drawable background new_notification.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <corners android:radius="100dp"/>
    <solid android:color="#F44336"/>
</shape>

Drawing

@SudhirKhanger to remove, create global variable for badge view. and just pass the same in v.removeView(badge) like same way it has added – Epizoon

badge.isVisible = true is not working. badge.setVisible(true); is working one – Sublimity

hi @Sublimity isVisible = true is a kotlin version, it's the same, thank you for your feedback. – Drawing

Answer 6

Badge has now been added as a part of AndroidX BottomNavigationView by BadgeDrawable. See docs

fun setBadge(count: Int) {
    if (count == 0) {
        bottomNavigationView.removeBadge(R.id.ticketsNavigation)
    } else {
        val badge = bottomNavigationView.getOrCreateBadge(R.id.ticketsNavigation) // previously showBadge
        badge.number = count
        badge.backgroundColor = getColor(R.color.badge)
        badge.badgeTextColor = getColor(R.color.blackTextColor)
    }
}

// Menu:
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/ticketsNavigation"
        android:icon="@drawable/vector_drawable_navbar_tickets"
        android:title="@string/tickets_title"/>
    ...
</menu>

Edit:

As noted in the comments it should be possible to just update the badge count without needing to add or remove the badge all the time like this:

fun setBadge(count: Int) {
    bottomNavigationView.getBadge(menuItemId)?.isVisible = count > 0
}

Tatterdemalion

It's in the documentation, but as of October 2019, it's not part of the com.google.android.material:material:1.2.0_beta1 and earlier. – Finespun

@Flummox-don'tbeevilSE Well we are using it in production with 1.1.0-alpha07 - so I think you are wrong her. – Tatterdemalion

@MortenHomgaard, that is interesting, maybe difference between Java and Kotlin? Been playing around with this, but could not do it the way you posted here. – Finespun

showBadge has been changed to getOrCreateBadge. – Tatterdemalion

Just an FYI to future readers. If you wish to simply show/hide the badge you can access it with bottom_navigation_view.getBadge(menuItemId)?.isVisible = NEW_VISIBILITY_STATE No need to constantly to remove/create badges :). – Colorant

Answer 7

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

Mickel

Answer 8

A simple way:

As Material Design updated their library and according to

https://medium.com/over-engineering/hands-on-with-material-components-for-android-bottom-navigation-aae2aa9066be

I was able to update (or create my BottomNavigationView Badge) from inside my recycler adapter (in a fragment) without any external lib.

Initial State:

So, as in adapter i got the Context from my activity i access it and recover the instance of bottom navigation:

navBottomView = ((AppCompatActivity)this.context).findViewById(R.id.nav_view);

check if the badge is null (not created yet), if is, set it to quantity choosed:

  BadgeDrawable badgeDrawable = navBottomView.getBadge(R.id.navigation_carrinho);
  if (badgeDrawable == null)
      navBottomView.getOrCreateBadge(R.id.navigation_carrinho).setNumber(item.getQuantidade());

otherwise get the previous quantity and increase the badge value:

int previousValue = badgeDrawable.getNumber();
badgeDrawable.setNumber(previousValue + item.getQuantidade());

Don't forget the imports:

import com.google.android.material.badge.BadgeDrawable;
import com.google.android.material.bottomnavigation.BottomNavigationView;

Final State:

All in One with add to cart button listener:

btnAddCarrinho.setOnClickListener(v -> {
            navBottomView = ((AppCompatActivity) this.context).findViewById(R.id.nav_view);
            BadgeDrawable badgeDrawable = navBottomView.getBadge(R.id.navigation_carrinho);
            if (badgeDrawable == null) {
                navBottomView.getOrCreateBadge(R.id.navigation_carrinho).setNumber(item.getQuantidade());
            } else {
                int previousValue = badgeDrawable.getNumber();
                badgeDrawable.setNumber(previousValue + item.getQuantidade());
            }
        });

Durno

this is the best answer. but be aware that it's necessary to inherit your parent theme from Theme.MaterialComponents them to use it. – Stanfordstang

Answer 9

Please try this once.

1) Create xml file for badge (ex. notification_badge_view.xml)

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/badge"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_gravity="top|center_horizontal"
        android:layout_marginStart="10dp"
        android:gravity="center"
        android:padding="3dp"
        app:srcCompat="@drawable/notification_badge" />
</FrameLayout>

2) Create drawable file for notification dot shape (ex. badge_circle.xml)

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@color/colorAccent" />
    <stroke
        android:width="2dp"
        android:color="@android:color/white" />
</shape>

3) In your activity onCreate method add the badge view to BottomNavigationView

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_landing);

         addBadgeView();

    }

4) And the addBadgeView method is below

private void addBadgeView() {
        try {
            BottomNavigationMenuView menuView = (BottomNavigationMenuView) bottomNavigationBar.getChildAt(0);
            BottomNavigationItemView itemView = (BottomNavigationItemView) menuView.getChildAt(0); //set this to 0, 1, 2, or 3.. accordingly which menu item of the bottom bar you want to show badge
            notificationBadge = LayoutInflater.from(LandingActivity.this).inflate(R.layout.view_notification_badge, menuView, false);
            itemView.addView(notificationBadge);
            notificationBadge.setVisibility(GONE);// initially badge will be invisible 
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

Note: bottomNavigationBar is your bottom bar view.

5) Refresh badge to show and hide by following method

private void refreshBadgeView() {
        try {
            boolean badgeIsVisible = notificationBadge.getVisibility() != GONE;
            notificationBadge.setVisibility(badgeIsVisible ? GONE : VISIBLE);//makes badge visible and invisible 
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

6) And finely make hide when we clicking on particular bottom bar page by following line.

bottomNavigationBar.setOnNavigationItemSelectedListener(new 
BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) 
              {
                switch (menuItem.getItemId()) {
                    case R.id.bottom_bar_one:
                        //while moving to first fragment
                        notificationBadge.setVisibility(GONE);
                        break;
                    case R.id.bottom_bar_two:
                        //moving to second fragment
                        break;
                    case R.id.bottom_bar_three:
                        //moving to third fragment
                        break;
                }
                return true;
            }
        });

Pandect

Answer 10

Here's a simple way to create & remove badge count with material bottom navigation.

public class BadgeIconHelper {
    
    public static void showNotificationBadge(BottomNavigationView
                                                     bottomNavigationView, @IdRes int itemId, String value) {
        BadgeDrawable badge = bottomNavigationView.getOrCreateBadge(itemId);
        badge.setBackgroundColor(ContextCompat.getColor(bottomNavigationView.getContext(), R.color.color_primary));
        badge.setBadgeTextColor(ContextCompat.getColor(bottomNavigationView.getContext(), R.color.color_white));
        badge.setMaxCharacterCount(3);
        badge.setVerticalOffset(2);
        badge.setVisible(true);
        badge.setNumber(Integer.parseInt(value));
    }
    
    public static void removeNotificationBadge(BottomNavigationView bottomNavigationView, @IdRes int itemId) {
        BadgeDrawable badgeDrawable = bottomNavigationView.getBadge(itemId);
        if (badgeDrawable != null) {
            badgeDrawable.setVisible(false);
            badgeDrawable.clearNumber();
        }
    }
}

Ingrown

Answer 11

@Abel's answer is the best unless you already have a complex set of themes and don't have the time to change them all.

However, if a) you are pressed for time and if you are using the Google Material library BottomNavigationView Bar or b) you want to add your own custom view badge - then the accepted answer won't work with com.google.android.material:material:1.1.0

You will need to code for a different view hierarchy than the accepted answer

  BottomNavigationItemView itemView = (BottomNavigationItemView) ((BottomNavigationMenuView) mBottomNavigation.getChildAt(0)).getChildAt(2);
  View badge = LayoutInflater.from(this).inflate(R.layout.navigation_dot, itemView, false);
  itemView.addView(badge);

if you do want to update your theme and update to

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

then all you need to do instead, is

mBottomNavigation.getOrCreateBadge(R.id.navigation_menu_item_one).setNumber(YOUR_NUMBER);

The remove and number functions are only present in the 1.1.0-alpha09 version (and higher)

Tenotomy

Answer 12

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>

Ruinous

Answer 13

Have a look in at the documentation page: https://material.io/develop/android/components/bottom-navigation-view/

TL;DR: They didn't update the correct methods to use, so they left a small error on the documentation. To add or remove a badge do as follows:

// to remove
bottomNavigationView.removeBadge(R.id.action_settings)

// to add
bottomNavigationView.getOrCreateBadge(R.id.action_settings).apply {
    //if you want to change other attributes, like badge color, add a number, maximum number (a plus sign is added, e.g. 99+)
    number = 100
    maxCharactersCount = 3
    backgroundColor = ContextCompat.getColor(context, R.color.color_red)
}

Basanite

Answer 14

If you want only dot without number, then simply you can create bottom navigation using com.google.android.material.bottomnavigation.BottomNavigationView and in java

BottomNavigationView mBtmView = (BottomNavigationView) findViewById(R.id.bottom_navigatin_view);
mBtmView.setOnNavigationItemSelectedListener(this);
mBtmView.getOrCreateBadge(R.id.chatFragment).setBackgroundColor(getResources().getColor(R.color.Red));

Frenulum

Answer 15

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/();

Uhl

For anyone reading this in 2019, this library is deprecated and hasn't been maintained in 2 years. – Gallegos

You're right, and nowadays we have native BottomNavigationView that is much easier to use. – Uhl

Answer 16

i did some changes answer of @ilbose i did in this way and tested small and big screen sizes

../drawable/badge_circle.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
<solid android:color="@color/solid_red_base" />

and ../layout/notifcation_badge.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/badge_frame_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginTop="11dp"
android:layout_gravity="center_horizontal">

<TextView
    android:id="@+id/badge_text_view"
    android:layout_width="12dp"
    android:layout_height="12dp"
    android:textSize="11sp"
    android:textColor="@android:color/white"
    android:background="@drawable/message_badge"
    android:layout_gravity="top"
    android:layout_centerHorizontal="true"
    android:padding="2dp"/> </RelativeLayout>

and in java code

 public static void showBadge(Context context, BottomNavigationView
        bottomNavigationView, @IdRes int itemId, String value) {
    BottomNavigationItemView itemView = bottomNavigationView.findViewById(itemId);
    View badge = LayoutInflater.from(context).inflate(R.layout.message_notification_badge, bottomNavigationView, false);

    TextView text = badge.findViewById(R.id.badge_text_view);
    text.setText(value);
    itemView.addView(badge);
}

 public static void removeBadge(BottomNavigationView bottomNavigationView, @IdRes int itemId) {
    BottomNavigationItemView itemView = bottomNavigationView.findViewById(itemId);
    if (itemView.getChildCount() == 4) {
        itemView.removeViewAt(4);
    }
}

Balakirev

Answer 17

Firstly create a layout file of your badge, then follow these steps

BottomNavigationMenuView menuView = (BottomNavigationMenuView) navigation.getChildAt(0);
 
BottomNavigationItemView itemView = (BottomNavigationItemView) menuView.getChildAt(2);

View messageBadgeView = LayoutInflater.from(this).inflate(R.layout.message_badge_view, menuView, false);    
TextView textView = messageBadgeView.findViewById(R.id.counter_badge);        
textView.setText("15");

itemView.addView(messageBadgeView);`

Angelitaangell