How to change the color of the BottomNavigationView Icons when I navigate to a Fragment that isn't in that menu

Question

So, I have a Menu that is inflated to a BottomNavigationView to show the options to navigate in the app. But I also have another Menu inflated in the Toolbar to navigate to another part of the app. This works fine but when I click in the icon in the toolbar, the last selected icon in the bottomNav still has the highlight as if it is selected.

BottomNavigationView

<androidx.coordinatorlayout.widget.CoordinatorLayout
        android:id="@+id/bottomBarContainer"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_gravity="bottom" >

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/fabNewIssue"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:backgroundTint="@color/strong_blue"
            android:contentDescription="@string/add_issue"
            app:srcCompat="@drawable/ic_outline_add_24"
            app:tint="@color/white"
            app:fabCustomSize="60dp"
            app:layout_anchor="@+id/bottomBar"
            app:layout_anchorGravity="top|center"/>

        <com.google.android.material.bottomappbar.BottomAppBar
            android:id="@+id/bottomBar"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_gravity="bottom"
            app:fabAlignmentMode="center"
            app:fabCradleMargin="10dp"
            app:fabCradleRoundedCornerRadius="10dp">

            <com.google.android.material.bottomnavigation.BottomNavigationView
                android:id="@+id/bottomNavigationView"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginEnd="16dp"
                android:background="@android:color/transparent"
                app:menu="@menu/bottom_nav_menu"/>

        </com.google.android.material.bottomappbar.BottomAppBar>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Code of how I manage the clicks

    override fun onCreateOptionsMenu(menu: Menu?): Boolean {
        menuInflater.inflate(R.menu.toolbar_menu, menu)
        return true
    }

    override fun onNavigationItemSelected(item: MenuItem): Boolean {
        when(item.itemId) {
            R.id.home -> {
                changeFragment(HomeFragment(), getString(R.string.tag_home))
            }
            R.id.settings -> {
                changeFragment(SettingsFragment(), getString(R.string.tag_settings))
            }
        }
        return true
    }

    override fun onMenuItemClick(item: MenuItem?): Boolean {
        when(item?.itemId) {
            R.id.app_bar_notification -> {
                changeFragment(NotificationsFragment(), getString(R.string.tag_notifications))
            }
        }
        return true
    }

This is the fragment Home that is shown when I click in the Home Button in the bottom

This is the fragment shown when I click in the bell in the toolbar.

Has you can see, the Home button is still highlighted.

How can I change this behavior programmatically?

Answer 1

You can remove all the last selected icon from the BottomNavigationView using this

findViewById<BottomNavigationView>(R.id. bottomNavigationView).getMenu().setGroupCheckable(0, false, true);

Complete Solution

Replace this:

override fun onMenuItemClick(item: MenuItem?): Boolean {
        when(item?.itemId) {
            R.id.app_bar_notification -> {
                changeFragment(NotificationsFragment(), getString(R.string.tag_notifications))
            }
        }
        return true
    }

With this:

override fun onMenuItemClick(item: MenuItem?): Boolean {
        when(item?.itemId) {
            R.id.app_bar_notification -> {
                changeFragment(NotificationsFragment(), getString(R.string.tag_notifications))
                findViewById<BottomNavigationView>(R.id. bottomNavigationView).getMenu().setGroupCheckable(0, false, true);
            }
        }
        return true
    }