【问题标题】:BottomAppBar with BottomNavigationView: Cant change icon and text color带有BottomNavigationView的BottomAppBar:无法更改图标和文本颜色
【发布时间】:2020-07-27 16:18:05
【问题描述】:

我有一个带有嵌套 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 文件中有一些不同的主题样式变体,没有运气...similar to this

  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",但这似乎也不起作用。

这是我的其余代码:

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

gradle 依赖:

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>

【问题讨论】:

    标签: android material-components-android android-bottomappbar android-bottomnavigationview


    【解决方案1】:

    您可以在BottomNavigationView 中使用itemIconTintitemTextColor 属性:

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

    【讨论】:

    • 所以我尝试了这个解决方案,它在 XML 预览中以这些颜色正确显示。但是当模拟器运行时,它会反转回默认的黑色并选择紫色。当我在三星上运行它时也会发生同样的事情。
    • @cpfleck 您使用的是 1.1.0 或更高版本的材料组件吗?贴出你的代码,有一些东西会改变主题。
    • 我已经编辑了我的问题以包含更多我的代码。让我知道您是否还有其他需要看的东西。谢谢!
    • @cpfleck 您正在使用 AppCompat 主题,但材质组件库需要 MaterialComponentsTheme
    • 我的错误非常愚蠢。我现在已经修好了。我正在处理重复的文件,但没有意识到....感谢您的帮助
    【解决方案2】:

    这就是我能够将底部导航图标和文本颜色更改为所需颜色的方法

    内部BottomNavigationView

     app:itemIconTint="@drawable/bottom_navigation_colors"
     app:itemTextColor="@drawable/bottom_navigation_colors"
    

    bottom_navigation_colors:

    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item
            android:state_checked="true"
            android:color="@color/dark_red" />
        <item
            android:state_checked="false"
            android:color="@color/black" />
    </selector>
    

    【讨论】:

    • 使用@color/bottom_navigation_colors 而不是@drawable/bottom_navigation_colors
    • 所以这在 XML 预览中也能正确显示,但在模拟器或手机上运行时会恢复为默认值。
    猜你喜欢
    • 2021-04-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-08-22
    • 1970-01-01
    • 1970-01-01
    • 2021-08-08
    • 1970-01-01
    相关资源
    最近更新 更多