Los íconos ayudan a los usuarios a identificar tu app y las acciones dentro de ella. Según el tipo de ícono que crees, debes usar diferentes herramientas y bibliotecas:
- Íconos de selector y de notificación personalizados: Usa Image Asset Studio para generar íconos de selector adaptables y recursos de notificación que cumplan con requisitos específicos del sistema.
- Íconos de IU estándar: Usa la opción de imágenes prediseñadas en Image Asset Studio para agregar una imagen de la biblioteca de íconos de Material.
- Íconos de IU personalizados: Usa Vector Asset Studio para crear elementos gráficos vectoriales escalables para componentes como las barras de la parte superior de la app.
Acerca de Image Asset Studio
Android Studio incluye una herramienta llamada Image Asset Studio que te permite generar tus propios íconos de apps a partir de íconos de Material, imágenes personalizadas y cadenas de texto. Genera un conjunto de íconos con la resolución apropiada para cada densidad de píxel que sea compatible con tu app.
Image Asset Studio dispone los íconos generados recientemente en carpetas específicas según la densidad en el directorio res/ de tu proyecto. Durante el tiempo de ejecución, Android usa el recurso apropiado según la densidad de pantalla del dispositivo en el que se ejecuta tu app.
Image Asset Studio te permite generar los siguientes tipos de íconos:
- Íconos de selector
- Íconos de notificaciones
Para generar íconos personalizados de la barra de la app, usa Vector Asset Studio. En las siguientes secciones, se describen los tipos de íconos que puedes crear, así como las imágenes y el texto que puedes usar con Image Asset Studio.
Íconos de selector adaptativos y heredados
Un ícono de selector es un gráfico que representa tu app ante los usuarios. Puede hacer lo siguiente:
- Aparece en la lista de apps instaladas en un dispositivo y en la pantalla principal.
- Representa combinaciones de teclas para tu app (por ejemplo, un ícono de combinación de teclas de contacto que permite abrir la información detallada de un contacto).
- Pueden usarlo las apps de Launcher.
- Permite que los usuarios encuentren tu app en Google Play.
Los íconos de selector adaptables pueden mostrarse con distintas formas en los diferentes modelos de dispositivos. Image Asset Studio genera vistas previas de un ícono adaptable en forma de círculo, cuadrado con esquinas redondeadas, cuadrado redondeado y cuadrado, además de una vista previa completa del ícono. Image Asset Studio también genera vistas previas heredadas, redondas y de Google Play Store del ícono.
Un ícono de selector heredado es un gráfico que representa tu app en la pantalla principal de un dispositivo y en la ventana del selector. Los íconos de selector heredados están diseñados para su uso en dispositivos con Android 7.1 (nivel de API 25) o versiones anteriores, que no admiten íconos adaptables y no se muestran como formas variables en los modelos de dispositivos. Te recomendamos que uses el estilo de Material Design para los íconos de selector, incluso si admites versiones anteriores de Android.
Image Asset Studio dispone los íconos en los lugares correctos de los directorios res/mipmap-<density>/. También permite crear una imagen de 512 × 512 píxeles que sea apropiada para Google Play Store.
En el caso de los íconos de selector, el archivo AndroidManifest.xml debe hacer referencia a la ubicación mipmap/. Image Asset Studio agregará este código automáticamente. El siguiente código de archivo de manifiesto hace referencia al ícono ic_launcher del directorio mipmap/:
<application android:name="ApplicationTitle"
android:label="@string/app_label"
android:icon="@mipmap/ic_launcher" >
Consulta Íconos de selector adaptables e Íconos de producto: Material Design para obtener más información.
Íconos de notificaciones
Una notificación es un mensaje que puedes mostrarle al usuario fuera de la IU habitual de la app. Image Asset Studio dispone los íconos de notificaciones en los lugares correctos de los directorios res/drawable-<density>/:
- Los íconos para Android 3 (nivel de API 11) y versiones posteriores se disponen en los directorios
res/drawable-<density>-v11/. - Los íconos para Android 2.3 a 2.3.7 (nivel de API 9 a 10) se disponen en los directorios
res/drawable-<density>-v9/. - Los íconos para Android 2.2 (nivel de API 8) y versiones anteriores se disponen en los directorios
res/drawable-<density>/.
Si tu app es compatible con Android 2.3 a 2.3.7 (nivel de API 9 a 10), Image Asset Studio genera una versión gris del ícono. Las versiones posteriores de Android usan el ícono blanco que genera Image Asset Studio.
Para obtener más información, consulta Acerca de las notificaciones y Notificaciones de Material Design.
Imágenes prediseñadas
Image Asset Studio te permite importar íconos de Material de Google en formatos VectorDrawable y PNG seleccionando un ícono de un diálogo. Para obtener más información, consulta Íconos de Material.
Imágenes
Puedes importar tus propias imágenes y ajustarlas para el tipo de ícono. Image Asset Studio admite los siguientes tipos de archivos: PNG (preferido), JPG (aceptable) y GIF (desaconsejado).
Cadenas de texto
Image Asset Studio te permite escribir una cadena de texto en diferentes fuentes y colocarla en un ícono. Convierte el ícono basado en texto en archivos PNG para diferentes densidades. Puedes usar las fuentes instaladas en tu computadora.
Cómo ejecutar Image Asset Studio
Para iniciar Image Asset Studio, sigue estos pasos:
- En la ventana Project, selecciona la vista de Android.
Haz clic con el botón derecho en la carpeta res y selecciona New > Image Asset.
Para continuar, sigue los pasos que se indican a continuación:
Cómo crear íconos de selector adaptables y heredados
Después de abrir Image Asset Studio, puedes agregar íconos adaptables y heredados siguiendo estos pasos:
- En el campo Icon Type, selecciona Launcher Icons (Adaptive & Legacy).
- En la pestaña Foreground Layer, selecciona un Asset Type y, luego, especifica el activo en el campo que aparece a continuación:
- Selecciona Image para especificar la ruta de acceso de un archivo de imagen.
- Selecciona Clip Art para especificar una imagen del conjunto de íconos de Material Design.
- Selecciona Text para especificar una string de texto y selecciona una fuente.
- En la pestaña Background Layer, selecciona un Asset Type y, luego, especifica el activo en el campo que aparece a continuación. Puedes seleccionar un color o especificar una imagen para usar como capa de fondo.
- En la pestaña Monochrome Layer, selecciona un Asset Type (Image, Clip Art o Text), o bien permite que Android Studio reutilice de forma predeterminada el mismo recurso que la capa de primer plano.
- En la pestaña Options, revisa la configuración predeterminada y confirma que deseas generar íconos heredados, redondos y de Google Play Store.
- Si lo deseas, cambia el nombre y la configuración de visualización de las pestañas Foreground Layer y Background Layer:
- Name: Si no deseas usar el nombre predeterminado, escribe uno nuevo. Si ese nombre de recurso ya existe en el proyecto (esto se indica con un mensaje error en la parte inferior del asistente), se sobrescribirá. El nombre solo puede contener caracteres en minúscula, guiones bajos y números.
- Trim: Para ajustar el margen entre el gráfico y el borde del ícono en el recurso de origen, selecciona Yes. Mediante esta operación, se quita el espacio transparente, pero se conserva la relación de aspecto. Para dejar el recurso de origen como estaba, selecciona No.
- Color: Para cambiar el color de un ícono de Clip Art o Text, haz clic en el campo. En el diálogo Select Color, especifica un color y haz clic en Choose. El nuevo valor aparecerá en el campo.
- Resize: Usa el control deslizante para especificar un factor de escala porcentual a fin de cambiar el tamaño de un ícono de Image, Clip Art o Text. Este control está inhabilitado para la capa de fondo cuando especificas un tipo de recurso de Color.
- Haz clic en Siguiente.
- También puedes cambiar el directorio de recursos. Selecciona el conjunto de orígenes de recursos en el que desees agregar el recurso de imagen: src/main/res, src/debug/res, src/release/res o un conjunto de orígenes personalizado. El conjunto de orígenes principal se aplica a todas las variantes de compilación, incluso a la depuración y al lanzamiento. Los conjuntos de orígenes de depuración y lanzamiento anulan el conjunto de orígenes principal y se aplican a una versión de una compilación. El conjunto de orígenes de depuración solo se emplea para depuración. Para definir un conjunto de orígenes nuevo, selecciona File > Project Structure > app > Build Variants > Build Types. Por ejemplo, puedes definir un conjunto de fuentes beta y crear una versión de un ícono que incluya el texto "BETA" en la esquina inferior derecha. Para obtener más información, consulta Cómo configurar variantes de compilación.
- Haz clic en Finish. Image Asset Studio agregará las imágenes a las carpetas mipmap según las diferentes densidades.
Vista previa de los temas para íconos de apps
Android Studio te permite obtener una vista previa del tema del ícono de la app y probar cómo se adapta al color del fondo de pantalla del usuario. Para obtener una vista previa del ícono de la app con tema, abre el archivo launcher.xml que define tu ícono y, luego, usa el selector IU del sistema Mode en la barra de herramientas para cambiar el fondo de pantalla y ver cómo reacciona el ícono.
Si deseas obtener más información para crear temas de íconos de apps, consulta Íconos adaptables.
Cómo crear un ícono de notificación
Luego de abrir Image Asset Studio, puedes agregar un ícono de notificación mediante los siguientes pasos:
- En el campo Icon Type, selecciona Notification Icons.
- Selecciona un Asset Type y, luego, especifica el recurso en el campo que aparece a continuación:
- En el campo Clip Art, haz clic en el botón. En el diálogo Select Icon, selecciona un ícono de Material y haz clic en OK.
- En el campo Ruta, especifica la ruta de acceso y el nombre de archivo de la imagen. Haz clic en … para usar un diálogo.
- En el campo Text, ingresa una string de texto y selecciona una fuente. El ícono aparecerá en el área Source Asset del lado derecho y en el área de vista previa, en la parte inferior del asistente.
- Si lo deseas, puedes modificar el nombre y las opciones de visualización:
- Name: Si no deseas usar el nombre predeterminado, escribe uno nuevo. Si ese nombre de recurso ya existe en el proyecto (esto se indica con una advertencia en la parte inferior del asistente), se sobrescribirá. El nombre solo puede contener caracteres en minúscula, guiones bajos y números.
- Trim: Para ajustar el margen entre el gráfico y el borde del ícono en el recurso de origen, selecciona Yes. Mediante esta operación, se quita el espacio transparente, pero se conserva la relación de aspecto. Para dejar el recurso de origen como estaba, selecciona No.
- Padding: Si deseas ajustar el relleno del recurso de origen en los cuatro lados, mueve el control deslizante. Selecciona un valor entre -10% y 50%. Si también seleccionas Trim, se producirá antes la operación de recorte.
- Haz clic en Siguiente.
- Como opción, puedes cambiar el directorio de recursos:
- Res Directory: Selecciona el conjunto de orígenes de recursos en el que desees agregar el recurso de imagen (src/main/res, src/debug/res, src/release/res o un conjunto de orígenes definido por el usuario). El conjunto de orígenes principal se aplica a todas las variantes de compilación, incluso a la depuración y al lanzamiento. Los conjuntos de orígenes de depuración y lanzamiento anulan el conjunto de orígenes principal y se aplican a una versión de una compilación. El conjunto de orígenes de depuración solo se emplea para depuración. Para definir un conjunto de orígenes nuevo, selecciona File > Project Structure > App > Build Types. Por ejemplo, puedes definir un conjunto de orígenes beta y crear una versión de un ícono que incluya el texto "BETA" en la esquina inferior derecha. Para obtener más información, consulta Cómo configurar variantes de compilación.
- Haz clic en Finish. Image Asset Studio agrega las imágenes en las carpetas drawable según las diferentes densidades y versiones.
Cómo hacer referencia a recursos de imagen
Para obtener información sobre cómo hacer referencia a recursos de íconos, consulta Recursos en Compose. Para obtener información sobre cómo hacer referencia a gráficos a todo color o imágenes más complejas, consulta Cómo cargar imágenes.
Cómo borrar un ícono de un proyecto
Para quitar un ícono de un proyecto:
- En la ventana Project, selecciona la vista de Android.
- Expande la carpeta res/mipmap en el caso de un ícono de selector o la carpeta res/drawable para otros tipos de íconos.
- Ubica una subcarpeta que tenga el nombre del ícono que desees borrar. Esta carpeta contiene el ícono en diferentes densidades.
- Selecciona la carpeta y presiona la tecla Delete. También puedes seleccionar Editar > Borrar o hacer clic con el botón derecho en el archivo y seleccionar Borrar. Aparecerá el diálogo Safe Delete.
- Si lo deseas, puedes seleccionar opciones para determinar el área de tu proyecto en la que se usa el ícono y hacer clic en OK. Android Studio borrará los archivos del proyecto y de la unidad. Sin embargo, si decides buscar las áreas del proyecto en las que se usen los archivos y se detecten algunos usos, puedes verlas y decidir si deseas borrarlos. Debes borrar o reemplazar estas referencias para poder compilar correctamente tu proyecto.
- Selecciona Build > Clean Project. Android Studio quitará cualquier archivo de imagen generado que corresponda al recurso de imagen borrado. Lo quitará del proyecto y de la unidad.
- Si es necesario, corrige cualquier error que continúe apareciendo debido a las partes de código que hacen referencia al recurso. Android Studio destacará estos errores en tu código. Una vez que quites todas las referencias de tu código, podrás volver a compilar correctamente tu proyecto.