如何为底部导航选项卡所选项目添加不同的背景颜色?
How to add a different background color to bottom navigation tab selected item?
我需要在底部导航中的当前选定选项卡中添加不同的背景颜色,即下图中的灰色(单击蓝色文本可查看)。我在没有任何库帮助的情况下使用默认导航选项卡 activity。
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" />
这个图书馆可以帮助你
在 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"/>
我需要在底部导航中的当前选定选项卡中添加不同的背景颜色,即下图中的灰色(单击蓝色文本可查看)。我在没有任何库帮助的情况下使用默认导航选项卡 activity。
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" />
这个图书馆可以帮助你
在 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"/>