I have been working to achieve bottom navigation with color change in menu when clicked

Question

Trying to achieve color change in menu when clicked buttom navigation items.

here is my xml code

<com.google.android.material.bottomnavigation.BottomNavigationView
        app:layout_constraintBottom_toBottomOf="parent"
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:elevation="@dimen/_10sdp"
        android:background="@color/white"
        app:menu="@menu/bottom_menu"
        app:itemTextColor="@color/button_navigation"
        app:itemIconTint="@color/button_navigation">
    </com.google.android.material.bottomnavigation.BottomNavigationView>

here is my activity code

viewBinding.navigation.setOnNavigationItemSelectedListener { item ->
        when (item.itemId) {

            R.id.homeBottom->{
                addFragment(HomeFragment(),false)

            }
            R.id.notificationBottom->{

            }
            R.id.messageBottom->{

            }
            R.id.accountBottom -> {
                addFragment(UserProfileFragment(), false)
            }
        }
        false
    }

Any suggestion will be Appreciated .Thank you

facing problem . 1. every time first menu is clicked by default . 2. when i select other icon in buttomNavigation the color of icon doesn't change. — Abhishek khatua, Feb 08 '21 at 07:05

score 0 · Accepted Answer · answered Feb 08 '21 at 07:59

The Problem is here

viewBinding.navigation.setOnNavigationItemSelectedListener { item ->
        when (item.itemId) {
         ...
        }
        false
    }

Use true instead of flase

boolean true to display the item as the selected item and false if the item should not be selected. Consider setting non-selectable items as disabled preemptively to make them appear non-interactive.

Jatin · Answer 2 · 2021-02-08T08:12:56.313

There are two approaches here as per your question:

1.) If you want to set a default 'colorPrimary' when you click on icon then just replace return true instead of flase inside setOnNavigationItemSelectedListener

and remove two lines from XML

app:itemTextColor="@color/button_navigation"
app:itemIconTint="@color/button_navigation"

and

2.) For different color you have to create a selector color file. so create a directory color in res and make a navigation_color.xml file like:

res/color/navigation_color.xml

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

and use this inside to BottomNavigationView

<com.google.android.material.bottomnavigation.BottomNavigationView
        app:layout_constraintBottom_toBottomOf="parent"
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:elevation="@dimen/_10sdp"
        android:background="@color/white"
        app:menu="@menu/bottom_menu"
        app:itemIconTint="@color/navigation_color"
        app:itemTextColor="@color/navigation_color">
    </com.google.android.material.bottomnavigation.BottomNavigationView>

I have been working to achieve bottom navigation with color change in menu when clicked

2 Answers2