How to change the color of BottomNavigationView badge background?

Question

I have implemented BottomNavigationView with badge count based on this example https://stackoverflow.com/a/56340643/6699103

it works fine but I wanted to change the background color for badge Is there any way to do that?

Answer 1

Just use the method setBackgroundColor() of the badge.

  BadgeDrawable badge = bottomNavigationView.getOrCreateBadge(menuItemId);
  badge.setNumber(..);
  badge.setBackgroundColor(....);

If you want to change globally in your app the style you can define the badgeStyle attr in your app theme:

<style name="AppTheme" parent="Theme.MaterialComponents.*">
  <item name="badgeStyle">@style/CustomBadge</item>
  ...
</style>

<style name="CustomBadge" parent="@style/Widget.MaterialComponents.Badge">
   <item name="backgroundColor">@color/.....</item>
</style>

Answer 2

This is the solution which I found and it is working as expected

val profileBadge = bottomNavigationView.getOrCreateBadge(R.id.profile)

 profileBadge.number = profileCount

 profileBadge.backgroundColor = ContextCompat.getColor(this@HomeActivity, R.color.green) 

Answer 3

create drawable selector in res/drawable for colors you wants depending on navigation item state. for example bottom_navigation_colors.xml :

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_checked="true"
        android:color="@color/white" />
    <item
        android:state_checked="false"
        android:color="@color/blue" />
</selector>

and then you can create a style style for your BottomNavigationView

<style name="myBottomNavigationStyle">
    <item name="android:background">#rrggbb</item>
    <item name="itemIconTint">@drawable/bottom_navigation_colors</item>
    <item name="itemTextColor">@drawable/bottom_navigation_colors</item>
</style>

and assign it to BottomNavigationView

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/ebottom_navigation_view"
    style="@style/myBottomNavigationStyle"
    .... />