Elementos de listas

Una vista de lista muestra contenido como elementos de una sola línea en una lista de una sola columna que se desplaza verticalmente. Esta vista funciona mejor cuando los usuarios confían en la lectura de texto y los datos para realizar su selección.

Los elementos de lista requieren menos espacio vertical que los elementos de cuadrícula, lo que permite que se muestren más elementos en la pantalla.


Anatomía

En una vista de lista, cada fila contiene un mosaico que representa un elemento de la lista. Las acciones principales pueden llenar la tarjeta para que los usuarios puedan iniciar acciones desde cualquier parte de ella. En el caso de las acciones complementarias representadas por íconos y texto, solo se puede usar la región que contiene los íconos y el texto.

1. Ícono principal
2. Botón del interruptor activado
3. Botón del interruptor desactivado
4. Texto principal y secundario
5. Mosaico de contenido

Especificaciones

Elemento de lista de una sola línea

Elemento de lista de dos líneas

Elemento de lista de dos líneas invertido

Elemento de lista de varias líneas con encabezado

Elemento de lista de varias líneas sin encabezado

Elemento de lista con desbordamiento de texto

Elemento de lista con acciones de división

Colocación del ícono indicador en los elementos de la lista


Cómo ajustar diseños

Estos diseños de referencia muestran cómo adaptar los elementos de la lista para que se adapten a pantallas de varios anchos y alturas. Las categorías de ancho y altura se definen en la sección Diseño. Ten en cuenta que todos los valores de píxeles están en píxeles renderizados, antes de que se realice cualquier reducción o sobremuestreo.

Pantallas estándar, anchas y extra anchas

Pantallas estándar, anchas y extra anchas con mosaico de contenido

Pantallas superanchos


Estilos

Tipografía

Estilo de la tipografía Tipo de letra Peso Tamaño (dp)
Cuerpo 1 Roboto Normal 32
Cuerpo 3 Roboto Normal 24

Color

Elemento Color(modo diurno) Color (modo nocturno)
Tipo principal / íconos White Blanco @ 88%
Íconos y tipo secundario Blanco al 72% Blanco al 60%
Línea divisoria Blanco @ 22% Blanco @ 12%
Fondo del elemento de la lista Negro Negro

Tamaño

Elemento Tamaño (dp)
Altura de elemento de lista 96 (pantallas cortas) / 116 (pantalla estándar) / 128 (pantalla alta)
Ícono principal 44
Ícono terciario 24
Mosaico de contenido Altura de elemento de lista menos 1 dp
Avatar mediano 76
Grosor de la línea divisoria 1

Ejemplos

Lista de configuración: día
Lista de configuración: noche
Lista de configuración: día
Lista de configuración: noche
Lista de medios: día
Lista de contenido multimedia: noche