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

Question

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

androidandroid-layoutandroid-studionavigation

33

我无法更改底部导航栏上不活动的颜色。

这是我的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");

有人能帮忙吗？

- Haryanto

6个回答

12

Chrislis的回答是一个不错的起点。但是我喜欢通过样式和主题来解决这个问题。我在这个示例中还使用了新的材料BottomNavigationView。

在颜色文件夹下创建一个新文件，例如：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_width="match_parent"
     android:layout_height="56dp"
     android:layout_gravity="start"
     app:menu="@menu/my_navigation_items" />

- Wirling

我喜欢抽象化主题所提供的功能。 - Azizjon Kholmatov

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_width="match_parent"
    android:layout_height="wrap_content"
    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"

- qki

1

底部导航选择文本和图标颜色 首先是底部导航主页布局活动

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottom_navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:background="@color/colorAccent"
    android:theme="@style/ThemeOverlay.BottomNavView"
    app:itemIconTint="@drawable/icon_color_selector"
    app:itemTextColor="@drawable/selector"
    app:labelVisibilityMode="labeled"
    app:menu="@menu/home_menu">

</com.google.android.material.bottomnavigation.BottomNavigationView>

然后在drawable文件夹中创建选择器文件 item_color_selector.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/bottomBarItemColor" android:state_selected="true" />
<item android:color="@color/colorDivider" android:state_selected="false" />

然后在drawable文件夹中创建文本选中颜色的xml文件 text_color_selector.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/white" android:state_selected="true" />
<item android:color="@color/colorDivider" android:state_selected="false" />

然后在主题 XML 上添加样式。

<style name="ThemeOverlay.BottomNavView" parent="Theme.AppCompat.Light">
    <item name="colorPrimary">@color/colorWhite</item>
    <item name="colorOnSurface">@color/colorDivider</item>
    <item name="android:textColorSecondary">@color/colorDivider</item>
</style>

然后在res目录中创建home menu xml文件

将home_menu.xml添加到menu目录中

<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
    android:id="@+id/nav_live_date"
    android:icon="@drawable/icon_selector"
    android:title="Live Data"
    android:enabled="true"/>
<item
    android:id="@+id/nav_house_details"
    android:icon="@drawable/icon_selector"
    android:title="House Details"
    android:enabled="true"/>
<item
    android:id="@+id/nav_attendance"
    android:icon="@drawable/icon_selector"
    android:title="Attendance"
    android:enabled="true"/>
<item
    android:id="@+id/nav_emp_details"
    android:icon="@drawable/icon_selector"
    android:title="Emp Details"
    android:enabled="true"/>

最后感谢你的支持

- Rahul Rokade

0

<!-- 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 这会导致所有这些颜色问题。

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

- Prat137

-3

尝试下面的代码。希望有所帮助！

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

- imam subekti

7

尝试给你的代码添加一些背景信息，以帮助未来的读者更好地理解其含义。 - Grant Miller

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- chrisli · Accepted Answer

如果您正在使用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>

底部导航栏视图.xml

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottomNavMainMenu"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        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" />