底部导航视图中选定的选项卡颜色

Question

我正在添加一个BottomNavigationView项目,我希望为所选选项卡添加不同的文本(和图标色调)颜色(以实现灰色非选定选项卡效果).android:state_selected="true"在颜色选择器资源文件中使用不同的颜色似乎不起作用.我还尝试使用android:state_focused="true"或使用其他项目条目android:state_enabled="true",但不幸的是没有效果.还尝试将state_selected属性设置为false(显式)为默认(未选中)颜色,没有运气.

以下是我将视图添加到布局的方法:

<android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:itemBackground="@color/silver"
        app:itemIconTint="@color/bnv_tab_item_foreground"
        app:itemTextColor="@color/bnv_tab_item_foreground"
        app:menu="@menu/bottom_nav_bar_menu" />

这是我的颜色选择器(bnv_tab_item_foreground.xml):

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@android:color/darker_gray"  />
    <item android:state_selected="true" android:color="@android:color/holo_blue_dark" />
</selector>

我的菜单资源(bottom_nav_bar_menu.xml):

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/action_home"
        android:icon="@drawable/ic_local_taxi_black_24dp"
        android:title="@string/home" />
    <item
        android:id="@+id/action_rides"
        android:icon="@drawable/ic_local_airport_black_24dp"
        android:title="@string/rides"/>
    <item
        android:id="@+id/action_cafes"
        android:icon="@drawable/ic_local_cafe_black_24dp"
        android:title="@string/cafes"/>
    <item
        android:id="@+id/action_hotels"
        android:icon="@drawable/ic_local_hotel_black_24dp"
        android:title="@string/hotels"/>

</menu>

我将不胜感激任何帮助.

Answer 1

在制作a时selector,始终保持默认状态,否则只使用默认状态.您需要将选择器中的项目重新排序为:

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

和国家与所使用BottomNavigationBar的state_checked不是state_selected.

Answer 2

1.在res里面创建名称颜色的文件夹(如drawable)

2.右键单击颜色文件夹.选择 new-> color resource file-> create color.xml文件(bnv_tab_item_foreground) (图1:文件结构)

3.复制并粘贴bnv_tab_item_foreground

<android.support.design.widget.BottomNavigationView
            android:id="@+id/navigation"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="0dp"
            android:layout_marginStart="0dp"
            app:itemBackground="@color/appcolor"//diffrent color
            app:itemIconTint="@color/bnv_tab_item_foreground" //inside folder 2 diff colors
            app:itemTextColor="@color/bnv_tab_item_foreground"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:menu="@menu/navigation" />

bnv_tab_item_foreground:

 <?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/white" />
        <item android:color="@android:color/darker_gray"  />
    </selector>

图1:文件结构:

Answer 3

BottomNavigationView使用colorPrimary从应用于所选选项卡的主题和它使用 android:textColorSecondary的非活动选项卡图标色调。

因此，您可以使用首选的原色创建样式，并将其设置为BottomNavigationViewxml布局文件中的主题。

styles.xml：

 <style name="BottomNavigationTheme" parent="Theme.AppCompat.Light">
        <item name="colorPrimary">@color/active_tab_color</item>
        <item name="android:textColorSecondary">@color/inactive_tab_color</item>
 </style>

your_layout.xml：

<android.support.design.widget.BottomNavigationView
            android:id="@+id/navigation"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?android:attr/windowBackground"
            android:theme="@style/BottomNavigationTheme"
            app:menu="@menu/navigation" />

Answer 4

如果要以编程方式更改图标和文本颜色：

ColorStateList iconColorStates = new ColorStateList(
     new int[][]{
          new int[]{-android.R.attr.state_checked},
          new int[]{android.R.attr.state_checked}
     },
     new int[]{
          Color.parseColor("#123456"),
          Color.parseColor("#654321")
     });

navigation.setItemIconTintList(iconColorStates);
navigation.setItemTextColor(iconColorStates);

Answer 5

我正在使用com.google.android.material.bottomnavigation.BottomNavigationView（与 OP 不同）并且我尝试了上述各种建议的解决方案，但唯一有效的是设置app:itemBackground和app:itemIconTint我的选择器颜色对我有用。

        <com.google.android.material.bottomnavigation.BottomNavigationView
            style="@style/BottomNavigationView"
            android:foreground="?attr/selectableItemBackground"
            android:theme="@style/BottomNavigationView"
            app:itemBackground="@color/tab_color"
            app:itemIconTint="@color/tab_color"
            app:itemTextColor="@color/bottom_navigation_text_color"
            app:labelVisibilityMode="labeled"
            app:menu="@menu/bottom_navigation" />

我的color/tab_color.xml用途android:state_checked

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

我还使用了选定的状态颜色 color/bottom_navigation_text_color.xml

这里不完全相关，但为了完全透明，我的BottomNavigationView风格如下：

    <style name="BottomNavigationView" parent="Widget.Design.BottomNavigationView">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">@dimen/bottom_navigation_height</item>
        <item name="android:layout_gravity">bottom</item>
        <item name="android:textSize">@dimen/bottom_navigation_text_size</item>
    </style>

Answer 6

现在回答为时已晚，但可能对某人有帮助。我犯了一个非常愚蠢的错误，我使用名为bottom_color_nav.xml的选择器文件进行选择和取消选择颜色更改，但它仍然没有反映 BottomNavigationView 中的任何颜色更改。

然后我意识到，我在onNavigationItemSelected方法中返回了false。如果您在此方法中返回 true，它将正常工作。

Answer 7

为了设置 textColor，您可以直接从 xml 设置BottomNavigationView两个样式属性：

• itemTextAppearanceActive
• itemTextAppearanceInactive

在您的 layout.xml 文件中：

<com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bnvMainNavigation"
            style="@style/NavigationView"/>
  

在你的styles.xml 文件中：

    <style name="NavigationView" parent="Widget.MaterialComponents.BottomNavigationView">
      <item name="itemTextAppearanceActive">@style/ActiveText</item>
      <item name="itemTextAppearanceInactive">@style/InactiveText</item>
    </style>
    <style name="ActiveText">
      <item name="android:textColor">@color/colorPrimary</item>
    </style>
    <style name="InactiveText">
      <item name="android:textColor">@color/colorBaseBlack</item>
    </style>