问题
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>
回答1:
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;
}
});
来源:https://stackoverflow.com/questions/58623043/android-change-color-of-icon-and-title-of-each-tab-bottom-navigation