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 forma uniforme a la amplia variedad de densidades de pantalla, clases de tamaño, factores de forma y relaciones de aspecto que conforman los dispositivos Android.
Conclusiones
- Si usas una cuadrícula de referencia, cíñete a las mediciones de 4 y 8.
- Anota las especificaciones en dp y sp, en lugar de píxeles.
- Exporta gráficos de mapa de bits o de 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 se 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 tienen la misma función que los dp, pero para las fuentes. El valor predeterminado de un sp es el mismo que el valor predeterminado de un dp. El sistema Android calcula el tamaño real de la fuente que se usará en función del dispositivo y la preferencia establecida por el usuario en la app de configuración de su dispositivo Android.
La principal diferencia entre estas unidades de medida es que los píxeles escalables preservan la configuración de la fuente de un usuario. Los usuarios que tienen una configuración de texto más grande para la accesibilidad ven que los tamaños de fuente coinciden con sus preferencias de tamaño de texto. Obtén información para cambiar el tamaño de la fuente en Compose.
Android usa estas unidades para ayudar a escalar y traducir en el rango 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 de las mismas dimensiones de píxeles se ven más grandes en pantallas de baja densidad y más pequeños en pantallas de alta densidad. Por este motivo, no debes declarar medidas en píxeles.
Android agrupa rangos de densidades de pantalla en "buckets" y los usa para entregar 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 del dispositivo, que se usa generalmente para elementos vectoriales de diseño). Cada uno corresponde a un archivo de recursos de tu app.
Para calcular el dp, sigue estos pasos:
dp = (ancho en píxeles × 160) / densidad de la 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 utiliza una cuadrícula de 8 dp para el diseño, los componentes y el espaciado.
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.
Cuadrícula de columnas
Las columnas crean una estructura de cuadrícula para proporcionar definición vertical a un diseño dividiendo el contenido dentro del área del cuerpo. El contenido se coloca en las áreas de la pantalla que contienen columnas. Alinea el contenido con una cuadrícula subyacente, pero mantén el tamaño flexible. Aprende los conceptos básicos para configurar una cuadrícula de columnas y aplicar contenido en Conceptos básicos del diseño.
Consulta la página Diseños canónicos de Material 3 para obtener detalles sobre la creación de 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: compacta, mediana y expandida. Obtén más información sobre 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 pantalla.
Se recomiendan las siguientes relaciones de aspecto para usar en tu IU:
- 16:9
- 3:2
- 4:3
- 1:1
- 3:4
- 2:3