How to add a number to Bottom Bar like the image

Question

screen shot

I am currently using a smooth bottom bar library.

Does your smooth bottom bar library support badge. – Kasım Özdemir Mar 20 '20 at 07:10 — Kasım Özdemir, Mar 20 '20 at 07:10

score 2 · Accepted Answer · answered Mar 20 '20 at 07:07

you want to add badge count in BottomNavigationView menu?

then use MaterialComponents library

implementation 'com.google.android.material:material:1.2.0-alpha03'

use materialcomponent theme style.xml

<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>
</style>

in your layout file

<com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottom_nav"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:menu="@menu/bottom_nav_menu"/>

add badge count like

val bottonnavBar = findViewById<BottomNavigationView>(R.id.bottom_nav)
var badge = bottonnavBar.getOrCreateBadge(R.id.action_add) //R.id.action_add is menu id
badge.number = 2 // it will show count on icon

hope it helpss...

if it works mark it as accepted... – Jaydeep chatrola Mar 20 '20 at 11:33 — Jaydeep chatrola, Mar 20 '20 at 11:33

score 1 · Answer 2 · answered Mar 20 '20 at 06:52

1

you can use material design guide to do it from here. also, don't forget to add material design library for android guide here.

answered Mar 20 '20 at 06:52

Ashim Ghimire

125
1
10

score 1 · Answer 3 · edited Jun 20 '20 at 09:12

If you are using BottomNavigationView then this is easy like a piece of cake. BottomNavigationView provides BadgeDrawable API which you can use to display dynamic information such as a number of pending requests.

According to google doc

By default, BadgeDrawable is aligned to the top and end edges of its anchor view (with some offsets). Call #setBadgeGravity(int) to change it to one of the other supported modes.

Note: This is still under development and may not support the full range of customization Material Android components generally support (e.g. themed attributes).

You can check BadgeDrawable API docs in details here https://developer.android.com/reference/com/google/android/material/badge/BadgeDrawable

How to add a number to Bottom Bar like the image

3 Answers3