Колір вибраного вкладки у вікні навігації знизу


142

Я додаю проект BottomNavigationViewдо проекту, і я хотів би мати інший колір тексту (і відтінку піктограми) для вибраної вкладки (для досягнення ефекту виділення не вибраних вкладок). Використання іншого кольору з android:state_selected="true"файлом ресурсу для вибору кольору, здається, не працює. Я також спробував мають додаткові записи записи з android:state_focused="true"або android:state_enabled="true", ніякого ефекту , на жаль. Також спробував встановити state_selectedатрибут false (явно) для кольору за замовчуванням (не вибраний), без удачі.

Ось як я додаю подання до моєї верстки:

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

Буду вдячний за будь-яку допомогу.

Відповіді:


310

Під час створення a 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не є state_selected.


77
додайте його в <android.support.design.widget.BottomNavigationView app: itemIconTint = "@ dravable / nav_item_color_state" app: itemTextColor = "@ dravable / nav_item_color_state" />
dianakarenms

1
У моєму випадку мені потрібно було створити динамічне меню, і це рішення не спрацювало. Єдиним робочим рішенням було встановлення елементів меню вручну stackoverflow.com/a/7106111/2098878
Рафаель

9
"state_ перевірено не state_selected". Яка економія часу :) Дякую!
Пьотр Ślesarew

3
додайте його в <android.support.design.widget.BottomNavigationView app: itemIconTint = "@ color / nav_item_color_state" app: itemTextColor = "@ color / nav_item_color_state" /> замість @ dravable
Антон Маков

1
Для всіх, хто застряг, як я, мені довелося створити каталог "color" у "res" і помістити цей файл туди.
Таяб Мажар

67

1. Усередині дозволу створити папку з ім'ям кольору (як Drawable)

2. Клацніть правою кнопкою миші на папці кольорів. Виберіть новий-> файл кольорового ресурсу-> створити файл 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: Структура файлу:

Рисунок 1: Структура файлу


53

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

3
android:textColorSecondaryне працює. слід використовувати android:colorForegroundзамість цього
Махді Мокадасі

Це найкраща відповідь, метод "селектор" використовує "darker_gray" як неактивний колір вкладки, який відрізняється від початкового. Також android:textColorSecondaryпрацює для мене. Дякую!
Сем Чен

9

Якщо ви хочете програмно змінити кольори значків та текстів:

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);

5

Адже відповісти занадто пізно, але може бути корисним для когось. Я робив дуже нерозумну помилку, використовував файл вибору з іменем bottom_color_nav.xml для вибору та скасування зміни кольору, але все-таки він не відображав жодної зміни кольору в BottomNavigationView.

Тоді я розумію, я повертався БРЕХНЯ в onNavigationItemSelected методі. Це буде добре, якщо ви повернете справжнє в цьому методі.


2

Спробуйте android:state_enabledскоріше використовувати android:state_selectedатрибути елемента селектора.


Як уже згадувалося в запитанні, я також спробував state_enabled, але це не правильний атрибут стану, який слід використовувати з цим конкретним віджетом. Проблема полягала в тому, що згадувалося у відповіді: 1. Впорядкування було неправильним (стан за замовчуванням має бути останнім елементом у селекторі).
Джавад Садекзаде

1

Щоб встановити textColor, BottomNavigationViewмає два властивості стилю, які можна встановити безпосередньо з 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>

1

Я використовую com.google.android.material.bottomnavigation.BottomNavigationView(не те саме, що в ОП), і я спробував різні запропоновані рішення вище, але єдине, що працювало - це налаштування, 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" />

Мої 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>

і я також використовую вибраний колір стану для color/bottom_navigation_text_color.xml

введіть тут опис зображення

Тут не зовсім актуально, але для повної прозорості мій 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>


0

Замість створення селектора найкращий спосіб створити стиль.

<style name="AppTheme.BottomBar">
    <item name="colorPrimary">@color/colorAccent</item> 
</style>

і для зміни розміру тексту, вибраного чи не вибраного.

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

Насолоджуйтесь Android!

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.