如何为底部导航选项卡所选项目添加不同的背景颜色？

Question

我需要添加不同的背景颜色，即如下图所示的灰色（单击蓝色文本查看），到底部导航中当前选定的选项卡。我在没有任何库帮助的情况下使用默认导航选项卡活动。

bottom navigation active tab highlighted

second active tab highlighted

这是底部导航视图的代码：

<android.support.design.widget.BottomNavigationView
    android:id="@+id/navigation_Userview"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    app:itemBackground="@color/ActivityBackgroundColor"
    app:itemIconTint="@drawable/navigation_item_selector"
    app:itemTextColor="@drawable/navigation_item_selector"
    app:menu="@menu/navigation1"/>

这是我的导航项选择器代码：

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

<item android:color="@color/Buttoncolor" android:state_checked="true" />
<item android:color="@color/TextColor" android:state_checked="false" />

Answer 1

这个库可以帮助你

NavigationTabBar

在 gradle（应用程序）中

compile 'devlight.io:navigationtabbar:1.2.5'

只需将其添加到您的 xml 文件中

 <devlight.io.library.ntb.NavigationTabBar
    android:id="@+id/navigationTabBar"
    android:layout_width="match_parent"
    android:layout_height="@dimen/_50sdp"
    app:ntb_animation_duration="400"
    app:ntb_titled="true"
    app:ntb_scaled="true"
    app:ntb_tinted="true"
    app:ntb_bg_color="@color/colorPrimary"
    app:ntb_active_color="@color/colorAccent"
    app:ntb_inactive_color="@color/colorPrimary"
    app:ntb_title_mode="all"
    app:ntb_swiped="true"
    app:ntb_icon_size_fraction="0.4"
    app:ntb_title_size="@dimen/littleFontSize"/>

更新

您可以创建选择器名称 backgrand_nav_item.xml，如下所示

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

还有你的 BottomNavigationView

<android.support.design.widget.BottomNavigationView
android:id="@+id/navigation_Userview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:itemBackground="@drawable/backgrand_nav_item"
app:itemIconTint="@drawable/navigation_item_selector"
app:itemTextColor="@drawable/navigation_item_selector"
app:menu="@menu/navigation1"/>