Search code examples
androidbottomnavigationview

How to display badge on items of bottomNavigationView android?


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?


Solution

  • 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);