Si bien tu app solo puede contener texto y color, te recomendamos 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, junto con diversas bibliotecas para crear efectos gráficos o agregar movimiento.
Un recurso de Android se conoce como un 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.
- Usa los formatos vectoriales primero siempre que sea posible.
- Proporciona recursos para los intervalos de resolución.
- Proporciona suficiente lámina entre las imágenes de fondo y el texto.
- Si bien Android puede lograr diferentes efectos de imagen, como gradientes, coloración y desenfoque, algunos son más costosos de rendimiento.
- Los elementos de diseño vectoriales animados proporcionan un formato escalable para animaciones de IU pequeñas.
Cómo exportar recursos para Android
- Escribe los nombres de los recursos en minúsculas.
- Establece recursos simplistas para exportar como SVG.
- Configura imágenes complejas, como fotos, para exportarlas en formato WebP, PNG o JPG.
- Configura la escala de resolución correcta como se muestra en la siguiente tabla.
| Tamaño de pantalla | Escala |
|---|---|
mdpi |
1 vez |
hdpi |
150% |
xhdpi |
2 veces |
xxhdpi |
3 veces |
xxxhdpi |
4 veces |
También puedes convertir SVG en elementos de diseño vectoriales (VD) con Android Studio. Organiza los recursos en directorios correspondientes a la resolución para la transferencia, como se muestra en la siguiente imagen. Por ejemplo, incluye el tamaño de 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 ajusta. Se componen de puntos matemáticos que se rellenan para crear una imagen.
Formatos vectoriales
Android admite los siguientes formatos de imagen vectorial: SVG y elementos de diseño vectoriales.
Los elementos de diseño vectoriales son similares a los SVG, pero se basan en XML. También admiten varios atributos, como gradientes. Para obtener más información sobre lo que se admite, consulta VectorDrawable. Puedes convertir SVG en elementos de diseño vectoriales mediante Vector Asset Studio.
Casos de uso
Debido a su pequeño tamaño, es mejor 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 dirigir a los usuarios, explicar conceptos o expresar ideas. Por lo general, expresan el estilo de la marca.
- Las ilustraciones hero hacen énfasis en el resto del contenido, y se usan para definir la apariencia general y explicar la información principal.
- Las ilustraciones puntuales son más pequeñas, suelen estar intercaladas y admiten el contenido que las rodea.
Trama
Un gráfico con pérdidas, o uno que pierde detalles cuando se manipula a través de la compresión o el ajuste de tamaño, se compone de píxeles que forman la imagen. Los gráficos de trama se usan comúnmente para imágenes detalladas, como fotos o gradientes complejos. Dado que pierden detalles cuando se ajustan, exporta varias resoluciones de estas imágenes.
Formatos de trama
Android admite los siguientes formatos de imagen de trama: PNG, GIF, JPG y WebP.
Casos de uso
Los casos de uso incluyen imágenes con una variedad de texturas que dan como resultado una paleta de colores y una gradación amplias, o imágenes que tendrían un conjunto demasiado complejo de puntos Bézier. Los casos de uso también pueden incluir recursos de fotos muy detallados, como fotos del producto, detalles de la ubicación 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 buckets de densidad de pantalla. El sistema operativo muestra automáticamente el gráfico correcto en el dispositivo en cuestión mediante estos buckets. Proporciona recursos para cada bucket para garantizar que los gráficos de alta fidelidad se muestren en todos los dispositivos.
Padding
Los íconos y recursos pequeños similares deben incluir padding intrínseco (integrado) para darle al recurso suficiente espacio en el objetivo táctil y garantizar un tamaño coherente.
Nombres de los archivos
Los recursos de Android están en minúscula y no incluyen un sufijo de resolución.
Mantén una convención de nomenclatura y estructura coherentes para mantener tus archivos y proyectos organizados. Por ejemplo, nombrar í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 de selector se encuentran en la pantalla principal. Encuentra íconos monocromáticos en la IU del sistema, incluidas las notificaciones, la barra de estado y los widgets.
Aplica formato a los íconos de apps como elementos de diseño vectoriales para íconos adaptables y PNG para íconos heredados. Para obtener más información sobre cómo crear el ícono de la app y obtener una vista previa de él, consulta Cómo diseñar y obtener 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 incluye el ícono de la app mientras esta se abre.
Ubicación
Ten en cuenta cómo las imágenes deben escalarse y posicionarse en la pantalla. Las opciones Fit, Crop, FillHeight, FillWidth, FillBounds, Inside y None están disponibles para configurar el escalamiento en una imagen.
También puedes recortar imágenes a una forma para crear efectos adicionales.
Recorte responsivo
Para mostrar imágenes de manera 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:
- Mantén una proporción fija.
- Adáptate 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.
Adáptate a diferentes proporciones
Las proporciones de las imágenes pueden cambiar si se adaptan a diferentes rangos de puntos de interrupción. Por ejemplo, en la figura 9, la relación 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 gradientes. Usa los pinceles de gradiente integrados para lograr diferentes efectos. Estos pinceles te permiten especificar la lista de colores a partir de la cual te gustaría crear un gradiente.
Los pinceles de gradientes pueden aplicar gradientes más avanzados, ya que agregan paradas de color y mosaicos, siempre que proporciones la lista de colores y porcentajes en los que se produce la parada. Usa contenedores o formas para recortar gradientes, rellenos de colores sólidos 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 los desenfoques con cuidado, ya que pueden afectar el rendimiento y solo están disponibles en dispositivos que ejecutan Android 12 y versiones posteriores. Para obtener más información, consulta Cómo desenfocar una imagen componible.
Modos de fusión
Android es capaz de modificar imágenes a través de operaciones booleanas y modos de combinación similares que podrías encontrar en un software de diseño, como unir o multiplicar. Para obtener más información, consulta CombinaMode.
Tono
Usa modos de combinación y rellenos para ajustar el tono de los recursos. Esto te permite tener un solo recurso y aplicarle diferentes colores, lo que puede reducir la cantidad de recursos producidos.
Movimiento
Se pueden animar gráficos de manera programática para crear gráficos en movimiento en lugar de subir archivos de movimiento. Esto puede permitir una mayor flexibilidad y recursos de recursos más pequeños.
Los elementos de diseño vectoriales animados te permiten crear animaciones de IU pequeñas. De lo contrario, obtén más información sobre cómo animar con fotogramas clave en Compose. Para obtener más información sobre los efectos de imagen, consulta Cómo personalizar una imagen.