Colore della scheda selezionata nella vista di navigazione inferiore


142

Sto aggiungendo un BottomNavigationViewa un progetto e vorrei avere un colore di testo (e tinta icona) diverso per la scheda selezionata (per ottenere l'effetto di schede non selezionate ingrigite). L'uso di un colore diverso con android:state_selected="true"un file di risorse in un selettore di colore non sembra funzionare. Ho anche provato ad avere voci di oggetto aggiuntive con android:state_focused="true"o android:state_enabled="true", sfortunatamente, nessun effetto. Ho anche provato a impostare l' state_selectedattributo su false (esplicitamente) per il colore predefinito (non selezionato), senza fortuna.

Ecco come aggiungo la vista al mio 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" />

Ecco il mio selettore di colori ( 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>

E la mia risorsa menu ( 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>

Gradirei qualsiasi aiuto.

Risposte:


310

Durante la creazione di un selector, mantieni sempre lo stato predefinito alla fine, altrimenti verrebbe utilizzato solo lo stato predefinito. È necessario riordinare gli elementi nel selettore come:

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

E lo stato da utilizzare non lo BottomNavigationBarè .state_checkedstate_selected


77
aggiungilo su <android.support.design.widget.BottomNavigationView app: itemIconTint = "@ drawable / nav_item_color_state" app: itemTextColor = "@ drawable / nav_item_color_state" />
— dianakarenms

1
Nel mio caso avevo bisogno di generare un menu dinamico e questa soluzione non funzionava. L'unica soluzione funzionante era impostare manualmente le voci di menu stackoverflow.com/a/7106111/2098878
— Rafael

9
"stato_controllato non stato_selezionato". Che risparmio di tempo :) Grazie!
— Piotr Ślesarew,

3
aggiungilo su <android.support.design.widget.BottomNavigationView app: itemIconTint = "@ color / nav_item_color_state" app: itemTextColor = "@ color / nav_item_color_state" /> invece di @ drawable
— Anton Makov

1
Per tutti coloro che sono rimasti bloccati come me, ho dovuto creare una directory "color" in "res" e inserire questo file.
— Tayyab Mazhar,

67

1. All'interno di res creare una cartella con il colore del nome (come disegnabile)

2. Fare clic con il tasto destro sulla cartella colori. Seleziona nuovo-> file di risorse colore-> crea file color.xml (bnv_tab_item_foreground) (Figura 1: Struttura dei file)

3. Copia e incolla 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>

Figura 1: Struttura del file:

Figura 1: struttura dei file


53

BottomNavigationViewutilizza colorPrimary dal tema applicato per la scheda selezionata e utilizza android:textColorSecondary per la tinta dell'icona della scheda inattiva.

Quindi puoi creare uno stile con il colore primario preferito e impostarlo come tema per il tuo BottomNavigationViewin un file di layout 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:textColorSecondarynon funziona. dovrebbe usare android:colorForegroundinvece
— Mahdi Moqadasi l'

Questa è la risposta migliore, il metodo "selettore" usa "darker_gray" come colore inattivo della scheda che è diverso da quello originale. android:textColorSecondaryFunziona anche per me. Grazie!
— Sam Chen,

9

Se vuoi cambiare i colori delle icone e dei testi a livello di codice:

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

È troppo tardi per rispondere, ma potrebbe essere utile per qualcuno. Stavo facendo un errore molto sciocco, stavo usando un file di selezione chiamato bottom_color_nav.xml per selezionare e deselezionare il cambio di colore, ma non rifletteva alcun cambiamento di colore in BottomNavigationView.

Poi mi rendo conto che stavo restituendo false nel metodo onNavigationItemSelected . Funzionerà bene se tornerai vero in questo metodo.


2

Prova a utilizzare android:state_enabledanziché android:state_selectedper gli attributi degli elementi del selettore.


Come menzionato nella domanda, ho provato anche state_enabled, ma non è l'attributo di stato corretto da utilizzare con questo widget specifico. Il problema era quello che è stato menzionato nella risposta: 1. L'ordinamento era errato (lo stato predefinito dovrebbe essere l'ultimo elemento nel selettore) 2. state_checked è l'attributo di stato corretto da utilizzare con BottomNavigationView.
— Javad Sadeqzadeh,

2

Sto usando un com.google.android.material.bottomnavigation.BottomNavigationView(non uguale a quello di OP) e ho provato una varietà delle soluzioni suggerite sopra, ma l'unica cosa che ha funzionato è stata l'impostazione app:itemBackgrounde il app:itemIconTintmio selettore di colori ha funzionato per me.

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

I miei color/tab_color.xmlusiandroid: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>

e sto anche usando un colore di stato selezionato per color/bottom_navigation_text_color.xml

inserisci qui la descrizione dell'immagine

Non del tutto rilevante qui, ma per la massima trasparenza, il mio BottomNavigationViewstile è il seguente:

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

1

Per impostare textColor, BottomNavigationViewha due proprietà di stile che puoi impostare direttamente dall'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>

0

Questo funzionerà:

setItemBackgroundResource(android.R.color.holo_red_light)

0

Invece di creare un selettore, il modo migliore per creare uno stile.

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

e per modificare la dimensione del testo, selezionata o non selezionata.

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

Goditi Android!

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.