How to display badge on items of bottomNavigationView android?

Question

I saw this question - Display badge on top of bottom navigation bar's icon and decided to add my own custom badges to my bottomNavigationView. Firstly, I have created special layout of my badge:

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

    <TextView
        android:id="@+id/counter_badge"
        android:layout_width="wrap_content"
        android:layout_height="20dp"
        android:layout_gravity="top|center_horizontal"
        android:layout_marginStart="20dp"
        android:gravity="center"
        android:textSize="12sp"
        android:textStyle="bold"
        android:ellipsize="end"
        android:textAlignment="center"
        android:textColor="@color/white"
        android:padding="3dp"
        android:background="@drawable/badge"/>
</FrameLayout>

then I add some info to badge textView at my activity:

BottomNavigationMenuView menuView = (BottomNavigationMenuView) bottomNavigationView.getChildAt(0);
BottomNavigationItemView itemView = (BottomNavigationItemView) menuView.getChildAt(0);

notificationBadge = LayoutInflater.from(this).inflate(R.layout.notification_badge, menuView, false);
TextView textView = notificationBadge.findViewById(R.id.counter_badge);

textView.setText("15");

itemView.addView(notificationBadge);

but as I see I can work with only one item of my view, when I tried to change from 0 to 1 item, I received this error:

java.lang.NullPointerException: Attempt to invoke virtual method 'android.view.View android.support.design.internal.BottomNavigationMenuView.getChildAt(int)' on a null object reference

then I tried to use special ids of items, but I receive similar error. Maybe smb know how to add badges to items which I want?

@JohnJoe, when I change this I receive error at the `BottomNavigationItemView itemView = (BottomNavigationItemView) menuView.getChildAt(0);` — Andrew, Mar 25 '19 at 08:56
@HussainAbbas, I looked through all possible libraries, but then I decided to create my own badge — Andrew, Mar 25 '19 at 08:57
@AndrewGoroshko use custom layouts and add it into your menu — HussainAbbas, Mar 25 '19 at 08:58
@HussainAbbas, can you explain more please, because I didn't understand what you meant? — Andrew, Mar 25 '19 at 09:00
@AndrewGoroshko first create your xml layout in which you can add you textview and image the one you are using in bottom nav after that goto your menu file use action layout inside the item and add your layout the one you created there after that access your menu view using menu view acess text view and add some text in it — HussainAbbas, Mar 25 '19 at 09:03
can you check the second answer at my question, maybe it will help me? because I guess that I have completely understand your comment :) — Andrew, Mar 25 '19 at 09:25

John Joe · Accepted Answer · 2019-03-25T09:16:06.673

You should change your code to this

BottomNavigationMenuView menuView = (BottomNavigationMenuView) bottomNavigationView.getChildAt(0);
BottomNavigationItemView itemView = (BottomNavigationItemView) menuView.getChildAt(1);

Edit

To have more items having badge, you need to create another layout and so on

BottomNavigationMenuView menuView = (BottomNavigationMenuView) bottomNavigationView.getChildAt(0);
BottomNavigationItemView itemView = (BottomNavigationItemView) menuView.getChildAt(0);

notificationBadge = LayoutInflater.from(this).inflate(R.layout.notification_badge, menuView, false);
TextView textView = notificationBadge.findViewById(R.id.counter_badge);
textView.setText("15");
itemView.addView(notificationBadge);

BottomNavigationMenuView menuView1 = (BottomNavigationMenuView) bottomNavigationView.getChildAt(0);
BottomNavigationItemView itemView1 = (BottomNavigationItemView) menuView1.getChildAt(1);

notificationBadgeOne = LayoutInflater.from(this).inflate(R.layout.notification_badge_one, menuView1, false);
TextView textView = notificationBadgeOne.findViewById(R.id.counter_badge);
textView.setText("15");
itemView1.addView(notificationBadgeOne);

and how I can add badge to some more items, not only for one single? — Andrew, Mar 25 '19 at 09:02

score 3 · Answer 2 · answered Oct 04 '19 at 10:17

This is now possible without custom views using

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

and newer versions

  bottomNavigationView.getOrCreateBadge(R.id.bottom_navigation_view_item).apply {
  backgroundColor = Color.RED
  badgeTextColor = Color.WHITE
  maxCharacterCount = 3
  number = 0
  isVisible = true
}

score 1 · Answer 3 · answered Mar 25 '19 at 09:15

1

Simply add badge on BottomNavigationView as :

 private lateinit var bottomNavItemView: BottomNavigationItemView
 private var messageBadgeView: View? = null

 val mBottomNavigationMenuView = getChildAt(0) as BottomNavigationMenuView
 val view = mBottomNavigationMenuView.getChildAt(1)
 bottomNavItemView = view as BottomNavigationItemView

 messageBadgeView = LayoutInflater.from(this@Activity)
          .inflate(R.layout.item_message_count_badge,
                        mBottomNavigationMenuView, false)

 messageBadgeView!!.badgeCount.text = "99+"

 //Add badge
 bottomNavItemView.addView(messageBadgeView)

 //Or Remove badge
 bottomNavItemView.removeView(messageBadgeView)

answered Mar 25 '19 at 09:15

Nabin

1,451
3
19
26

I'm using java at my project :( can you add java code? – Andrew Mar 25 '19 at 09:25
OP want to have badge on more items. – John Joe Mar 25 '19 at 09:29
Yes!! you can understand kotlin code if you give some time for basic syntax – Nabin Mar 25 '19 at 09:34
And for more badges need to inflate more badge items for specific BottomNavigationItemView items – Nabin Mar 25 '19 at 09:36

score 1 · Answer 4 · answered Aug 27 '20 at 05:06

Another way for those who couldnt access the getOrCreaeteBadge is to use the method below;

Make sure your theme on your bottom Navigation is set on: Theme.MaterialComponents.Light.DarkActionBar

Then now:

 String messages = getIntent().getStringExtra("messages_count");
 messages = messages.substring(10,11);
 Log.d("MessagesCount", "getIncomingIntent: "+messages);
 navigation.showBadge(R.id.bottom_messages).setNumber(Integer.parseInt(messages));

And you're good to go! Sample output is below

How to display badge on items of bottomNavigationView android?

4 Answers4