android - studio - ¿Cómo personalizar el fondo del elemento y el color del texto del elemento dentro de NavigationView?
navigation view android studio tutorial (7)
Quiero lograr algo como esto que se muestra en los Documentos de diseño de materiales .
colorControlHighlight
se utiliza para el fondo en los elementos marcados.
Necesito personalizar:
- fondo sin marcar
- color de texto marcado
- color de texto sin marcar
Ahora, en la vista de navegación también puede proporcionar su propia vista de elementos.
Con el nuevo
appcompat-v7:23.1.0
puedes
establecer vistas personalizadas para los elementos a través de la aplicación: actionLayout o usando MenuItemCompat.setActionView ().
View view = View.inflate(context, R.layout.your_custom_nav_layout_item, null);
MenuItemCompat.setActionView(menuItem, view);
De esta manera, puede crear su propio diseño con TextView y cambiar los
backgrounds/colors/fonts
como lo desee.
Espero que esto haya sido útil :)
Source
Puede usar este código mediante programación:
int[][] states = new int[][] {
new int[] { android.R.attr.state_enabled}, // enabled
new int[] {-android.R.attr.state_enabled}, // disabled
new int[] {-android.R.attr.state_checked}, // unchecked
new int[] { android.R.attr.state_pressed} // pressed
};
int[] colors = new int[] {
Color.BLACK,
Color.RED,
Color.GREEN,
Color.BLUE
};
ColorStateList myList = new ColorStateList(states, colors);
nav_view.setItemIconTintList(myList);
Puedes hacerlo usando la siguiente declaración:
navigationView.setItemBackground(ContextCompat.getDrawable(CustomerHomeActivity.this, R.color.transparent));
Si desea cambiar solo un color de elemento de menú de su actividad basada en eventos, vea este blog de HANIHASHEMI:
https://hanihashemi.com/2017/05/06/change-text-color-of-menuitem-in-navigation-drawer/
private void setTextColorForMenuItem(MenuItem menuItem, @ColorRes int color) {
SpannableString spanString = new SpannableString(menuItem.getTitle().toString());
spanString.setSpan(new ForegroundColorSpan(ContextCompat.getColor(this, color)), 0, spanString.length(), 0);
menuItem.setTitle(spanString);
}
Método de llamada
setTextColorForMenuItem(item, R.color.colorPrimary);
Si trabajas con Xamarin Android prueba esto:
private void SetTextColorForMenuItem(IMenuItem menuItem, Android.Graphics.Color color)
{
SpannableString spanString = new SpannableString(menuItem.TitleFormatted.ToString());
spanString.SetSpan(new ForegroundColorSpan(color), 0, spanString.Length(), 0);
menuItem.SetTitle(spanString);
}
Método de llamada:
SetTextColorForMenuItem(navigationView.Menu.GetItem(0), Android.Graphics.Color.OrangeRed);
Usar colorControlHighlight es una buena solución para mí. Tenga en cuenta que con la última biblioteca de soporte, puede definir un tema (no solo el estilo) para cada widget; por ejemplo, puede definir colorControlHighlight en el tema NavigationView y esto no se aplicará al resto de widgets.
itemBackground
,
itemIconTint
y
itemTextColor
son simples atributos xml que se pueden establecer, aunque debe usar un prefijo personalizado en lugar del
android:
uno.
Ejemplo
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<!-- Other layout views -->
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:itemBackground="@drawable/my_ripple"
app:itemIconTint="#2196f3"
app:itemTextColor="#009688"
app:headerLayout="@layout/nav_header"
app:menu="@menu/drawer_view" />
</android.support.v4.widget.DrawerLayout>
Nota:
en este caso, el color del texto, el tinte del icono y el fondo son estáticos.
Si desea cambiar el color del texto (por ejemplo, rosa cuando no está marcado y verde azulado cuando está marcado), debe usar un
ColorStateList
.
Ejemplo
Cree un nuevo archivo * .xml en
/res/color
, nombremos
state_list.xml
, con el siguiente contenido:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- This is used when the Navigation Item is checked -->
<item android:color="#009688" android:state_checked="true" />
<!-- This is the default text color -->
<item android:color="#E91E63" />
</selector>
y luego simplemente referencialo así:
app:itemTextColor="@color/state_list"
Lo mismo ocurre con
itemIconTint
.
itemBackground
espera una identificación de recurso.
Ver los
docs
también.
NavigationDrawer (NavigationView) tiene tres opciones para la configuración de elementos marcados / seleccionados.
app:itemIconTint="@color/menu_text_color" //icon color
app:itemTextColor="@color/menu_text_color" //text color
app:itemBackground="@drawable/menu_background_color" //background
Color de icono y texto
Las primeras dos opciones (icono y texto) necesitan un recurso de lista de estado de color : https://developer.android.com/guide/topics/resources/color-list-resource.html .
Dicho recurso
menu_text_color
debe crearse en
res / color
.
El contenido de este archivo debería ser similar a:
<!-- res/color/menu_text_color.xml -->
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/colorWhite" android:state_checked="true" />
<item android:color="@color/colorBlack" android:state_checked="false"/>
</selector>
-
@color/colorWhite: recurso de color utilizado para el elemento marcado -
@color/colorBlack: recurso de color utilizado para el elemento no verificado
He creado un recurso para ambos, pero es posible crear dos archivos separados: uno para texto y otro para icono.
Fondo (itemBackground)
La opción de fondo necesita recursos dibujables en lugar de color, cada intento de configurar el color terminará por excepción. El recurso extraíble debe crearse en res / drawable y su contenido debe ser similar a:
<!-- res/drawable/menu_background_color.xml -->
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@android:color/transparent" android:state_checked="false"/>
<item android:drawable="@color/colorPrimary" android:state_checked="true"/>
</selector>
No hay necesidad de crear elementos dibujables que simulen el color (en otras soluciones vi tales propuestas, tal vez para la versión sdk más antigua), el color se puede usar directamente en este archivo.
En este archivo de ejemplo, estoy usando color transparente para el elemento no marcado y
colorPrimary
para el elemento marcado.
Solución de problemas y notas importantes
- En el recurso de fondo siempre use state_checked = "false" en lugar del predeterminado, con el color predeterminado no funcionará
- Para el menú dinámico / creado mediante programación, recuerde configurar los elementos como marcables :
Ejemplo de código (elemento de menú dinámico agregar):
menu.add(group_id, item_id, Menu.NONE, item_name).setCheckable(true).setChecked(false);
Si los elementos no se configurarán como verificables, el fondo no funcionará (el texto y el color de los iconos sorprendentes funcionarán como se esperaba).