Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set notification count for Android BottomNavigationView?

Tags:

android

I am using

<android.support.design.widget.BottomNavigationView/> 

to set BottomNavigationView in my android app. My question is How to set notification count for Android BottomNavigationView? please help me to come out from this..!

like image 556
user3068659 Avatar asked Jan 27 '17 14:01

user3068659


4 Answers

It's simple. You just write this:

bottomNav.getOrCreateBadge(R.id.navigation_announcement).number = 5

Happy coding!

like image 187
Na Pro Avatar answered Nov 17 '22 10:11

Na Pro


Create a layout with one Textview like below.

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

    <TextView
        android:id="@+id/notification_badge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center_horizontal"
        android:layout_marginBottom="30dp"
        android:layout_marginLeft="20dp"
        android:layout_marginStart="20dp"
        android:background="@drawable/circlebackground" // Circle background view
        android:padding="3dp"
        android:textColor="@color/black"
        android:textSize="10sp"
        tools:text="9+" />

</FrameLayout>

After initializing the BottomNavgationView, you have to inflate the layout and select the index of View item and set the count.

    BottomNavigationView bottomNavigationView = (BottomNavigationView) findViewById(R.id.bottom_navigation);
    BottomNavigationMenuView bottomNavigationMenuView =
            (BottomNavigationMenuView) bottomNavigationView.getChildAt(0);
    View v = bottomNavigationMenuView.getChildAt(1);
    BottomNavigationItemView itemView = (BottomNavigationItemView) v;

    View badge = LayoutInflater.from(this)
            .inflate(R.layout.homescreen_count, bottomNavigationMenuView, false);
    TextView tv = badge.findViewById(R.id.notification_badge);
    tv.setText("22+");
    itemView.addView(badge);
like image 42
Abish R Avatar answered Nov 17 '22 09:11

Abish R


First you need to add app:actionLayout in menu file's item where you want to show badge of your BottomNavigationView like this

<item
    android:id="@+id/navigation_chat"
    app:actionLayout="@layout/unread_message_layout"
    android:icon="@drawable/selector_bottom_navigation_chat"
    android:title=""
    app:showAsAction="always" />

where unread_message_layout is the layout which has badge something like below

enter image description here

Here is the XML of that layout

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/tvUnreadChats"
        android:layout_width="@dimen/_15sdp"
        android:layout_height="@dimen/_15sdp"
        android:layout_gravity="top|center_horizontal"
        android:layout_marginLeft="@dimen/_5sdp"
        android:background="@drawable/red_circle"
        android:gravity="center"
        android:textColor="@android:color/white"
        android:textSize="@dimen/_7sdp"
        android:visibility="visible"
        tools:text="5" />
</FrameLayout>

and in your activity where BottomNavigationView is available, add this to show badges

var mbottomNavigationMenuView = binding.bottomNavigationView.getChildAt(0) as BottomNavigationMenuView
var chatBadge = LayoutInflater.from(this).inflate(R.layout.unread_message_layout,
                mbottomNavigationMenuView, false)
var itemView = mbottomNavigationMenuView.getChildAt(2) as BottomNavigationItemView

val tvUnreadChats = chatBadge.findViewById(R.id.tvUnreadChats) as TextView
tvUnreadChats.text = "1"//String that you want to show in badge
itemView.addView(chatBadge)

Here getChildAt(2) is third item in my BottomNavigationView

like image 4
Kishan Solanki Avatar answered Nov 17 '22 11:11

Kishan Solanki


Just made your custom own bottom bar from horizontal recyclerview, and the class as view and you can have everything at the bottom bar. dont forget Spacing decorator & menu parser if needed. Can sent you my solution if You want.

like image 1
Milan Jurkulak Avatar answered Nov 17 '22 09:11

Milan Jurkulak