Removal of Badge from BottomNavigationView when using navigation component

Question

I am using the material design BottomNavigationView component and the fragment transition using Navigation Components.

The issue which I am facing currently is that I cannot able to remove/hide the badges. When we using navigationComponent i cant use setOnNavigationItemSelectedListener instead we use setupWithNavController so when I tap on the itemId how can I know on which fragment/itemId I am currently on and remove the badge for that particular itemId

Answer 1

Using a custom NavigationItemSelectedListener you are removing the original listener. However you can trigger the default behavior using NavigationUI.onNavDestinationSelected(it, navController).

bottomNavigationView.setOnNavigationItemSelectedListener {
            when (it.itemId) {
                R.id.nav_xxxx -> {
                    // handle click
                    // .....
                }
            }
            NavigationUI.onNavDestinationSelected(it, navController)
            true
        }

Answer 2

Create a selector XML to change the icon of the selected menu item. Let's say it's called bottom_item_selector:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/unchecked_item_drawable" android:state_checked="false"/>
    <item android:drawable="@drawable/checked_item_drawable" android:state_checked="true"/>
</selector>

Then in your menu XML change the icon to use this drawable:

    <item
        android:id="@+id/.."
        android:icon="@drawable/bottom_item_selector"
        android:checkable="true"
        android:title=""/>

This way you don't have to add a listener and call NavigationUI explicitly.