安卓BottomNavigationView中选中的项目颜色

Question

安卓BottomNavigationView中选中的项目颜色

87

我参考了这里的内容。当我点击Schedules时，Schedules活动出现了，但第一个项目（Favorites）的颜色总是被选中。它不会从Favorites项目的颜色改变为Schedules项目的颜色。而且，第三个项目（Music）。我使用的是android:state_checked而不是android:state_enabled。如果使用startActivity，它不会从Favorites项目的颜色改变为Schedules项目的颜色。如果不使用，它会改变颜色。如何解决这个颜色选择问题。

activity_main.xml

app:itemIconTint="@drawable/nav_item_color_state"
app:itemTextColor="@drawable/nav_item_color_state"
app:menu="@menu/bottom_navigation_main"

@drawable/nav_item_color_state

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

- WPG

你为日程表、收藏夹和音乐单独设置了活动吗？ - Chintan Soni

是的，我将这三个活动分开进行。 - WPG

有人找到解决方案了吗？ - Kaushik Burkule

7个回答

23

在drawable文件夹中创建一个名为navigation_view_colored.xml的xml文件，并将以下内容放入其中：

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

将你创建的xml添加到app:itemIconTint。

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/bottom_navigation"
    android:layout_alignParentBottom="true"
    app:itemIconTint="@drawable/navigation_view_colored"
    app:itemTextColor="@color/blue"
    app:menu="@menu/bottom_navigation"
    android:background="?android:attr/windowBackground"/>

- jenos kon

8

只需更改主题：

在values中创建themes.xml并添加此样式。

<style name="BottomNavThem" parent="Theme.MaterialComponents.Light.NoActionBar">
    <item name="colorPrimary">@color/colorPrimaryRed</item>
</style>

并将其设置为BottomNavigationView

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottomNavigationView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:menu="@menu/main_navigation_menu"
    android:theme="@style/BottomNavThem"/>

- mohsen

6

这里有一个简单的解决方案，适用于你的问题。

<android.support.design.widget.TabLayout
....
app:tabBackground="@drawable/tab_color_selector"
...
/>

选择器res/drawable/tab_color_selector.xml：

 <?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/tab_background_selected" android:state_selected="true"/>
    <item android:drawable="@color/tab_background_unselected" android:state_checked="false"/>
 </selector>

更新选项卡项目选择器颜色以符合您的需求。

- Ankush Bist

6

在我的情况下，我使用了BottomNavigationBarEx插件。因此，我必须像下面这样做：

在我的res/layout/layout_navigation_view.xml中：

添加app:itemIconTint="@drawable/bottom_nav_colors"。因为我只使用了图标。如果你有文本也要加上这个：app:itemTextColor="@drawable/bottom_nav_colors"。

    <com.ittianyu.bottomnavigationviewex.BottomNavigationViewEx
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/bottomNavBar"
        android:background="@drawable/white_grey_border_top"
        app:itemIconTint="@drawable/bottom_nav_colors"
        app:menu="@menu/bottom_navigation_menu" />

然后在 res/drawable 目录下（因为 selector 需要包含在 drawable 或 animatable 目录中），添加 selector（如其他人所提到的）：

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

然后在res/values/colors.xml中添加您的选择和未选择颜色，例如：

<color name="grey">#bfbfbf</color>
<color name="blue">#3F51B5</color>

- Blasanka

1

你听说过 Roughike 的 BottomBar 封装项目吗？它可以让使用 BottomNavigationView 更加容易。该项目可以在这里找到。

我建议你使用这个项目，因为它是最新的，并且有很高水平的贡献。如果你想使用它，你只需要插入下面的代码来改变选项卡被点击时的颜色，以及进行更多的自定义操作：

TabLayout tabLayout = (TabLayout) findViewById(R.id.tabLayout);
Tab tab = newTab().setIcon(new BitmapDrawable(getResources(), icon)));
tab.getIcon().setColorFilter(Color.parseColor("#7E7E7E"), PorterDuff.Mode.SRC_IN);

tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
                          @Override public void onTabSelected(TabLayout.Tab tab) {
                            if (tab != null && tab.getIcon() != null) {
                              tab.getIcon().clearColorFilter();
                              }
                          }
                          @Override public void onTabUnselected(TabLayout.Tab tab) {
                            if (tab != null && tab.getIcon() != null) {
                              tab.getIcon()
                                  .setColorFilter(Color.parseColor("#7E7E7E"),
                                      PorterDuff.Mode.SRC_IN);
                            }
                          }
                          @Override public void onTabReselected(TabLayout.Tab tab) {
                          }
                        });
                      }
                    }
                  });

基本上，我在这里做的是将未选中的选项卡颜色设置为#7E7E7E，并清除用于着色的筛选器以使选中的选项卡出现其图标的原始颜色。当然，当选中时，您也可以填充其他颜色，这取决于您。

希望这能帮到您！

祝好，

Renc

- user4156995

这意味着使用TabLayout而不是RelativeLayout。TabLayout在哪里？ - WPG

@StevenLin 如果你参考给出的 GitHub 项目，你可以找到这个用法的库。 - user4156995

tabLayout 显示为下划线，我想只使用标志和文本。先生！ - WPG

-1

其他使用可绘制选择器的答案对我没有用。

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

在我的情况下，删除 state_checked="false" 就可以解决这个问题。

<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomnav"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/transparent_rect"
        app:layout_constraintBottom_toBottomOf="parent"
        app:itemIconTint="@drawable/bottomnav_selector"
        app:menu="@menu/bottomnav_menu"/>

- DIRTY DAVE

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

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

- Mohammad Hosein Heidari · Accepted Answer

在res文件夹中创建一个颜色目录，并创建你自己的XML文件来自定义底部导航栏项目：

res/color/bottom_nav_color.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="@color/your_color" />
     <item android:state_checked="false" android:color="@color/your_color"/>
</selector>

并在您的BottomNavigationView中设置app:itemTextColor和app:itemIconTint的值为@color/bottom_nav_color

<android.support.design.widget.BottomNavigationView
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:id="@+id/main_navigation"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_alignParentBottom="true"
   android:background="@color/actionBarColor"
   app:menu="@menu/my_navigation_items"
   app:itemTextColor="@color/bottom_nav_color"
   app:itemIconTint="@color/bottom_nav_color"/>