Cómo crear íconos de apps (Views)

Implementación de Jetpack Compose

En esta página, se incluye información sobre cómo crear y usar íconos de apps que es exclusiva de los diseños basados en vistas. Para obtener información más completa sobre cómo crear íconos de apps, consulta Crea íconos de apps, que abarca nuestro framework de IU recomendado.

Cómo crear un ícono de pestaña o barra de acciones

Usa Image Asset Studio para crear íconos de pestañas y barras de acciones para diseños basados en View.

Los íconos de barras de acciones son elementos gráficos que se disponen en una barra de acciones y representan elementos de acción individuales. Consulta Cómo agregar y controlar acciones, Barra de la app: material design{:.external} 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 con varias pestañas. Cada ícono de pestaña tiene dos estados: no seleccionado y seleccionado. Consulta Cómo crear vistas deslizantes con pestañas y Pestañas: Material Design para obtener más información.

Image Asset Studio dispone los íconos en los lugares correctos de los directorios res/drawable-<density>/.

Te recomendamos que uses el estilo de material design para los íconos de pestañas y barras de acciones, incluso si admites versiones anteriores de Android. Usa appcompat y otras bibliotecas de compatibilidad para 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 pestañas y barras de acciones. Los elementos de diseño vectoriales son apropiados para íconos simples y pueden reducir el tamaño de tu app.

Luego de abrir Image Asset Studio, puedes agregar un ícono de pestaña o barra de acciones siguiendo estos 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 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 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 aparecerá 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 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.

    • 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.

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

  4. Haz clic en Siguiente.

  5. 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.

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

  6. Haz clic en Finish.

    Image Asset Studio agrega las imágenes a las carpetas drawable según las diferentes densidades.

Cómo hacer referencia a un recurso de imagen en el código

Por lo general, 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:

  • En la mayoría de los casos, puedes hacer referencia a recursos de imagen como @drawable en código XML o Drawable en código Java.

    Por ejemplo, en el siguiente código XML de diseño, se muestra el elemento de diseño en un ImageView:

    <ImageView
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:src="@drawable/myimage" />

    El siguiente código Java permite recuperar la imagen como un Drawable:

    Kotlin

    val drawable = resources.getDrawable(R.drawable.myimage, theme)

    Java

    Resources res = getResources();
Drawable drawable = res.getDrawable(R.drawable.myimage, getTheme());

    El método getResources() reside en la clase Context, que se aplica a los objetos de IU, como actividades, fragmentos, diseños y vistas, entre otros.

  • Si tu app usa la biblioteca de compatibilidad, puedes hacer referencia a un recurso de imagen en código XML con una instrucción app:srcCompat. Por ejemplo:

    <ImageView
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    app:srcCompat="@drawable/myimage" />

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, podrás hacer referencia a él desde tu código Java o tu diseño XML usando su ID de recurso. El siguiente código Java establece un ImageView para usar el recurso drawable/myimage.png:

Kotlin

findViewById<ImageView>(R.id.myimageview).apply {
    setImageResource(R.drawable.myimage)
}

Java

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

Consulta Cómo acceder a los recursos de tu app para obtener más información.