Cuadrículas y unidades

Los píxeles independientes de la densidad (dp) y los píxeles escalables (sp) son esenciales para compilar diseños y presentar fuentes que respondan de manera uniforme a la amplia gama de densidades de pantalla, clases de tamaño, factores de forma y relaciones de aspecto que conforman los dispositivos Android.

Puck robado

  • Si usas una cuadrícula de referencia, respeta las medidas de 4 y 8.
  • Anota las especificaciones en dp y sp, en lugar de píxeles.
  • Exporta gráficos de mapa de bits o trama para todos los buckets.
  • Diseña con una mentalidad responsiva y ten en cuenta diferentes clases de tamaño, resoluciones y relaciones de aspecto.
  • Píxeles independientes de la densidad (dp): Los píxeles independientes de la densidad son unidades flexibles que escalan para tener dimensiones uniformes en cualquier pantalla. Se basan en la densidad física de la pantalla. Estas unidades son relativas a una pantalla de 160 dpi (puntos por pulgada), en la que 1 dp es aproximadamente 1 px.
  • Píxeles escalables (sp): Los píxeles escalables cumplen la misma función que dp, pero para las fuentes. El valor predeterminado de un sp es el mismo que el de un dp. El sistema Android calcula el tamaño de fuente real que se usará en función del dispositivo y la preferencia establecida por el usuario en la app de Configuración del dispositivo Android.
Figura 1: Cómo marcar dp en comparación con sp

La principal diferencia entre estas unidades de medida es que los píxeles escalables conservan la configuración de la fuente del usuario. Los usuarios que tienen configuraciones de texto más grandes para la accesibilidad ven que los tamaños de fuente coinciden con sus preferencias de tamaño de texto. Consulta cómo cambiar el tamaño de la fuente en Compose.

Android usa estas unidades para ayudar a escalar y traducir en una variedad de dispositivos y resoluciones.

Buckets de densidad

Las pantallas de alta densidad tienen más píxeles por pulgada que las de baja densidad. Como resultado, los elementos de la IU con las mismas dimensiones de píxeles aparecen más grandes en pantallas de baja densidad y más pequeños en pantallas de alta densidad. Por este motivo, no debes declarar las mediciones en píxeles.

Android agrupa rangos de densidades de pantalla en "buckets" y los usa para proporcionar el conjunto óptimo de recursos a tu dispositivo. Los buckets de densidad más usados son mdpi, hdpi, xhdpi, xxhdpi y xxxhdpi (nodpi y anydpi se refieren a un bucket que no se ajusta por resolución de dispositivo, que generalmente se usa para elementos de diseño vectoriales). Cada uno de ellos corresponde a un archivo de recursos de tu app.

Figura 2: Melón para fiestas en sus respectivas densidades

Para calcular dp, haz lo siguiente:

dp = (ancho en píxeles * 160) / densidad de pantalla

Cuadrículas

Cuadrícula de referencia

Compilar con una cuadrícula subyacente ayuda a crear un espaciado y una alineación coherentes en toda la IU. La IU de Android usa una cuadrícula de 8 dp para el diseño, los componentes y el espaciado.

Video 1: Se muestra una cuadrícula de 8 dp en la que se destacan los incrementos de 8 dp

Los elementos más pequeños, como los íconos, el tipo y algunos elementos dentro de los componentes, se alinean mejor con una cuadrícula de 4 dp.

Figura 3: Las cuadrículas de 8 dp son ideales para la mayoría de los elementos de la IU, mientras que una de 4 dp es mejor para elementos más pequeños, como íconos

Cuadrícula de columnas

Las columnas crean una estructura de cuadrícula para proporcionar definición vertical a un diseño mediante la división del contenido dentro del área del cuerpo. El contenido se coloca en las áreas de la pantalla que contienen columnas. Alinéate con una cuadrícula subyacente para alinear el contenido, pero debe mantener el tamaño flexible. Aprende los conceptos básicos para configurar una cuadrícula de columnas y aplicar contenido en Conceptos básicos de diseño.

Figura 4: Cuadrícula de cuatro columnas

Consulta la página Diseños canónicos de Material 3 para obtener detalles sobre cómo crear diseños flexibles en todos los factores de forma.

Clases de tamaño

Las clases de tamaño de ventana son un conjunto de puntos de interrupción de viewports bien definidos que te ayudan a diseñar, desarrollar y probar diseños de aplicaciones responsivos y adaptables. Android divide las clases de tamaño de ventana en 3: compacto, medio y expandido. Obtén más información en las clases de tamaño de ventana.

Relaciones de aspecto

Una relación de aspecto es la proporción entre el ancho y la altura de un elemento. Las relaciones de aspecto se escriben como ancho:alto.

Para mantener la coherencia en tu diseño, usa una relación de aspecto coherente en elementos como imágenes, superficies y tamaño de la pantalla.

Se recomienda usar las siguientes relaciones de aspecto en la IU:

  • 16:9
  • 3:2
  • 4:3
  • 1:1
  • 3:4
  • 2:3