Android-更改图标颜色和每个标签底部导航的标题 [英] Android - Change color of icon and title of each tab bottom navigation

问题描述

我正在尝试使底部导航有些棘手。
实际上，我想要这种底部导航：


每个选项卡在使用时都有不同的颜色它被选中。例如，小节在选中时将显示为红色（图标和标题），而配置文件在选中时将显示为绿色...

因此，我尝试对每个项目（在菜单中）使用选择器

但未应用颜色。图标更改成功（选择一个项目时，我尝试放置一个完全不同的图标），但未更改选项卡标题的颜色。

我尝试从底部导航中删除2个属性：

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.

我的底部导航：

<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>

推荐答案

，您可以在BottomNavigationView上这样使用它：

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" />

app：itemIconTint 和 app：itemTextColor >采用ColorStateList而不是简单的颜色。这意味着您可以为这些颜色编写一个选择器，以响应项目的状态更改。

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.

例如，您可以具有 bottom_navigation_colors.xml 包含以下内容的ColorStateList：

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>

使用彩色材料样式

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

也请查看此链接：动手使用材料组件

也可以通过编程方式更改颜色，例如：

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;

或：

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;
            }
        });

这篇关于Android-更改图标颜色和每个标签底部导航的标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！