使用 Material Design，如何将不同的背景颜色应用于底部导航选项卡的选定项目？

Question

我希望实现像图片中那样选定项的背景颜色。

但不幸的是，每个人都试图使用一些第三方库来回答这个问题。

我希望使用 Material Design 组件本身来实现这个。

这是我的代码：

<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/id_navigation_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_gravity="bottom|start"
        app:itemBackground="@android:color/white"
        app:itemIconTint="@drawable/bottom_navigation_style"
        app:itemTextColor="@drawable/bottom_navigation_style"
        app:menu="@menu/bottom_navigation_menu_items" />

style.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:color="@color/colorPrimary" android:state_selected="true" />
    <item android:color="@android:color/darker_gray" android:state_selected="false" />

</selector>

请在回答中告诉我是否只能使用Material Design组件来实现，谢谢。

提前致谢。

- shiv

Answer 1

请试一下这个，在底部导航视图中添加一个属性

<?xml version="1.0" encoding="utf-8"?>
 <LinearLayout
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:gravity="bottom"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/id_navigation_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="@drawable/drwable_value_selected"
        app:itemBackground="@drawable/drwable_value_selected"
        app:menu="@menu/menu" />
     </LinearLayout>

app:itemBackground

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

检查您的菜单项

    <item
     android:id="@+id/action_message"
        android:enabled="true"
        android:checkable="true"
        android:title="search"
        app:showAsAction="ifRoom" />

在选择和取消选择背景颜色时，必须设置 checkable 属性为 true。

- Avinash

---

对我没起作用。请自行检查，如果对您有用，请将其发布为答案。 - shiv

Answer 2

好的，我发现一个有趣的事情是你不能在同一个文件上设置背景颜色和文本/图标颜色样式。

因此，您需要两个文件：

bottom_navigation_style.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:color="@color/colorPrimary" android:state_selected="true" />
    <item android:color="@android:color/darker_gray" android:state_selected="false" />

</selector>

bottom_navigation_style_background.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@color/colorPrimaryDark" android:state_checked="true" />
    <item android:drawable="@android:color/white" android:state_checked="false" />

</selector>

那么在活动XML中，您需要像这样将itemBackground添加到其中。

 app:itemBackground="@drawable/bottom_navigation_style_background"
 app:itemIconTint="@drawable/bottom_navigation_style"
 app:itemTextColor="@drawable/bottom_navigation_style"

它一定会有效。

- Vikas Acharya

---

好的，由于其他答案缺乏信息，我未能实现此目标。不管怎样，感谢您详细的回答。 - shiv