Un ícono adaptable, o AdaptiveIconDrawable
, puede mostrarse de manera diferente según las capacidades individuales del dispositivo y el tema del usuario. Los íconos adaptables se usan principalmente en el selector en la pantalla principal, pero también se pueden usar en accesos directos, la app de Configuración, los diálogos de uso compartido y la pantalla de descripción general.
Un ícono adaptable puede adaptarse a diferentes casos de uso:
Diferentes formas: Un ícono adaptable puede mostrar diferentes formas en distintos modelos de dispositivos. Por ejemplo, puede mostrar una forma circular en un dispositivo OEM y un cuadrado con esquinas redondeadas (una forma entre un cuadrado y un círculo) en otro dispositivo. Cada OEM de dispositivo debe proporcionar una máscara, que el sistema usa para renderizar todos los íconos adaptables con la misma forma.
Efectos visuales: Un ícono adaptable admite una variedad de efectos visuales atractivos, que se muestran cuando los usuarios colocan o mueven el ícono por la pantalla principal.
Uso de temas del usuario: A partir de Android 13 (nivel de API 33), los usuarios pueden agregar temas a sus íconos adaptables. Si un usuario habilita los íconos temáticos de apps activando el botón de activación Íconos temáticos en la configuración del sistema y el selector admite esta función, el sistema usará el color del fondo de pantalla y el tema que haya elegido el usuario para determinar el color del tono.
En las siguientes situaciones, la pantalla principal no muestra el ícono temático de la app, sino el ícono adaptable o estándar de la app:
- Si el usuario no habilita los íconos temáticos de apps.
- Si tu app no proporciona un ícono monocromático de esta.
- Si el Selector no es compatible con los íconos temáticos de apps.
Cómo diseñar íconos adaptables
Para asegurarte de que tu ícono adaptable sea compatible con diferentes formas, efectos visuales y temas del usuario, el diseño debe cumplir con los siguientes requisitos:
Debes proporcionar dos capas para la versión en color del ícono: una para el primer plano y otra para el fondo.
Si deseas admitir el uso de temas del usuario de los íconos de la app, proporciona una sola capa para la versión monocromática del ícono.
Ajusta el tamaño de todas las capas a 108 x 108 dp.
Usa íconos con bordes limpios. Las capas no deben tener máscaras ni sombras de fondo alrededor del contorno del ícono.
Usa un logotipo que sea de, al menos, 48 x 48 dp. No debe exceder los 66 dp x 66 dp, ya que los 66 dp x 66 dp internos del ícono aparecen dentro del viewport enmascarado.
Los 18 dp externos de cada uno de los cuatro lados de las capas están reservados para el enmascaramiento y la creación de efectos visuales como el paralaje o el destello.
Para aprender a crear íconos adaptables con Android Studio, consulta nuestra plantilla de Figma para íconos de apps para Android o la documentación de Android Studio sobre cómo crear íconos de selector. Además, consulta la entrada de blog Cómo diseñar íconos adaptables.
Cómo agregar el ícono adaptable a la app
Para agregar un ícono adaptable a tu app, actualiza el atributo android:icon
en el manifiesto de la app para especificar un recurso de elemento de diseño. También puedes definir un recurso de elemento de diseño del ícono con el atributo android:roundIcon
, pero solo si necesitas un recurso de ícono diferente para las máscaras circulares (por ejemplo, si la marca se basa en una forma circular).
En el siguiente fragmento de código, se ilustran ambos atributos, pero la mayoría de las apps solo especifican android:icon
:
<application ... android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" ...> </application>
A continuación, en res/mipmap-anydpi-v26/ic_launcher.xml
, crea recursos de elementos de diseño alternativos en tu app para retrocompatibilidad con Android 8.0 (nivel de API 26). Usa el elemento <adaptive-icon>
para definir los elementos de diseño de capas monocromáticas, en primer plano y en segundo plano para tus íconos. Los elementos internos <foreground>
, <background>
y <monochrome>
admiten el atributo android:drawable
.
En el siguiente ejemplo, se muestra cómo definir los elementos <foreground>
, <background>
y <monochrome>
dentro de <adaptive-icon>
:
<?xml version="1.0" encoding="utf-8"?> ... <adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android"> <background android:drawable="@drawable/ic_launcher_background" /> <foreground android:drawable="@drawable/ic_launcher_foreground" /> // Starting with Android 13 (API level 33), you can opt-in to providing a // <monochrome> drawable. <monochrome android:drawable="@drawable/ic_launcher_monochrome" /> </adaptive-icon> ...
También puedes delimitar los elementos de diseño como elementos con los elementos <foreground>
, <background>
y <monochrome>
. En el siguiente fragmento, se muestra un ejemplo de cómo hacer esto con el elemento de diseño en primer plano.
<?xml version="1.0" encoding="utf-8"?> ... <foreground> <inset android:insetBottom="18dp" android:insetLeft="18dp" android:insetRight="18dp" android:insetTop="18dp"> <shape android:shape="oval"> <solid android:color="#0000FF" /> </shape> </inset> </foreground> ...
Si quieres aplicar la misma máscara y el mismo efecto visual a tus atajos que los íconos adaptables normales, usa una de las siguientes técnicas:
- Para accesos directos estáticos, usa el elemento
<adaptive-icon>
. - Para accesos directos dinámicos, llama al método
createWithAdaptiveBitmap()
cuando los crees.
Para obtener más información sobre la implementación de íconos adaptables, consulta Cómo implementar íconos adaptables. Para obtener más información sobre los accesos directos, consulta Descripción general de los accesos directos a aplicaciones.
Recursos adicionales
Consulta los siguientes recursos para obtener información adicional sobre el diseño y la implementación de íconos adaptables.
- Plantilla de página de la comunidad de Figma
- Conoce más sobre los íconos adaptables de Android
- Diseña íconos adaptables
- Implementa íconos adaptables
- Cómo crear íconos de apps en Android Studio
- Especificaciones de diseño de íconos de Google Play