首页 > 解决方案 > 带有BottomNavigationView的BottomAppBar:无法更改图标和文本颜色

问题描述

我有一个带有嵌套 BottomNaviagtionView 的 BottomAppBar,看起来像这样。选择所选图标时,我似乎无法覆盖默认的紫色。 在此处输入图像描述

这是我的代码:

<?xml version="1.0" encoding="utf-8"?> <androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" xmlns:app="http://schemas.android.com/apk/res-auto">

<com.google.android.material.bottomappbar.BottomAppBar
    android:id="@+id/bottomAppBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    app:contentInsetStart="0dp"
    app:contentInsetStartWithNavigation="0dp"
    android:backgroundTint="@color/colorWhite"
    android:theme="@style/Theme.MaterialComponents.Light">

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="0dp"
        android:layout_marginEnd="0dp"
        android:background="@drawable/bg_transparent"
        app:labelVisibilityMode="labeled"
        app:menu="@menu/bottom_app_bar"
        android:theme="@style/Theme.MaterialComponents.Light"
        app:itemHorizontalTranslationEnabled="false" />
</com.google.android.material.bottomappbar.BottomAppBar>

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:srcCompat="@drawable/redyellow"
    app:layout_anchor="@id/bottomAppBar"
    app:layout_anchorGravity="center"
    android:layout_marginBottom="10dp"
    /> </androidx.coordinatorlayout.widget.CoordinatorLayout>

我尝试过的步骤:

  1. styles.xml 文件中有一些不同的主题样式变体,没有运气......类似于这个

  2. 然后我创建了一个自定义的可绘制文件,如下所示:

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

然后将其应用于app:itemIconTint="@color/..."&app:itemTextColor="@color/nav_item_colors"但这似乎也不起作用。

这是我的其余代码:

样式.xml

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="actionBarSize">70dp</item>
    </style>

    <style name="bottom_nav_overlay">
        <!-- selected item -->
        <item name="colorPrimary">@color/colorSecondary</item>
        <!-- other -->
        <item name="colorOnSurface">@color/colorPrimary</item>
    </style>

</resources>

梯度依赖:

dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation 'androidx.appcompat:appcompat:1.1.0'
    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test.ext:junit:1.1.1'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'

    implementation "androidx.recyclerview:recyclerview:1.1.0"
    // For control over item selection of both touch and mouse driven selection
    implementation "androidx.recyclerview:recyclerview-selection:1.1.0-rc01"
    implementation "androidx.cardview:cardview:1.0.0"
    implementation 'de.hdodenhof:circleimageview:3.1.0'
    implementation 'com.github.bumptech.glide:glide:4.11.0'
    implementation 'com.yarolegovich:discrete-scrollview:1.4.9'
    implementation 'com.google.android.material:material:1.1.0'
    implementation "androidx.coordinatorlayout:coordinatorlayout:1.1.0"

nav_item_colors.xml:

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

标签: androidmaterial-components-androidandroid-bottomappbarandroid-bottomnavigationview

解决方案


您可以在 中使用itemIconTintitemTextColor属性BottomNavigationView

   <com.google.android.material.bottomnavigation.BottomNavigationView
           app:itemIconTint="@color/..."
           app:itemTextColor="@color/..."/>

使用如下选择器:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:alpha="1.0" android:color="@color/..." android:state_checked="true"/>
  <item android:alpha="0.6" android:color="@color/..."/>
</selector>

在此处输入图像描述

否则,您可以使用以下方法覆盖颜色:

   <com.google.android.material.bottomnavigation.BottomNavigationView
       android:theme="@style/bottom_nav_overlay"/>

和:

<style name="bottom_nav_overlay">
    <!-- selected item -->
    <item name="colorPrimary">@color/...</item>
    <!-- other -->
    <item name="colorOnSurface">@color/...</item>
</style>

在此处输入图像描述 在此处输入图像描述


推荐阅读