Si bien tu app podría contener solo texto y color, es posible que quieras agregar más elementos visuales, como un logotipo o una ilustración. Android tiene prácticas recomendadas específicas para agregar gráficos a tu app, además de varias bibliotecas para crear efectos gráficos o agregar movimiento.
Un recurso de Android se conoce como elemento de diseño, un tipo de recurso que se dibuja en la pantalla. Esto incluye, entre otros, mapas de bits, formas y vectores.
Cuando crees imágenes y gráficos, ten en cuenta lo siguiente:
- Evita incluir texto inmutable en los recursos.
- Siempre que sea posible, usa primero los formatos vectoriales.
- Proporciona recursos para los buckets de resolución.
- Proporciona suficiente scrim entre las imágenes de fondo y el texto.
- Si bien Android puede lograr diferentes efectos de imagen, como degradados, coloración y desenfoques, algunos son más costosos en términos de rendimiento.
- Los elementos de diseño vectorial animados proporcionan un formato escalable para animaciones pequeñas de la IU.
Cómo exportar recursos para Android
- Formatea los nombres de los recursos en minúsculas.
- Configura recursos simplistas para exportarlos como SVG.
- Configura imágenes complejas, como fotos, para que se exporten como WebP, PNG o JPG.
- Establece el ajuste de resolución correcto, como se muestra en la siguiente tabla.
| Tamaño de pantalla | Escala |
|---|---|
mdpi |
x1 |
hdpi |
1.5 veces |
xhdpi |
x2 |
xxhdpi |
x3 |
xxxhdpi |
x4 |
De manera opcional, puedes convertir archivos SVG en elementos de diseño vectoriales (VD) con Android Studio. Organiza los recursos en directorios que correspondan a la resolución para la transferencia, como se muestra en la siguiente imagen. Por ejemplo, incluye el tamaño de la pantalla en los nombres de las carpetas.
Tipos de activos
Android admite los siguientes tipos de recursos.
Vector
Un gráfico vectorial es un formato sin pérdida, lo que significa que no pierde información visual cuando se escala. Los vectores se componen de puntos matemáticos que se rellenan para crear una imagen.
Formatos vectoriales
Android admite los siguientes formatos de imágenes vectoriales: SVG y VectorDrawable.
Los elementos VectorDrawable se parecen a los SVG, pero se basan en XML. También admiten varios atributos, como los gradientes. Para obtener más información sobre lo que se admite, consulta VectorDrawable. Puedes convertir archivos SVG en elementos de diseño vectoriales a través de Vector Asset Studio.
Casos de uso
Debido a su tamaño pequeño, lo mejor es crear íconos con un formato vectorial. Se puede usar un elemento de diseño vectorial animado para agregar movimiento a un ícono.
- Las ilustraciones son gráficos que ayudan a guiar a los usuarios, explicar conceptos o expresar ideas. Por lo general, expresan el estilo de la marca.
- Las ilustraciones de héroe tienen un gran énfasis entre el resto del contenido y se usan para establecer el aspecto general y explicar la información principal.
- Las ilustraciones de apoyo son más pequeñas, suelen ser intercaladas y complementan el contenido circundante.
Raster
Un gráfico con pérdida, o un gráfico que pierde detalles cuando se manipula a través de la compresión o el ajuste de escala, se compone de píxeles para formar la imagen. Los gráficos ráster se suelen usar para imágenes detalladas, como fotos o degradados complejos. Como pierden detalles cuando se ajusta su tamaño, exporta varias resoluciones de estas imágenes.
Formatos ráster
Android admite los siguientes formatos de imágenes rasterizadas: PNG, GIF, JPG y WebP.
Casos de uso
Los casos de uso incluyen imágenes que tienen una variedad de texturas que dan como resultado una amplia paleta de colores y gradación, o imágenes que tendrían un conjunto demasiado complejo de puntos de Bézier. Los casos de uso también podrían incluir recursos fotográficos muy detallados, como fotos de productos, detalles de ubicaciones y mucho más.
Tamaño
Cuando crees recursos, ten en cuenta las siguientes consideraciones.
Buckets de resolución
Tu app debe proporcionar gráficos de mapa de bits basados en rangos o discretizaciones de densidad de pantalla. El sistema operativo muestra automáticamente el gráfico correcto en el dispositivo en cuestión con estos segmentos. Proporciona recursos para cada intervalo y asegúrate de que se muestren gráficos de alta fidelidad en todos los dispositivos.
Padding
Los íconos y otros recursos pequeños similares deben incluir un relleno intrínseco (integrado) para proporcionarles suficiente espacio de destino táctil y garantizar un tamaño coherente.
Nombres de archivos
Los recursos de Android están en minúsculas y no incluyen un sufijo de resolución.
Mantén una convención de nomenclatura y una estructura coherentes para mantener organizados tus archivos y proyectos. Por ejemplo, nombrar los íconos con el prefijo "ic_…" puede ayudar a organizar todos los íconos de tu proyecto y a identificarlos rápidamente durante el desarrollo.
Otros recursos de aplicación
Íconos de apps
Los íconos del selector se encuentran en la pantalla principal. Encontrarás íconos monocromáticos en la IU del sistema, incluidas las notificaciones, la barra de estado y los widgets monocromáticos.
Da formato a los íconos de la app como elementos de diseño vectoriales para los íconos adaptables y como PNG para los íconos heredados. Para obtener más información sobre cómo crear y obtener una vista previa del ícono de tu app, consulta Diseña y obtén una vista previa de los íconos de tu app.
Pantallas de presentación
A partir de Android 12, tu app puede mostrar una pantalla de presentación animada que incluya el ícono de la app mientras se abre.
Ubicación
Observa cómo las imágenes deben ajustarse y posicionarse en la pantalla. Fit, Crop, FillHeight, FillWidth, FillBounds, Inside y None están disponibles para establecer el ajuste en una imagen.
También puedes recortar imágenes con una forma para crear efectos adicionales.
Recorte responsivo
Para mostrar imágenes de forma responsiva, define cómo se recortará una imagen en diferentes rangos de puntos de interrupción. En diferentes rangos de puntos de interrupción, el recorte puede hacer lo siguiente:
- Mantener una proporción fija
- Se adapta a diferentes proporciones.
- Mantén alturas de imagen fijas.
Mantener una proporción
El tamaño de la imagen puede mantener una proporción fija en los rangos de puntos de interrupción.
Cómo adaptarse a diferentes proporciones
Las relaciones de aspecto de las imágenes pueden cambiar adaptándose a diferentes rangos de puntos de interrupción. Por ejemplo, en la figura 9, la relación de aspecto de la imagen cambia de 1:1 a 16:9 entre los puntos de interrupción.
Alturas de imágenes fijas
El tamaño de la imagen puede mantener una altura fija y un ancho fluido en los rangos de puntos de interrupción y dentro de ellos. La imagen mantiene una altura fija, mientras que el ancho entre los puntos de interrupción es fluido.
Efectos
Android incluye varios efectos de imagen integrados. Estos son algunos efectos comunes:
Gradientes
En Compose, usa un Brush para dibujar algo en la pantalla. Se pueden usar diferentes pinceles para dibujar formas de diferentes colores o degradados. Usa los pinceles de gradiente integrados para lograr diferentes efectos de gradiente. Estos pinceles te permiten especificar la lista de colores a partir de la cual te gustaría crear un gradiente.
Los pinceles de gradiente pueden crear gradientes más avanzados agregando paradas de color y mosaicos, siempre y cuando proporciones la lista de colores y los porcentajes en los que se produce la parada. Usa contenedores o formas para recortar gradientes, rellenos de color sólido o imágenes.
Desenfoque
Aplica efectos de desenfoque a las imágenes con el método Modifier.blur() y proporciona las proporciones de desenfoque. Usa desenfoques con precaución, ya que pueden afectar el rendimiento y solo están disponibles en dispositivos con Android 12 y versiones posteriores. Para obtener más información, consulta Cómo desenfocar un elemento componible de imagen.
Modos de fusión
Android puede modificar imágenes a través de operaciones booleanas y modos de combinación similares a los que puedes encontrar en software de diseño, como unión o multiplicación. Para obtener más información, consulta BlendMode.
Tono
Usa modos de combinación y rellenos para teñir recursos. Esto te permite tener un solo recurso y aplicarle diferentes colores, lo que puede reducir la cantidad de recursos producidos.
Movimiento
Los gráficos se pueden animar de forma programática para crear gráficos de movimiento en lugar de subir archivos de movimiento. Esto puede permitir una mayor flexibilidad y recursos de activos más pequeños.
Las interfaces dibujables en vectores animadas te permiten crear pequeñas animaciones de la IU. De lo contrario, obtén más información para animar con fotogramas clave en Compose. Para obtener más información sobre los efectos de imagen, consulta Cómo personalizar una imagen.