Question

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

bottom navigation 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（app）

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

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

1 个答案: