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


142

我正在向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>

我将不胜感激任何帮助。

Answers:


309

制作时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>

和国家与所使用BottomNavigationBarstate_checked不是state_selected


77
将其添加到<android.support.design.widget.BottomNavigationView app:itemIconTint =“ @ drawable / nav_item_color_state” app:itemTextColor =“ @ drawable / nav_item_color_state” />
dianakarenms

1
以我为例,我需要生成动态菜单,而该解决方案无法正常工作。唯一可行的解​​决方案是手动设置菜单项stackoverflow.com/a/7106111/2098878
Rafael

9
“ state_checked不是state_selected”。节省时间:)谢谢!
PiotrŚlesarew17年

3
将其添加到<android.support.design.widget.BottomNavigationView app:itemIconTint =“ @ color / nav_item_color_state” app:itemTextColor =“ @ color / nav_item_color_state” />而不是@ drawable
Anton Makov

1
对于像我这样陷入困境的任何人,我都必须在“ res”中创建一个“ color”目录,并将此文件放在其中。
Tayyab Mazhar

66

1.res内部使用名称颜色创建文件夹(如drawable)

2.右键单击颜色文件夹。选择 新建->颜色资源文件->创建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:文件结构:

图1:文件结构


52

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

3
android:textColorSecondary不起作用。应该android:colorForeground改用
Mahdi Moqadasi,

这是最好的答案,“选择器”方法使用“ darker_gray”作为无效的选项卡颜色,这与原始颜色不同。android:textColorSecondary对我也有用。谢谢!
山姆·陈

8

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

ColorStateList iconsColorStates = 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")
            });

    ColorStateList textColorStates = 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(iconsColorStates);
    navigation.setItemTextColor(textColorStates);

5

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

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


2

尝试使用android:state_enabled而不是android:state_selected选择器项属性。


正如问题中提到的,我也尝试过使用state_enabled,但这不是与此特定窗口小部件一起使用的正确状态属性。问题是答案中提到的问题:1.排序错误(默认状态应为选择器中的最后一项)2. state_checked是要与BottomNavigationView一起使用的正确状态属性。
Javad Sadeqzadeh,2013年

1

为了设置textColor,BottomNavigationView有两个样式属性可以直接从xml设置:

  • itemTextAppearanceActive
  • itemTextAppearanceInactive
In your layout.xml file:

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

In your styles.xml file:

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

1

我正在使用com.google.android.material.bottomnavigation.BottomNavigationView(与OP不同),并且尝试了上面建议的各种解决方案,但是唯一有效的方法是设置app:itemBackgroundapp: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>


0

不是创建选择器,而是创建样式的最佳方法。

<style name="AppTheme.BottomBar">
    <item name="colorPrimary">@color/colorAccent</item> 
</style>

并更改文本大小(选中或未选中)。

<dimen name="design_bottom_navigation_text_size" tools:override="true">11sp</dimen>
<dimen name="design_bottom_navigation_active_text_size" tools:override="true">12sp</dimen>

享受Android!

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.