CODEWITHSUNDEEP
androidbottombar
Aditya Rana
Aditya Rana

Reputation: 94

How to add a number to Bottom Bar like the image

screen shot

I am currently using a smooth bottom bar library.

Upvotes: -1

Views: 316

Answers (3)

JunaidKhan
JunaidKhan

Reputation: 744

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

Upvotes: 1

Jaydeep chatrola
Jaydeep chatrola

Reputation: 2701

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...

Upvotes: 2

Ashim Ghimire
Ashim Ghimire

Reputation: 145

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

Upvotes: 1

Related Questions