Skip to content

Most visited

Recently visited

navigation

Crear íconos de apps con Image Asset Studio

Video

Píxeles independientes de la densidad

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 strings de texto. Genera un conjunto de íconos con la resolución apropiada para cada densidad de pantalla generalizada 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. En 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:

Acerca de Image Asset Studio

Image Asset Studio te permite crear diferentes tipos de íconos en distintas densidades y te muestra la ubicación exacta de tu proyecto en la que se dispondrán. Se incluyen herramientas para ajustar los íconos y agregar fondos. Además, puedes ver el resultado en un subpanel de vista previa, para asegurarte de que los íconos aparezcan exactamente como lo deseas. Gracias a estas herramientas, se puede optimizar enormemente el proceso de diseño e importación de íconos. En las siguientes secciones, se describen los tipos de íconos que puedes crear y las imágenes y el texto que puedes usar.

Íconos de Launcher

Un ícono de Launcher es un gráfico que representa tu app ante los usuarios. Tiene las siguientes atribuciones:

Image Asset Studio crea automáticamente íconos diferentes para las densidades de pantalla generalizadas recomendadas, como mdpi, hdpi, xhdpi, xxhdpi y xxxhdpi. De esta manera, se garantiza que tu ícono se muestre bien en diferentes pantallas y dispositivos. Permite disponer los íconos en los lugares correctos de los directorios res/mipmap-density/. También permite crear una imagen de 512 x 512 píxeles que sea apropiada para Google Play Store.

Te recomendamos usar el estilo de material design para estos íconos, incluso si admites versiones de Android anteriores.

Consulta Íconos de Launcher e Íconos de producto: Material design para obtener más información.

Íconos de barra de acciones y de pestañas;

Los íconos de barra de acciones son elementos gráficos que se disponen en la barra de acciones y representan elementos de acción individuales. Consulta Cómo agregar y manipular acciones, Barra de app: Material design y Diseño de la barra de acciones para obtener más información.

Los íconos de pestaña son elementos gráficos que se usan para representar pestañas específicas en una interfaz de varias pestañas. Cada ícono de pestaña tiene dos estados: no seleccionado y seleccionado. Consulta Creación de vistas deslizantes con pestañas y Pestañas: Material design para obtener más información.

Image Asset Studio crea automáticamente íconos diferentes para las densidades de pantalla generalizadas recomendadas, como mdpi, hdpi, xhdpi y xxhdpi. Permite disponer los íconos en los lugares correctos de los directorios res/drawable-density/.

Te recomendamos usar el estilo de material design para los íconos de barra de acciones y pestaña, incluso si admites versiones de Android anteriores. Usa appcompat y otras bibliotecas de compatibilidad a fin de ofrecer tu IU de material design para versiones anteriores de la plataforma.

Como alternativa a Image Asset Studio, puedes usar Vector Asset Studio para crear íconos de barra de acciones y de pestañas. Los elementos de diseño vectoriales son apropiados para íconos simples y pueden reducir el tamaño de tu APK.

Íconos de notificación

Una notificación es un mensaje que puedes mostrar al usuario fuera de la IU habitual de la app. Cuando indicas al sistema que emita una notificación, esta primero aparece como un ícono en el área de notificaciones. Para ver información detallada de la notificación, el usuario abre el panel lateral de notificaciones. Tanto el área de notificaciones como el panel lateral de notificaciones son áreas controladas por el sistema que el usuario puede ver en cualquier momento.

Image Asset Studio crea automáticamente íconos diferentes para las densidades de pantalla generalizadas recomendadas, como mdpi, hdpi, xhdpi y xxhdpi. Permite disponer los íconos en los lugares correctos de 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 en gris de tu ícono. Las versiones posteriores de Android usan el ícono blanco que genera Image Asset Studio.

Para obtener más información, consulta Notificaciones; Material design para notificaciones; Notificaciones, cambios en Android 5.0; Notificaciones, Android 4.4 y versiones anteriores e Íconos de la barra de estado, Android 3.0 y versiones anteriores.

Imágenes prediseñadas

Image Asset Studio facilita la importación de íconos de material de Google en formato PNG: simplemente selecciona 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 (no recomendado).

Cadenas de texto

Image Asset Studio te permite escribir una string de texto en diferentes fuentes y la dispone en un ícono. Convierte el ícono basado en texto en archivos PNG para diferentes densidades. Puedes usar las fuentes instaladas en tu computadora.

Ejecución de Image Asset Studio

Para iniciar Image Asset Studio, sigue estos pasos:

  1. En Android Studio, abre un proyecto de app de Android.
  2. En la ventana Project, selecciona la vista de Android.
  3. Selecciona la carpeta res y luego File > New > Image Asset.
  4. De forma alternativa, haz clic con el botón secundario en la carpeta res y selecciona New > Image Asset.

    Algunas otras vistas de proyecto y carpetas también cuentan con este elemento de menú.

    Aparecerá Image Asset Studio.

  5. Continúa con Creación de un ícono de Launcher, Creación de un ícono de barra de acciones o pestaña o Creación de un ícono de notificación.

Creación de un ícono de Launcher

Luego de abrir Image Asset Studio, puedes agregar un ícono de Launcher aplicando los siguientes pasos:

  1. En el campo Icon Type, selecciona Launcher Icons.
  2. Selecciona un Asset Type y luego especifica el recurso en el campo 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 Path, 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 aparece en el área Source Asset del lado derecho y en el área de vista previa, en la parte inferior del asistente.

  3. Si lo deseas, puedes modificar el nombre y la configuración 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 un mensaje error en la parte inferior del asistente), se sobrescribe. El nombre solo puede contener caracteres en minúscula, guión bajo 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 sin modificaciones el recurso de origen, selecciona No. Configuración predeterminada: 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, la operación de recorte se produce antes. Configuración predeterminada: 0%
    • Foreground: para modificar el color de primer plano de un ícono imágenes prediseñadas o texto, 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. Configuración predeterminada: 000000
    • Background: para modificar el color de segundo plano, 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. Configuración predeterminada: FFFFFF
    • Scaling: para ajustar el tamaño del ícono, selecciona Crop o Shrink to Fit. Con la opción Crop, se pueden recortar los bordes de la imagen. Con Shrink esto no sucede. Puedes ajustar el relleno, si es necesario, en caso de que el recurso de origen todavía no se ajuste bien. Configuración predeterminada: Shrink to Fit
    • Shape: para disponer un fondo detrás de tu recurso de origen, selecciona una forma (círculo, cuadrado, rectángulo vertical o rectángulo horizontal). En el caso de un fondo transparente, selecciona None. Configuración predeterminada: Square
    • Effect: si deseas agregar un efecto de doblez en la parte superior derecha de un cuadrado o un rectángulo, selecciona DogEar. De lo contrario, selecciona None. Configuración predeterminada: None

    Image Asset Studio dispone el ícono dentro de un cuadrado transparente para que haya más relleno en los bordes. El relleno ofrece un espacio adecuado para el efecto de ícono de sombra paralela estándar.

  4. Haz clic en Next.
  5. Como opción, puedes cambiar el directorio de recursos:
    • Res Directory: selecciona el conjunto de orígenes de recursos en el cual desees agregar el recurso de imagen (src/main/res, src/debug/res, src/release/res o un conjunto de orígenes definidos por el usuario). El conjunto de orígenes principal se aplica a todas las variantes de compilación, incluso la depuración y el lanzamiento. Los conjuntos de orígenes de depuración y lanzamiento anulan el conjunto de orígenes principales 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 nuevo de orígenes, 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 incluye el texto “BETA” en la esquina inferior derecha. Para obtener más información, consulta Configurar variantes de compilación.

    En el área Output Directories, se muestran las imágenes y las carpetas en las que aparecerán en la vista de archivos del proyecto de la ventana Project.

  6. Haz clic en Finish.
  7. Image Asset Studio agrega las imágenes a las carpetas mipmap según las diferentes densidades.

Creación de un ícono de barra de acciones o de pestaña

Luego de abrir Image Asset Studio, puedes agregar un ícono de barra de acciones o pestaña aplicando los siguientes pasos:

  1. En el campo Icon Type, selecciona Action Bar and Tab Icons.
  2. Selecciona un Asset Type y luego especifica el recurso en el campo 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 Path, 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 aparece en el área Source Asset del lado derecho y en el área de vista previa, en la parte inferior del asistente.

  3. 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 un mensaje error en la parte inferior del asistente), se sobrescribe. El nombre solo puede contener caracteres en minúscula, guión bajo 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 sin modificaciones el recurso de origen, selecciona No. Configuración predeterminada: 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, la operación de recorte se produce antes. Configuración predeterminada: 0%
    • Theme: selecciona HOLO_LIGHT o HOLO_DARK. Para especificar un color en el diálogo Select Color, selecciona CUSTOM y haz clic en el campo Custom color. Configuración predeterminada: None

    Image Asset Studio crea el ícono dentro de un cuadrado transparente para que haya más relleno en los bordes. El relleno ofrece un espacio adecuado para el efecto de ícono de sombra paralela estándar.

  4. Haz clic en Next.
  5. Como opción, puedes cambiar el directorio de recursos:
    • Res Directory: selecciona el conjunto de orígenes de recursos en el cual desees agregar el recurso de imagen (src/main/res, src/debug/res, src/release/res o un conjunto de orígenes definidos por el usuario). El conjunto de orígenes principal se aplica a todas las variantes de compilación, incluso la depuración y el lanzamiento. Los conjuntos de orígenes de depuración y lanzamiento anulan el conjunto de orígenes principales 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 nuevo de orígenes, 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 incluye el texto “BETA” en la esquina inferior derecha. Para obtener más información, consulta Configurar variantes de compilación.

    En el área Output Directories, se muestran las imágenes y las carpetas en las que aparecerán en la vista de archivos del proyecto de la ventana Project.

  6. Haz clic en Finish.
  7. Image Asset Studio agrega las imágenes de las carpetas drawable según las diferentes densidades.

Creación de un ícono de notificación

Luego de abrir Image Asset Studio, puedes agregar un ícono de notificación aplicando los siguientes pasos:

  1. En el campo Icon Type, selecciona Notification Icons.
  2. Selecciona un Asset Type y luego especifica el recurso en el campo 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 Path, 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 aparece en el área Source Asset del lado derecho y en el área de vista previa, en la parte inferior del asistente.

  3. 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 un mensaje error en la parte inferior del asistente), se sobrescribe. El nombre solo puede contener caracteres en minúscula, guión bajo 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 sin modificaciones el recurso de origen, selecciona No. Configuración predeterminada: 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, la operación de recorte se produce antes. Configuración predeterminada: 0%

    Image Asset Studio crea el ícono dentro de un cuadrado transparente para que haya más relleno en los bordes. El relleno ofrece un espacio adecuado para el efecto de ícono de sombra paralela estándar.

  4. Haz clic en Next.
  5. Como opción, puedes cambiar el directorio de recursos:
    • Res Directory: selecciona el conjunto de orígenes de recursos en el cual desees agregar el recurso de imagen (src/main/res, src/debug/res, src/release/res o un conjunto de orígenes definidos por el usuario). El conjunto de orígenes principal se aplica a todas las variantes de compilación, incluso la depuración y el lanzamiento. Los conjuntos de orígenes de depuración y lanzamiento anulan el conjunto de orígenes principales 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 nuevo de orígenes, 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 incluye el texto “BETA” en la esquina inferior derecha. Para obtener más información, consulta Configurar variantes de compilación.

    En el área Output Directories, se muestran las imágenes y las carpetas en las que aparecerán en la vista de archivos del proyecto de la ventana Project.

  6. Haz clic en Finish.
  7. Image Asset Studio agrega las imágenes en las carpetas drawable según las diferentes densidades y versiones.

Referencia a un recurso de imagen en el código

Normalmente, puedes hacer referencia a un recurso de imagen de manera genérica en tu código y, cuando se ejecuta tu app, se muestra automáticamente la imagen correspondiente según el dispositivo:

Puedes acceder a recursos de imagen desde el subproceso principal únicamente.

Una vez que cuentes con un recurso de imagen en el directorio res/ de tu proyecto, puedes hacer referencia a este desde tu código Java o tu diseño XML usando su ID de recurso. El siguiente código Java establece una ImageView para usar el recurso drawable/myimage.png:

ImageView imageView = (ImageView) findViewById(R.id.myimageview);
imageView.setImageResource(R.drawable.myimage);

Consulta Acceso a recursos para obtener más información.

En el caso de los íconos de Launcher, el archivo AndroidManifest.xml debe hacer referencia a la ubicación mipmap/. Image Asset Studio agrega este código automáticamente. El siguiente código de archivo de manifiesto hace referencia al ícono ic_launcher en el directorio mipmap/:

<application android:name="ApplicationTitle"
         android:label="@string/app_label"
         android:icon="@mipmap/ic_launcher" >

Eliminación de un ícono de un proyecto

Para quitar un ícono de un proyecto:

  1. En la ventana Project, selecciona la vista de Android.
  2. Expande la carpeta res/mipmap para un ícono de Launcher o la carpeta res/drawable para otros tipos de íconos.
  3. Localiza una subcarpeta que tenga el nombre del ícono que desees borrar.
  4. Esta carpeta contiene el ícono en diferentes densidades.

  5. Selecciona la carpeta y presiona la tecla Delete.
  6. De forma alternativa, selecciona Edit > Delete. También puedes hacer clic con el botón secundario y seleccionar Delete.

    Aparecerá el diálogo Safe Delete.

  7. 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.
  8. Android Studio borrará los archivos del proyecto y de la unidad. Sin embargo, si decides buscar á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 tu proyecto correctamente.

  9. Selecciona Build > Clean Project.
  10. Android Studio quita cualquier archivo de imagen generado que corresponda al recurso de imagen borrado. Lo quita del proyecto y de la unidad.

  11. Si es necesario, corrige cualquier error que continúe apareciendo debido a las partes de código que hacen referencia al recurso.
  12. Android Studio destaca estos errores en tu código. Una vez que quites todas las referencias de tu código, puedes volver a compilar tu proyecto correctamente.

This site uses cookies to store your preferences for site-specific language and display options.

Get the latest Android developer news and tips that will help you find success on Google Play.

* Required Fields

Hooray!

Browse this site in ?

You requested a page in , but your language preference for this site is .

Would you like to change your language preference and browse this site in ? If you want to change your language preference later, use the language menu at the bottom of each page.

This class requires API level or higher

This doc is hidden because your selected API level for the documentation is . You can change the documentation API level with the selector above the left navigation.

For more information about specifying the API level your app requires, read Supporting Different Platform Versions.

Take a short survey?
Help us improve the Android developer experience.
(Sep 2017 survey)