android - change - Cambio de color de fondo en BottomNavigationView

change bottom navigation bar color android

Question

He implementado BottomNavigationView que está disponible en la nueva biblioteca de soporte 25.0.0. Aquí está mi código para eso

<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="@drawable/text"
app:itemTextColor="@drawable/text"
app:menu="@menu/bottom_navigation_main" />

Y text.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@android:color/white" android:state_enabled="true" />
<item android:color="@color/colorPrimaryDark" android:state_enabled="false" />
</selector>

Con este código, puedo cambiar el color del texto cuando se hace clic en el elemento del menú, pero cuando aplico lo mismo a la app:itemBackground está mostrando la <item> tag requires a ''drawable'' attribute or child tag defining a drawable error <item> tag requires a ''drawable'' attribute or child tag defining a drawable .

Esto es lo que he probado para la app:itemBackground

app:itemBackground="@drawable/text"

Entonces, mi pregunta es ¿cómo puedo cambiar el color de fondo del elemento del menú seleccionado?

Answer 1

Encontré un problema similar a los OP, pero un poco diferente. Si coloca algo como @color/color_selector en la app:itemBackground="___" . Provocará que la vista se oculte en el panel de diseño y que la aplicación se aplaste cuando se inicie. A pesar de que funciona bien, solo hay que establecer un color constante como @color/black .

Para una explicación más detallada, busqué en la referencia de Android Api. Ahora creo que he encontrado la respuesta que puede resolver razonablemente este problema. (Puede que no sea exacto)

El problema es que lo que usted proporciona NO ES EXACTAMENTE lo que pidieron .

app:itemIconTint y app:itemTextColor piden un color hexadecimal, mientras que app:itemBackground pide un Drawable literalmente. Los elementos <color> que escribimos en colors.xml son ColorDrawable . Se deriva de Drawable para que pueda alimentar los tres atributos.

Sin embargo, cuando lo cambias para usar un selector, las cosas se vuelven diferentes. Tanto el color hexagonal como el dibujable tienen un selector correspondiente. Un selector actúa como el recurso que pones, pero el resultado no es el original. Es más como un envoltorio de un solo propósito. No puedes alimentar un color hexadecimal a un atributo que requiere un Dibujable .

El selector de color es en realidad un ColorStateList , proporciona un color hexadecimal, reside en res/color . Puedes usar solo el atributo android:color en este archivo. se le pedirá un error si escribe android:drawable .
El selector de StateListDrawable es StateListDrawable , proporciona Drawable, reside en res/drawable . Debería escribir android:drawable aquí, pero no hay error si escribe android:color .

Sin embargo, android:color solo proporciona un color hexadecimal que no se puede reconocer como Drawable , mientras que app:itemBackground requiere Drawable , por lo que la aplicación está condenada. (Causa directa)

Ambos atributos ( android:color y android:drawable ) aceptan un ColorDrawable , aquí funciona igual que cuando se establece un color constante.

La solución (y la práctica) es:

• Utilice (y solo) android:drawable en res/drawable/drawable_selector.xml . Ejemplo:

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

• Use res/color/color_selector.xml cuando necesite un color hexadecimal (para evitar confusiones). Ejemplo:

  <?xml version="1.0" encoding="utf-8"?>
  <selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:color="@android:color/white" android:state_checked="true"/>
  <item android:color="@color/colorPrimary" />
  </selector>

• Proporcionar app:itemBackground con app:itemBackground . Ejemplo:

  <android.support.design.widget.BottomNavigationView
  ...
  app:itemBackground="@drawable/drawable_selector"
  app:itemIconTint="@color/color_selector"
  app:itemTextColor="@color/color_selector"
  ... />

(Cabe destacar que si está utilizando Android Studio, su función de autocompletar le dirá qué atributos son legales y están disponibles, y no le sugiere que android:color un selector en res/drawable )

Answer 2

Encontré una respuesta de este post mediano.

1. Necesitamos usar android:state_checked lugar de android:state_enabled
2. dentro de onNavigationItemSelected debe usar return true lugar de return false .

y para establecer el fondo, no podemos usar android:color en <item> , necesitamos usar android:drawable

Así que aquí se ve el archivo xml cuando lo configuras para app:itemTextColor and app:itemIconTint

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

y para configurar la app:itemBackground selector

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

Aquí banner_white y banner_green son pngs.

Answer 3

Inténtalo, es un ejemplo de código de elemento de navegación para seleccionar el oyente. Espero que te ayude.

 @Override
public boolean onNavigationItemSelected(final MenuItem menuItem) {
// update highlighted item in the navigation menu
menuItem.setChecked(true);
mNavItemId = menuItem.getItemId();
// allow some time after closing the drawer before performing real navigation
// so the user can see what is happening
mDrawerLayout.closeDrawer(GravityCompat.START);
mDrawerActionHandler.postDelayed(new Runnable() {
@Override
public void run() {
navigate(menuItem.getItemId());
}
}, DRAWER_CLOSE_DELAY_MS);
return true;
}

Solución alternativa:

Haz un archivo dibujable highlight_color.xml con el siguiente contenido:

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="YOUR HIGHLIGHT COLOR"/>
</shape>

Cree otro archivo dibujable nav_item_drawable.xml con el siguiente contenido:

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

Finalmente agregue la aplicación: etiqueta itemBackground en el NavView:

<android.support.design.widget.NavigationView
android:id="@+id/activity_main_navigationview"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/drawer_header"
app:itemIconTint="@color/black"
app:itemTextColor="@color/primary_text"
app:itemBackground="@drawable/nav_item_drawable"
app:menu="@menu/menu_drawer">

aquí, el archivo highlight_color.xml define un color sólido dibujable para el fondo. Más tarde, este color dibujable se asigna al selector nav_item_drawable.xml.

Prueba este.