Different colors for selected tab in BottomNavigationView in Android Kotlin(Programmatically)

Many times we need to use different colors for the selected tab in BottomNavigationView, displayed in the picture below.

Different colors for selected tab in BottomNavigationView in Android
Different colors for selected tab in BottomNavigationView in Android

Currently you can set only on color for selected tab from xml layout like this, using these 2 properties: app:itemIconTint and app:itemTextColor

<com.google.android.material.bottomnavigation.BottomNavigationView
  android:id="@+id/bnv"
  android:layout_width="0dp"
  android:layout_height="wrap_content"
  android:background="@android:color/white"
  app:itemIconTint="@color/color_bnv1"
  app:itemTextColor="@color/color_bnv1"
  app:labelVisibilityMode="labeled"
  app:layout_constraintBottom_toBottomOf="parent"
  app:layout_constraintEnd_toEndOf="parent"
  app:layout_constraintStart_toStartOf="parent"
  app:menu="@menu/menu_bottom_navigation_view" />

Here you can see we use @color/color_bnv1 for both property which is a color state selector from res/color directory. Here is the implementation for that.

<!-- res/color/color_bnv1.xml -->
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:color="@color/colorTab1" android:state_checked="true" />
  <!-- @color/colorTab1 = #006064 //define this in your res/values/color.xml or change the color directly here -->
  <item android:color="@android:color/darker_gray" android:state_checked="false" />
</selector>

Now for the above code, you see the result like this,

BottomNavigationView in Android
BottomNavigationView in Android

Now we need to apply different app:itemIconTint and app:itemTextColor when each tab is selected. So we apply both of these properties to the BottomNavigationView programmatically at runtime in our activity file in Kotlin.

For that we need use setOnNavigationItemSelectedListener from BottomNavigationView, which will give us the event when any tab is selected by user.

bnv.setOnNavigationItemSelectedListener {
  when (it.itemId) {
    R.id.action_tab1 -> {
      
    }
    R.id.action_tab2 -> {
      
    }
    R.id.action_tab3 -> {
      
    }
  }
  true
}

We will use the same file @color/color_bnv1 here. But here, we need to create 3 such different files for the colors we need. So we will create @color/color_bnv2 and @color/color_bnv3 in res/color, which should looks like this.

<!-- res/color/color_bnv2.xml -->
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:color="@color/colorTab2" android:state_checked="true" />
  <!-- @color/colorTab2 = #BF360C //define this in your res/values/color.xml or change the color directly here -->
  <item android:color="@android:color/darker_gray" android:state_checked="false" />
</selector>
<!-- res/color/color_bnv3.xml -->
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:color="@color/colorTab3" android:state_checked="true" />
  <!-- @color/colorTab3 = #4A148C //define this in your res/values/color.xml or change the color directly here -->
  <item android:color="@android:color/darker_gray" android:state_checked="false" />
</selector>

Now here we will set both properties using its Kotlin syntax which is itemIconTintList and itemTextColor for BottomNavigationView. We use the same @color/color_bnv1, @color/color_bnv2 and @color/color_bnv3 for each of the tab selected.

bnv.setOnNavigationItemSelectedListener {
  when (it.itemId) {
    R.id.action_tab1 -> {
      tv.text = getString(R.string.str_bnv_tab1) //"Tab 1"
      tv.setTextColor(ContextCompat.getColor(this, R.color.colorTab1))
      bnv.itemIconTintList = ContextCompat.getColorStateList(this, R.color.color_bnv1)
      bnv.itemTextColor = ContextCompat.getColorStateList(this, R.color.color_bnv1)
    }
    R.id.action_tab2 -> {
      tv.text = getString(R.string.str_bnv_tab2) //"Tab 2"
      tv.setTextColor(ContextCompat.getColor(this, R.color.colorTab2))
      bnv.itemIconTintList = ContextCompat.getColorStateList(this, R.color.color_bnv2)
      bnv.itemTextColor = ContextCompat.getColorStateList(this, R.color.color_bnv2)
    }
    R.id.action_tab3 -> {
      tv.text = getString(R.string.str_bnv_tab3) //"Tab 3"
      tv.setTextColor(ContextCompat.getColor(this, R.color.colorTab3))
      bnv.itemIconTintList = ContextCompat.getColorStateList(this, R.color.color_bnv3)
      bnv.itemTextColor = ContextCompat.getColorStateList(this, R.color.color_bnv3)
    }
  }
  true
}

When the user opens the app for the first time, you can use the following code that will preselect the desired tab and will execute the listener for that.

bnv.selectedItemId = R.id.action_tab1

You can find the whole code in my github repo: https://github.com/dakshbhatt21/a-computer-engineer