Выбранный цвет вкладки в виде нижней навигации
Я добавляю BottomNavigationView
в проект и хотел бы иметь другой цвет текста (и оттенок значка) для выбранной вкладки (для достижения эффекта BottomNavigationView
вкладок). Использование другого цвета с android:state_selected="true"
в файле ресурсов селектора цветов, похоже, не работает. Я также пытался иметь дополнительные записи элементов с android:state_focused="true"
или android:state_enabled="true"
, к сожалению, android:state_enabled="true"
. Также попытался установить для атрибута state_selected
значение false (явно) для цвета по умолчанию (state_selected
), но безуспешно.
Вот как я могу добавить вид к своему макету:
<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" />
Вот мой селектор цвета (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>
И мой ресурс меню (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>
Буду признателен за любую помощь.
Ответы
Ответ 1
При создании selector
всегда сохраняйте состояние по умолчанию в конце, иначе будет использоваться только состояние по умолчанию. Вам необходимо изменить порядок элементов в селекторе как:
<?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>
И состояние, которое будет использоваться с BottomNavigationBar
, равно state_checked
not state_selected
.
Ответ 2
1. Внутри res создайте папку с именем color (например, drawable)
2. Щелкните правой кнопкой мыши по цветовой папке. Выберите new-> ресурс цвета file-> создать файл color.xml(bnv_tab_item_foreground) (рисунок 1: структура файла)
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:
<?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>
Рисунок 1: Структура файла:
![Figure 1: File Structure]()
Ответ 3
BottomNavigationView
использует colorPrimary из темы, примененной к выбранной вкладке, и использует android:textColorSecondary
для оттенка неактивной вкладки.
Таким образом, вы можете создать стиль с предпочтительным основным цветом и установить его в качестве темы для вашего BottomNavigationView
в файле макета XML.
styles.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:
<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" />
Ответ 4
Попробуйте использовать android:state_enabled
вместо android:state_selected
для атрибутов элемента селектора.
Ответ 5
Если вы хотите изменить цвета значков и текста программно:
ColorStateList iconsColorStates = 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")
});
ColorStateList textColorStates = 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(iconsColorStates);
navigation.setItemTextColor(textColorStates);
Ответ 6
Это слишком поздно для ответа, но полезно для всех.
Я сделал очень глупую ошибку, я использовал bottom_color_nav.xml для выбора и отмены выбора изменения цвета. В BottomNavigation все еще не получается нужный цвет.
Затем я понимаю, что мне было возвращено значение false в методе onNavigationItemSelected, который был выпущен только с моим кодом.
Ответ 7
Это будет работать:
setItemBackgroundResource(android.R.color.holo_red_light)
Ответ 8
Чтобы установить textColor, BottomNavigationView
имеет два свойства стиля style properties, которые можно установить непосредственно из xml:
itemTextAppearanceActive
itemTextAppearanceInactive
In your layout.xml file:
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bnvMainNavigation"
style="@style/NavigationView"/>
In your styles.xml file:
<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>