Android - 更改每个选项卡底部导航的图标和标题的颜色

Question

I'm trying to make a bottom navigation a bit tricky. Indeed I want this kind of bottom navigation: Each tab has a different color when it is selected. For example measure will be in red when selected (icon and title) and profile will be green when selected...
So I tried to use a selector per item (in my menu)
But the color is not applied. The icon change successfully (I tried to put a completely different icon when an item is selected) but not the color of the title of the tab.
I tried to remove 2 properties from my bottom navigation:

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

But it's getting worse because the color of my theme app (primary) is applied when a tab is selected.

My bottom nav:

<com.google.android.material.bottomnavigation.BottomNavigationView
                android:id="@+id/bottom_navigation"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/white"
                app:menu="@menu/main_bottom_navigation"
                style="@style/BottomNavigationView"
                app:labelVisibilityMode="labeled"
                android:layout_alignParentBottom="true" />

One of my selector (logic applied to all items):

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Pressed state -->
    <item android:drawable="@drawable/bottom_bar_journal_on"
            android:color="@color/red_FF623E"
            android:state_checked="true"/>
    <!-- Default state -->
    <item android:drawable="@drawable/bottom_bar_journal_off"
            android:color="@color/background_yellow"
            android:state_checkable="false"/>

</selector>

And my menu (where I apply all of my selector):

<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
            android:id="@+id/action_journal"
            android:enabled="true"
            android:icon="@drawable/bottom_bar_journal"
            android:title="@string/main_menu_journal"
            app:showAsAction="withText" />

    <item
            android:id="@+id/action_measure"
            android:enabled="true"
            android:icon="@drawable/bottom_bar_measure_off"
            android:title="@string/main_menu_measure"
            app:showAsAction="withText" />

    <item
            android:id="@+id/action_add"
            android:enabled="false"
            android:title=""
            app:showAsAction="withText" />

    <item
            android:id="@+id/action_treatment"
            android:enabled="true"
            android:icon="@drawable/bottom_bar_treatment_off"
            android:title="@string/main_menu_treatment" />

    <item
            android:id="@+id/action_profile"
            android:enabled="true"
            android:icon="@drawable/bottom_bar_profile"
            android:title="@string/main_menu_profile"
            app:showAsAction="withText" />
</menu>

Answer 1

Bottom navigation bar overrides icon colors via app:itemIconTint, but removing that attribute from the XML just makes the nav bar use the app's default colors instead. To prevent the bar from applying color changes, and let your selectors work as intended, you have to set the icon tint list to null in code, like this:

bottom_navigation_bar.itemIconTintList = null

EDIT: I see you want to color the text as well, that's a bit trickier. Only solution I can come up with is to forget about drawable selectors, and just replace the item's icon tint list and text color every time the bottom nav bar selection changes. In your navbar-hosting activity, define these two:

private val bottomNavBarStateList = arrayOf(
    intArrayOf(android.R.attr.state_checked),
    intArrayOf(-android.R.attr.state_checked)
)

private fun updateBottomNavBarColor(currentSelectedColor: Int) {
    val colorList = intArrayOf(
        ContextCompat.getColor(this, currentSelectedColor),
        ContextCompat.getColor(this, R.color.text_tertiary)
    )
    val colorStateList = ColorStateList(bottomNavBarStateList, colorList)
    bottom_navigation_bar.itemIconTintList = colorStateList
    bottom_navigation_bar.itemTextColor = colorStateList
}

Then in your navbar's ItemSelectedListener, call updateBottomNavBarColor with the color you want:

bottom_navigation_bar.setOnNavigationItemSelectedListener {
    when(it.itemId) {
        R.id.bottom_nav_action_treatment -> {
            updateBottomNavBarColor(R.color.treatment)
        }
        R.id.bottom_nav_action_profile -> {
            updateBottomNavBarColor(R.color.profile)
        }
        else -> {

        }
    }
}

Answer 2

And you would use it like this on your BottomNavigationView:

<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white"
app:itemIconTint="@drawable/bottom_navigation_colors"
app:itemTextColor="@drawable/bottom_navigation_colors"
app:menu="@menu/bottom_navigation_menu" />

The app:itemIconTint and app:itemTextColor take a ColorStateList instead of a simple color. This means that you can write a selector for these colors that responds to the items' state changes.

For example, you could have a bottom_navigation_colors.xml ColorStateList that contains:

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

used Colored Material Style

style="@style/Widget.MaterialComponents.BottomNavigationView.Colored"

Also Check out this Link: Hands-on with Material Components

Also change colour by programmatically like this:

getMenuInflater().inflate(R.menu.menu_home, menu);
        Drawable drawable = menu.findItem(R.id.action_clear).getIcon();

        drawable = DrawableCompat.wrap(drawable);
        DrawableCompat.setTint(drawable, ContextCompat.getColor(this,R.color.textColorPrimary));
        menu.findItem(R.id.action_clear).setIcon(drawable);
        return true;

Or:

bottomNavigationView.setOnNavigationItemSelectedListener(
        new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.action_favorites:
                        //need change color of favotites here.
                    case R.id.action_schedules:

                    case R.id.action_music:

                }
                return true;
            }
        });