color - navigation bar android

Android: Vista de navegación inferior: cambiar el icono del elemento seleccionado

Question

He añadido BottomNavigationView en mi aplicación como.

main.xml

<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/colorPrimary"
        app:itemIconTint="@color/white"
        app:itemTextColor="@color/white"
        app:menu="@menu/bottom_navigation_main" />

bottom_navigation_main.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_favorites"
        android:enabled="true"
        android:icon="@drawable/ic_favorite_white_24dp"
        android:title="@string/text_favorites"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_schedules"
        android:enabled="true"
        android:icon="@drawable/ic_access_time_white_24dp"
        android:title="@string/text_schedules"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_music"
        android:enabled="true"
        android:icon="@drawable/ic_audiotrack_white_24dp"
        android:title="@string/text_music"
        app:showAsAction="ifRoom" />
</menu>

Haga clic en MainActivity

bottomNavigationView.setOnNavigationItemSelectedListener(
        new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.action_favorites:
                        //need change icon of favotites here.
                    case R.id.action_schedules:

                    case R.id.action_music:

                }
                return true;
            }
        });

Quiero cambiar el icono de la navegación inferior de la posición seleccionada. ¿Cómo podemos lograr esta función cuando el usuario hace clic en un elemento?

(Si el usuario hizo clic en un elemento, el icono cambiará a otro)

Answer 1

Cree un selector y especifique dibujables para cada estado (por ejemplo, estados marcados y no marcados)

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:drawable="@drawable/calender_green" android:state_checked="true"/>
  <item android:drawable="@drawable/calender_black" android:state_checked="false"/>
</selector>

Answer 2

De acuerdo, quería entender cómo hacer que cada elemento tenga su propia imagen y, con cierta confusión en los comentarios sobre dónde debería ir, quería escribir esta respuesta.

Primero crea tu menú y sus elementos. Su selector irá dentro de esos elementos en el valor ICONO . Aquí tenemos 2 selectores, cada uno hecho para su elemento de menú.

item
    android:id="@+id/navigation_home"
    android:icon="@drawable/navigation_home_selector"
    android:title="@string/title_home" />
item
    android:id="@+id/navigation_profile"
    android:icon="@drawable/navigation_profile_selector"
    android:title="@string/title_profile" />

Ahora aquí está su archivo de selección que se guardará en su carpeta dibujable.

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/menu_selected" android:state_checked="true"/>
    <item android:drawable="@drawable/menu" android:state_checked="false"/>
</selector>

El paso final fue proporcionado por

Agregue esta línea de código a su BottomNavigationView.

BottomNavigationView.setItemIconTintList(null);

Ahí tienes. Todo funciona a la perfección.

Answer 3

Debe restablecer el ícono con un clic y luego, en la caja del interruptor, debe configurar solo el que necesita cambiar, así que solo cuando se selecciona el ícono cambia.

Menu menu = bottomNavigationView.getMenu();
menu.findItem(R.id.action_favorites).setIcon(favDrawable);

switch (item.getItemId()) {
                case R.id.action_favorites:
                     item.setIcon(favDrawableSelected);
                case R.id.action_schedules:
                case R.id.action_music:
            }

Answer 4

Encontré la respuesta. nosotros podemos usar

item.setIcon(R.drawable.icon_name) 

Para cambiar el icono ... Intentaré mejorar la respuesta.

 bottomNavigationView.setOnNavigationItemSelectedListener(
            new BottomNavigationView.OnNavigationItemSelectedListener() {
                @Override
                public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                    switch (item.getItemId()) {
                        case R.id.action_favorites:
                            //change the icon
                         item.setIcon(R.drawable.icon_name);
                        case R.id.action_schedules:

                        case R.id.action_music:

                    }
                    return true;
                }
            });

Answer 5

Encontré que este es un mejor enfoque para usar el selector dibujable:

Al principio crea un archivo xml en tu carpeta dibujable. Por ejemplo, el nombre del archivo xml es child_selector.xml en la carpeta dibujable.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/child" android:state_checked="false"/>
    <item android:drawable="@drawable/child_fill" android:state_checked="true"/>
</selector>

Simplemente agregue child_selector en el elemento de menú de su bottom_navigation_main.xml: -

Me gusta: android: icon = "@ drawable / child_selector"

Ejemplo:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

<item
    android:id="@+id/navigation_child"
    android:icon="@drawable/child_selector"
    android:title="@string/title_child" />

</menu>

Buena suerte.

Answer 6

Gracias por el método de selector , que funciona para mí ( api v26 )

Para aquellos que se preguntan cómo configurarlo de nuevo en el icono de origen no seleccionado programáticamente, considere agregar esto a su OnNavigationItemSelectedListener antes de su switch(Java) o when(Kotlin) :

private val mOnNavigationItemSelectedListener = BottomNavigationView.OnNavigationItemSelectedListener { item ->
    navigation.menu.getItem(0).setIcon(R.drawable.ic_tab_home)
    navigation.menu.getItem(1).setIcon(R.drawable.ic_tab_account)
    navigation.menu.getItem(2).setIcon(R.drawable.ic_tab_trading)
    navigation.menu.getItem(3).setIcon(R.drawable.ic_tab_wallet)
    when (item.itemId) {
        R.id.navigation_home -> {
            message.setText(R.string.title_home)
            item.setIcon(R.drawable.ic_tab_home_active)
            return@OnNavigationItemSelectedListener true
        }
        R.id.navigation_account -> {
            message.setText(R.string.title_account)
            item.setIcon(R.drawable.ic_tab_account_active)
            return@OnNavigationItemSelectedListener true
        }
        R.id.navigation_trading -> {
            message.setText(R.string.title_trading)
            item.setIcon(R.drawable.ic_tab_trading_active)
            return@OnNavigationItemSelectedListener true
        }
        R.id.navigation_wallet-> {
            message.setText(R.string.title_wallet)
            item.setIcon(R.drawable.ic_tab_wallet_active)
            return@OnNavigationItemSelectedListener true
        }
    }
    false
}

Answer 7

Si las soluciones anteriores no funcionan para cambiar el ícono del elemento seleccionado, a continuación, agregue la siguiente línea a su código:

bottomNavigationView.setItemIconTintList(null);

Esto deshabilitará el efecto de tinte del icono del elemento seleccionado

Yo tuve el mismo problema. He agregado el selector dibujable para cambiar el icono del elemento BottomNavigationView cuando está marcado / seleccionado.

Answer 8

Simplemente puede crear un selector dibujable en la carpeta dibujable y la imagen se puede cambiar de acuerdo con el estado del widget utilizado en la vista

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/calender_green" android:state_checked="true"/>
    <item android:drawable="@drawable/calender_black" android:state_checked="false"/>
</selector>