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.