底部导航所选项目背景颜色改变

Question

我想像 Google Play 商店一样更改底部导航中所选项目的背景颜色。我试图解决它，但到目前为止我还没有找到解决方案。

更新

我发现名为

app:itemActiveIndicatorStyle

的属性，它应该更改指示器颜色。但由于某种原因它不起作用。这是该属性应如何工作的图片。

Answer 1

如果您的项目使用

style.xml

文件来主题化项目，请将此代码添加到该文件中。请注意，您的应用程序的主题必须从

MaterialComponents

主题扩展才能使着色正常工作。

<style name="Theme.App" parent="Theme.MaterialComponents.*">
    ...
    <item name="bottomNavigationStyle">@style/Widget.MaterialComponents.BottomNavigationView.Colored</item>
    <item name="colorPrimary">COLOR_FOR_ICONS_AND_SURFACES</item>
    <item name="colorOnPrimary">COLOR_FOR_ON_ICONS_OR_ON_SURFACES</item>
</style>

这将改变整个系统的颜色。如果您只想将其应用于特定组件，则再次在

style.xml

中，必须将颜色属性定义为叠加层。

<style name="Theme.App" parent="Theme.MaterialComponents.*">
    ...
    <item name="bottomNavigationStyle">@style/Widget.App.BottomNavigationView</item>
</style>

<style name="Widget.App.BottomNavigationView" parent="Widget.MaterialComponents.BottomNavigationView.Colored">
    <item name="materialThemeOverlay">@style/ThemeOverlay.App.BottomNavigationView</item>
</style>

<style name="ThemeOverlay.App.BottomNavigationView" parent="">
    <item name="colorPrimary">COLOR_FOR_ICONS_AND_SURFACES</item>
    <item name="colorOnPrimary">COLOR_FOR_ON_ICONS_OR_ON_SURFACES</item>
</style>

bottomNavigationStyle

中定义的

Theme.App

默认情况下将为所有底部导航视图着色。如果您不希望这样，则可以通过定义其

BottomNavigationView

属性来将样式仅应用于特定的

style

。这将覆盖应用程序主题中定义的默认样式。

<com.google.android.material.bottomnavigation.BottomNavigationView
    ...
    style="@style/Widget.App.BottomNavigationView"
/>

Answer 2

我成功地用下一个样式改变颜色：

<style name="Widget.BottomNavigationView.ActiveIndicator" parent="Widget.Material3.BottomNavigationView.ActiveIndicator">
    <item name="shapeAppearance">
        @style/ShapeAppearance.M3.Comp.NavigationBar.ActiveIndicator.Shape
    </item>
    <item name="android:color">@color/white</item>
</style>

在底部导航视图中：

<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"
    style="@style/Widget.App.BottomNavigationView"
    app:labelVisibilityMode="labeled" />

Answer 3

这样的东西应该有效：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/blue" android:state_checked="true"/>
    <item android:drawable="@color/gray"/>
</selector>

Answer 4

我默认有这个样式：

api "com.google.android.material:material:1.6.1"

及使用风格：

<style name="AppTheme" parent="Theme.Material3.Light.NoActionBar">

Answer 5

尝试以下属性。这对我有用。

        app:itemActiveIndicatorStyle="@android:color/transparent"

Answer 6

试试这个：

<style name="Base.Theme.Challenge" parent="Theme.Material3.DayNight.NoActionBar">
    <item name="colorPrimary">#F7C500</item>
    <item name="colorSecondaryContainer">#FFFFED</item>   <--- This is the color
</style>

欲了解更多信息，请访问此页面