[英]Selected tab's color in Bottom Navigation View
I'm adding a BottomNavigationView
to a project, and I would like to have a different text (and icon tint) color for the selected tab (to achieve greying out non-selected tabs effect).我正在向项目中添加一个
BottomNavigationView
,并且我希望为选定的选项卡设置不同的文本(和图标色调)颜色(以实现使非选定选项卡变灰的效果)。 Using a different color with android:state_selected="true"
in a color selector resource file doesn't seem to work.在颜色选择器资源文件中使用带有
android:state_selected="true"
的不同颜色似乎不起作用。 I also tried having additional item entries with android:state_focused="true"
or android:state_enabled="true"
, no effect unfortunately.我还尝试使用
android:state_focused="true"
或android:state_enabled="true"
设置其他项目条目,不幸的是没有效果。 Also tried setting the state_selected
attribute to false (explicitly) for the default (non-selected) color, with no luck.还尝试将默认(未选择)颜色的
state_selected
属性设置为 false(显式),但没有成功。
Here is how I add the view to my layout:这是我将视图添加到布局的方法:
<android.support.design.widget.BottomNavigationView
android:id="@+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:itemBackground="@color/silver"
app:itemIconTint="@color/bnv_tab_item_foreground"
app:itemTextColor="@color/bnv_tab_item_foreground"
app:menu="@menu/bottom_nav_bar_menu" />
Here is my color selector ( bnv_tab_item_foreground.xml
):这是我的颜色选择器(
bnv_tab_item_foreground.xml
):
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@android:color/darker_gray" />
<item android:state_selected="true" android:color="@android:color/holo_blue_dark" />
</selector>
And my menu resource ( bottom_nav_bar_menu.xml
):还有我的菜单资源(
bottom_nav_bar_menu.xml
):
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/action_home"
android:icon="@drawable/ic_local_taxi_black_24dp"
android:title="@string/home" />
<item
android:id="@+id/action_rides"
android:icon="@drawable/ic_local_airport_black_24dp"
android:title="@string/rides"/>
<item
android:id="@+id/action_cafes"
android:icon="@drawable/ic_local_cafe_black_24dp"
android:title="@string/cafes"/>
<item
android:id="@+id/action_hotels"
android:icon="@drawable/ic_local_hotel_black_24dp"
android:title="@string/hotels"/>
</menu>
I would appreciate any help.我将不胜感激任何帮助。
While making a selector
, always keep the default state at the end, otherwise only default state would be used.在制作
selector
,始终保持最后的默认状态,否则只会使用默认状态。 You need to reorder the items in your selector as:您需要将选择器中的项目重新排序为:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:color="@android:color/holo_blue_dark" />
<item android:color="@android:color/darker_gray" />
</selector>
And the state to be used with BottomNavigationBar
is state_checked
not state_selected
.与
BottomNavigationBar
一起使用的状态是state_checked
而不是state_selected
。
1. Inside res create folder with name color (like drawable) 1.在res 内创建名称为 color 的文件夹(如 drawable)
2. Right click on color folder. 2.右键单击颜色文件夹。 Select new-> color resource file-> create color.xml file (bnv_tab_item_foreground) (Figure 1: File Structure)
选择新建->颜色资源文件->创建color.xml文件(bnv_tab_item_foreground) (图1:文件结构)
3. Copy and paste bnv_tab_item_foreground 3.复制粘贴bnv_tab_item_foreground
<android.support.design.widget.BottomNavigationView
android:id="@+id/navigation"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="0dp"
android:layout_marginStart="0dp"
app:itemBackground="@color/appcolor"//diffrent color
app:itemIconTint="@color/bnv_tab_item_foreground" //inside folder 2 diff colors
app:itemTextColor="@color/bnv_tab_item_foreground"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="@menu/navigation" />
bnv_tab_item_foreground: bnv_tab_item_foreground:
<?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/white" />
<item android:color="@android:color/darker_gray" />
</selector>
Figure 1: File Structure:图 1:文件结构:
BottomNavigationView
uses colorPrimary from the theme applied for the selected tab and it uses android:textColorSecondary
for the inactive tab icon tint. BottomNavigationView
使用应用于所选选项卡的主题中的colorPrimary ,并使用android:textColorSecondary
为非活动选项卡图标着色。
So you can create a style with the prefered primary color and set it as a theme to your BottomNavigationView
in an xml layout file.因此,您可以使用首选原色创建样式,并将其设置为 xml 布局文件中
BottomNavigationView
的主题。
styles.xml :样式.xml :
<style name="BottomNavigationTheme" parent="Theme.AppCompat.Light">
<item name="colorPrimary">@color/active_tab_color</item>
<item name="android:textColorSecondary">@color/inactive_tab_color</item>
</style>
your_layout.xml : your_layout.xml :
<android.support.design.widget.BottomNavigationView
android:id="@+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:attr/windowBackground"
android:theme="@style/BottomNavigationTheme"
app:menu="@menu/navigation" />
If you want to change icon and text colors programmatically:如果要以编程方式更改图标和文本颜色:
ColorStateList iconColorStates = new ColorStateList(
new int[][]{
new int[]{-android.R.attr.state_checked},
new int[]{android.R.attr.state_checked}
},
new int[]{
Color.parseColor("#123456"),
Color.parseColor("#654321")
});
navigation.setItemIconTintList(iconColorStates);
navigation.setItemTextColor(iconColorStates);
I am using a com.google.android.material.bottomnavigation.BottomNavigationView
(not the same as OP's) and I tried a variety of the suggested solutions above, but the only thing that worked was setting app:itemBackground
and app:itemIconTint
to my selector color worked for me.我正在使用
com.google.android.material.bottomnavigation.BottomNavigationView
(与 OP 不同)并且我尝试了上述各种建议的解决方案,但唯一有效的是将app:itemBackground
和app:itemIconTint
为我的选择器颜色对我有用。
<com.google.android.material.bottomnavigation.BottomNavigationView
style="@style/BottomNavigationView"
android:foreground="?attr/selectableItemBackground"
android:theme="@style/BottomNavigationView"
app:itemBackground="@color/tab_color"
app:itemIconTint="@color/tab_color"
app:itemTextColor="@color/bottom_navigation_text_color"
app:labelVisibilityMode="labeled"
app:menu="@menu/bottom_navigation" />
My color/tab_color.xml
uses android:state_checked
我的
color/tab_color.xml
使用android:state_checked
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/grassSelected" android:state_checked="true" />
<item android:color="@color/grassBackground" />
</selector>
and I am also using a selected state color for color/bottom_navigation_text_color.xml
而且我还为
color/bottom_navigation_text_color.xml
使用了选定的状态颜色
Not totally relevant here but for full transparency, my BottomNavigationView
style is as follows:这里不完全相关,但为了完全透明,我的
BottomNavigationView
样式如下:
<style name="BottomNavigationView" parent="Widget.Design.BottomNavigationView">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">@dimen/bottom_navigation_height</item>
<item name="android:layout_gravity">bottom</item>
<item name="android:textSize">@dimen/bottom_navigation_text_size</item>
</style>
It's too late to answer but might be helpful for someone.现在回答为时已晚,但可能对某人有帮助。 I was doing a very silly mistake, I was using a selector file named as bottom_color_nav.xml for Select and unselect color change but still it was not reflecting any color change in BottomNavigationView.
我犯了一个非常愚蠢的错误,我使用名为bottom_color_nav.xml的选择器文件进行选择和取消选择颜色更改,但它仍然没有反映 BottomNavigationView 中的任何颜色更改。
Then I realize, I was returning false in onNavigationItemSelected method.然后我意识到,我在onNavigationItemSelected方法中返回了false 。 It will work fine if you'll return true in this method.
如果您在此方法中返回 true,它将正常工作。
In order to set textColor, BottomNavigationView
has two style properties you can set directly from the xml:为了设置 textColor,
BottomNavigationView
有两个样式属性,您可以直接从 xml 设置:
itemTextAppearanceActive
itemTextAppearanceInactive
In your layout.xml file:在您的 layout.xml 文件中:
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bnvMainNavigation"
style="@style/NavigationView"/>
In your styles.xml file:在你的styles.xml 文件中:
<style name="NavigationView" parent="Widget.MaterialComponents.BottomNavigationView">
<item name="itemTextAppearanceActive">@style/ActiveText</item>
<item name="itemTextAppearanceInactive">@style/InactiveText</item>
</style>
<style name="ActiveText">
<item name="android:textColor">@color/colorPrimary</item>
</style>
<style name="InactiveText">
<item name="android:textColor">@color/colorBaseBlack</item>
</style>
尝试使用android:state_enabled
而不是android:state_selected
作为选择器项属性。
这将起作用:
setItemBackgroundResource(android.R.color.holo_red_light)
Instead of creating selector, Best way to create a style.不是创建选择器,而是创建样式的最佳方式。
<style name="AppTheme.BottomBar">
<item name="colorPrimary">@color/colorAccent</item>
</style>
and to change the text size, selected or non selected.并更改文本大小,选择或未选择。
<dimen name="design_bottom_navigation_text_size" tools:override="true">11sp</dimen>
<dimen name="design_bottom_navigation_active_text_size" tools:override="true">12sp</dimen>
Enjoy Android!享受安卓!
As the folder structure has changed, the tab_color.xml belongs to res > drawable now which can handle selectors.由于文件夹结构发生了变化,tab_color.xml 现在属于 res > drawable,它可以处理选择器。 From there on the accepted solution works.
从那里开始,公认的解决方案有效。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.