El navigation drawer (literalmente cajón de navegación), es una pauta común que se encuentra en las apps de Google. Este navigation drawer se desliza desde la izquierda para mostrar su contenido.
Tipografía
- Roboto Medium, 14 sp, #FFFFFF
- Roboto Regular, 14 sp, #FFFFFF
- Ítem de la lista: Roboto Medium, 14 sp, 87% #000000
- Subencabezado: Roboto Medium, 14 sp, 54% #000000. Alineado una línea clave a 16 dp.
Líneas clave verticales y márgenes horizontales
Las líneas clave verticales para los iconos se encuentran a 16 dp desde los bordes izquierdo y derecho del navegador lateral y los iconos tienen un color #000000 con una opacidad del 54%.
El contenido asociado con un icono o avatar se alinea a 72 dp desde el borde izquierdo del navegador lateral.
La anchura del navigation drawer es igual a la anchura de la pantalla menos la altura de la action bar, o en este caso, de 56 dp desde el borde derecho de la pantalla. La anchura máxima del navigation drawer es de 320 dp.
Utiliza márgenes horizontales de 16 dp en móviles y 24 dp en tablets.
Elevación
El navigation drawer tiene una altura igual a la altura de la pantalla y se muestra bajo la status bar. Cualquier cosa debajo del navigation drawer se verá más oscura mediante una sombra. Todo el contenido se muestra visible bajo el manto de dicha sombra.
Navigation Drawer en Android
Estado de la selección
Después de que un ítem de una lista sea seleccionado, ese elemento se vuelve del ColorPrimary de la app (color principal) o del #000000 con una opacidad del 100% para indicar claramente que está seleccionado. El ripple táctil también lo destacará, para dejar aún más claro dicha selección.
Si el color del ripple táctil no proporciona suficiente contraste con tu ColorPrimary, utiliza un tono más oscuro de dicho color principal.
Divisores
Todos los divisores en el navigation drawer atraviesan todo el panel. Hay también un padding de 8 dp encima y debajo de cada divisor.
Contexto
Desplazamiento vertical (Scroll)
Ajustes y soporte
Los ajustes y soporte se ubican en la parte inferior de la lista, en línea con el resto del contenido.
Si el contenido de la lista del es demasiado largo, las dos opciones pueden fijarse en la parte inferior del panel sobre una superficie con una mayor elevación. Esta superficie solo se presenta mientras se está en la parte superior de la lista; cualquier desplazamiento cambiará inmediatamente la ubicación de la superficie, colocando las opciones al final de la lista, en línea con el resto de contenidos de la misma. El navigation drawer mantiene la posición en la que se quedó cuando se cierra y posteriormente se vuelve a abrir.
Puedes ver más información sobre Navigation Drawer en la página oficial de Google en inglés pulsando aquí.