如何更改底部导航上的非活动颜色？

Posted 2023-04-13

【中文标题】如何更改底部导航上的非活动颜色？

【英文标题】：How to change inactive color on bottom navigation?

【发布时间】：2016-12-12 11:27:16

【问题描述】：

我无法更改底部导航的非活动颜色

这是我的 xml

<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
    android:id="@+id/home_item"
    android:icon="@drawable/ic_home"
    android:color="#FFFFFF"
    android:tint="#FFFFFF"
    android:backgroundTint="#FFFFFF"
    android:title="Home"
    />
<item
    android:id="@+id/setting_item"
    android:icon="@drawable/ic_setting"
    android:color="#FFFFFF"
    android:tint="#FFFFFF"
    android:backgroundTint="#FFFFFF"
    android:title="Setting"
    />

这是我的 java

bottomBar.getBar().setBackgroundColor(getResources().getColor(R.color.bottom_tabs));
bottomBar.setActiveTabColor("#FFFFFE");

有人可以帮忙吗？

【参考方案1】：

如果您使用的是 BottomNavigationView，则解决方案可能很简单。 你只需要创建一个选择器为ColorStateList，然后将选择器分配给BottomNavigationView的“itemIconTint”属性。

例如：

在drawable中创建文件

bottom_nav_icon_color_selector.xml

<?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/white" />
    <item android:state_pressed="true" android:state_enabled="true" android:color="@android:color/white" />
    <item android:color="@color/InactiveBottomNavIconColor" />
</selector>

BotttomNavigationview.xml

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottomNavMainMenu"
        android:layout_
        android:layout_
        android:layout_alignParentBottom="true"
        app:itemBackground="@color/BottomNavBarColor"
        app:itemIconTint="@drawable/bottom_nav_icon_color_selector"
        app:itemTextColor="@drawable/bottom_nav_icon_color_selector"
        app:menu="@menu/bottom_navigation_menu" />

【讨论】：

@color/bottom_nav_icon_color_selector 不正确。这个文件是可绘制的！

@BoshRa 把它放在res/color 而不是res/drawable 然后你就可以用@color/bottom_nav_icon_color_selector 引用它

应该被接受为答案。我花了几个小时试图让这个工作，这个解决方案是第一个对我有用的 xml 解决方案。

这不起作用，我看不到非活动状态

【参考方案2】：

Chrislis answer 是一个好的开始。但是我喜欢通过样式和主题来解决这个问题。在这个例子中，我还使用了新材料BottomNavigationView。

在color文件夹下新建一个文件，例如：bottom_nav_item_color.xml

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

将此行添加到位于themes.xml 的基本主题中

<item name="bottomNavigationStyle">@style/BottomNavigationViewStyle</item>

将此代码添加到styles.xml

<style name="BottomNavigationViewStyle" parent="Widget.MaterialComponents.BottomNavigationView.Colored">
    <item name="android:background">@color/my_background_color</item>
    <item name="itemTextColor">@color/bottom_nav_item_color</item>
    <item name="itemIconTint">@color/bottom_nav_item_color</item>
</style>

现在 BottomNavigationView 的样式应该正确

示例布局文件

<com.google.android.material.bottomnavigation.BottomNavigationView
     xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schema.android.com/apk/res/res-auto"
     android:id="@+id/navigation"
     android:layout_
     android:layout_
     android:layout_gravity="start"
     app:menu="@menu/my_navigation_items" />

【讨论】：

我喜欢抽象主题提供的服务。

【参考方案3】：

我略微编辑了@Wirling 答案以匹配 Android Studio 4.2 Canary 16。

您只需在颜色文件夹下定义您的活动/非活动颜色，例如bottom_nav_item.color.xml

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

然后，在您的 BottomNavigationView 中，只需使用之前创建的选择器，如下所示

    <?xml version="1.0" encoding="utf-8"?>        
    <com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottom_navigation"
    android:layout_
    android:layout_
    android:background="@color/colorPrimary"
    app:itemIconTint="@color/bottom_nav_item_color"
    app:itemTextColor="@color/bottom_nav_item_color"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent"
    app:menu="@menu/bottom_nav_menu" />

所以它超级简单。您必须在新的 .xml 文件中创建选择器，然后将其用于您的 BottomNavigationView

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

【参考方案4】：

<!-- Base application theme. -->
<style name="Theme.RunnerApp" 

parent="Theme.MaterialComponents.DayNight.NoActionBar">
    
<!-- Primary brand color. -->

<item name="colorPrimary">@color/purple_500</item>
<item name="colorPrimaryVariant">@color/purple_700</item>
<item name="colorOnPrimary">@color/white</item  
<!-- Secondary brand color. -->
<item name="colorSecondary">@color/teal_200</item> 
<item name="colorSecondaryVariant">@color/teal_700</item> 
<item name="colorOnSecondary">@color/white</item>

<!-- Status bar color. --> 
<item name="android:statusBarColor" tools:targetApi="l">? 
attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
</style>

在大多数情况下...开发人员将主题更改为 NoActionBar 但不是 Theme.MaterialComponents.DayNight.NoActionBar 他们把它改成 Theme.AppCompat.DayNight.NoActionBar 这会导致所有这些颜色问题

导航组件使用材料设计，所以请记住这一点

【参考方案5】：

试试下面的代码。希望对你有帮助！！！

mBottomBar = BottomBar.attach(this, savedInstanceState);
        mBottomBar.setItems(R.menu.bottombar_menu);
        mBottomBar.getBar().setBackgroundResource(R.color.navigationColor);
        mBottomBar.setOnMenuTabClickListener(new OnMenuTabClickListener() 

【讨论】：

尝试在您的代码中添加一些上下文，以帮助未来的读者更好地理解其含义。