android - support - Cambiar el color de un elemento de menú marcado en un cajón de navegación

material design library android

Question

Estoy usando la nueva biblioteca de Android Design Support para implementar un cajón de navegación en mi aplicación.

¡No puedo entender cómo cambiar el color de un elemento seleccionado!

Aquí está el xml del menú:

<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
    <item
        android:id="@+id/navigation_item_1"
        android:icon="@drawable/ic_1"
        android:title="@string/navigation_item_1"/>

    <item
        android:id="@+id/navigation_item_2"
        android:icon="@drawable/ic_2"
        android:title="@string/navigation_item_2"/>
</group>

Y aquí está el xml de navigationview que se coloca dentro de un android.support.v4.widget.DrawerLayout :

<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:menu="@menu/menu_drawer">

    <TextView
        android:id="@+id/main_activity_version"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:layout_marginBottom="@dimen/activity_vertical_margin"
        android:layout_marginLeft="@dimen/activity_horizontal_margin"
        android:textColor="@color/primary_text" />

</android.support.design.widget.NavigationView>

Gracias por tu ayuda !

[EDITAR] Ya he visto soluciones como esta: Cambiar el color de fondo del menú de Android .

Parece ser un truco y pensé que con la nueva Biblioteca de soporte de diseño, ¿se habría introducido algo más limpio?

Answer 1

Aquí está la otra forma de lograr esto:

public boolean onOptionsItemSelected(MenuItem item) {

    int id = item.getItemId();

    item.setOnMenuItemClickListener(new MenuItem.OnMenuItemClickListener() {
        @Override
        public boolean onMenuItemClick(MenuItem item) {
            item.setEnabled(true);
            item.setTitle(Html.fromHtml("<font color=''#ff3824''>Settings</font>"));
            return false;
            }
        });


    //noinspection SimplifiableIfStatement
    if (id == R.id.action_settings) {
        return true;
    }

    return super.onOptionsItemSelected(item);
}

}

Answer 2

Así es como puedes hacerlo en el método onCreate de tu Actividad:

NavigationView navigationView = findViewById(R.id.nav_view);
ColorStateList csl = new ColorStateList(
    new int[][] {
        new int[] {-android.R.attr.state_checked}, // unchecked
        new int[] { android.R.attr.state_checked}  // checked
    },
    new int[] {
        Color.BLACK,
        Color.RED
    }
);
navigationView.setItemTextColor(csl);
navigationView.setItemIconTintList(csl);

Answer 3

Bueno, puedes lograr esto usando Color State Resource . Si observa dentro de su NavigationView , está usando

app:itemIconTint="@color/black"
app:itemTextColor="@color/primary_text"

Aquí, en lugar de usar @color/black o @color/primary_test , use un Color State List Resource . Para eso, primero cree un nuevo xml (por ejemplo, drawer_item.xml) dentro del directorio de color (que debería estar dentro del directorio res ). Si aún no tiene un directorio llamado color , cree uno.

Ahora dentro de drawer_item.xml haz algo como esto

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="checked state color" android:state_checked="true" />
    <item android:color="your default color" />
</selector>

El último paso sería cambiar su NavigationView

<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/drawer_item"  // notice here
    app:itemTextColor="@color/drawer_item" // and here
    app:itemBackground="@android:color/transparent"// and here for setting the background color to tranparent
    app:menu="@menu/menu_drawer">

De esta manera, puede usar recursos de la Lista de estados de color separados para IconTint , ItemTextColor , ItemBackground .

Ahora, cuando configura un elemento como marcado (ya sea en xml o mediante programación), el elemento particular tendrá un color diferente al de los no seleccionados.

Answer 4

Creo que la app:itemBackground espera un app:itemBackground . Entonces siga los pasos a continuación:

Cree un archivo dibuja highlight_color.xml con los siguientes contenidos:

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

Cree otro archivo nav_item_drawable.xml con los siguientes contenidos:

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

Finalmente, agregue la etiqueta app:itemBackground en 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.

Esto funcionó para mí. Esperemos que esto ayude.

********************************************** ACTUALIZADO *** *******************************************

Aunque la respuesta mencionada anteriormente le brinda un control preciso sobre algunas propiedades, pero la forma en que estoy a punto de describir se siente más SÓLIDA y es un poco más FRESCO .

Entonces, lo que puede hacer es definir una styles.xml de styles.xml en styles.xml para NavigationView de la siguiente manera:

    <style name="ThemeOverlay.AppCompat.navTheme">

        <!-- Color of text and icon when SELECTED -->
        <item name="colorPrimary">@color/color_of_your_choice</item> 

        <!-- Background color when SELECTED -->
        <item name="colorControlHighlight">@color/color_of_your_choice</item> 

    </style>

ahora aplique este ThemeOverlay a la app:theme atributo de app:theme de NavigationView, así:

<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:theme="@style/ThemeOverlay.AppCompat.navTheme"
app:headerLayout="@layout/drawer_header"
app:menu="@menu/menu_drawer">

Espero que esto sea de ayuda.

Answer 5

Es necesario establecer NavigateItem marcado como verdadero cada vez que se hace clic en un elemento de NavigateView

//listen for navigation events
NavigationView navigationView = (NavigationView)findViewById(R.id.navigation);
navigationView.setNavigationItemSelectedListener(this);
// select the correct nav menu item
navigationView.getMenu().findItem(mNavItemId).setChecked(true);

Agregar NavigationItemSelectedListener en NavigationView

  @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;
  }