Cómo agregar gráficos vectoriales de varias densidades (vistas)

Conceptos y la implementación de Jetpack Compose

Android Studio incluye una herramienta llamada Vector Asset Studio que te ayuda a agregar íconos de Material y a importar archivos de gráficos vectoriales redimensionables (SVG) y de Adobe Photoshop Document (PSD) a tu proyecto como recursos de elementos de diseño vectoriales. El uso de elementos de diseño vectoriales en lugar de mapas de bits reduce el tamaño de tu APK porque se puede cambiar el tamaño del mismo archivo para diferentes densidades de pantalla sin perder la calidad de la imagen. Para versiones anteriores de Android que no admiten elementos de diseño vectoriales, Vector Asset Studio puede, durante el tiempo de compilación, convertir tus elementos de diseño vectoriales en diferentes tamaños de mapa de bits para cada densidad de pantalla.

Acerca de Vector Asset Studio

Vector Asset Studio agrega un gráfico vectorial al proyecto como un archivo XML que describe la imagen. Mantener un archivo XML puede ser más sencillo que actualizar varios gráficos de trama en distintas resoluciones.

Android 4.4 (nivel de API 20) y las versiones anteriores no admiten elementos de diseño vectoriales. Si tu nivel mínimo de API se fija en uno de estos valores, tienes dos opciones al usar Vector Asset Studio: generar archivos de Portable Network Graphic (PNG) (predeterminada) o usar la técnica de compatibilidad con versiones anteriores en AndroidX.

Para ofrecer compatibilidad con versiones anteriores, Vector Asset Studio genera imágenes de trama del elemento de diseño vectorial. Los elementos de diseño de trama y vectoriales se empaquetan juntos en el APK. Puedes hacer referencia a los elementos de diseño vectoriales como Drawable en código Java o @drawable en código XML; cuando se ejecuta tu app, se muestra automáticamente la imagen de trama o vectorial correspondiente según el nivel de API.

Retrocompatibilidad en AndroidX

Esta técnica exige AndroidX 1.0 o versiones posteriores y un complemento de Android para Gradle 3.2 o versiones posteriores, y usa solo elementos de diseño vectoriales. La clase VectorDrawableCompat en AndroidX te permite admitir VectorDrawable en Android 2.1 (nivel de API 7) y versiones posteriores.

Antes de usar Vector Asset Studio, debes agregar una declaración a tu archivo build.gradle:

Groovy

android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

dependencies {
    implementation 'androidx.appcompat:appcompat:1.7.1'
}

Kotlin

android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

dependencies {
    implementation("androidx.appcompat:appcompat:1.7.1")
}

También debes usar técnicas de codificación de AndroidX para la retrocompatibilidad, como el uso del atributo app:srcCompat en lugar del atributo android:src para elementos de diseño vectoriales. Para obtener más información, consulta AndroidX.

Cómo agregar un elemento de diseño vectorial a un diseño

En un archivo de diseño, puedes configurar cualquier widget relacionado con el ícono, como ImageButton, ImageView, etcétera, para señalar un elemento de diseño vectorial. Por ejemplo, en el siguiente diseño, aparece un elemento de diseño vectorial que se muestra en un botón:

Figura 1. Elemento de diseño vectorial que se muestra en un botón de un diseño

Para mostrar un elemento de diseño vectorial en un widget, como en la figura, haz lo siguiente:

  1. Abre un proyecto e importa un elemento de diseño vectorial.

    En este ejemplo, se usa un proyecto para tablet o teléfono generado con el asistente de proyectos nuevos.

  2. En la vista Android de la ventana Project, haz doble clic en un archivo XML de diseño, como content_main.xml.

  3. Haz clic en la pestaña Design para mostrar el editor de diseño.

  4. Arrastra el widget ImageButton de la ventana Palette al editor de diseño.

  5. En el diálogo Resources, selecciona Drawable en el panel izquierdo y, luego, el elemento de diseño vectorial que importaste. Haz clic en OK.

    El elemento de diseño vectorial aparecerá en el ImageButton del diseño.

  6. Para cambiar el color de la imagen al color de los elementos destacados definido en el tema, en la ventana Properties, ubica la propiedad tint y haz clic en … .

  7. En el diálogo Resources, selecciona Color en el panel izquierdo y, luego, colorAccent. Haz clic en OK.

    El color de la imagen cambiará al color de énfasis en el diseño.

Si en el proyecto se usa AndroidX, el código ImageButton debe ser como el siguiente:

<ImageButton
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  app:srcCompat="@drawable/ic_build_black_24dp"
  tools:layout_editor_absoluteX="11dp"
  tools:layout_editor_absoluteY="225dp"
  android:id="@+id/imageButton"
  android:tint="@color/colorAccent" />

Si en el proyecto no se usa AndroidX, el código del elemento de diseño vectorial, en cambio, será android:src="@drawable/ic_build_black_24dp".

Cómo hacer referencia a un elemento de diseño vectorial en el código

Normalmente, puedes hacer referencia a un recurso de elemento de diseño vectorial de manera genérica en tu código y, cuando se ejecuta tu app, se muestra automáticamente la imagen vectorial o de trama correspondiente según el nivel de API:

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

    Por ejemplo, el siguiente código XML de diseño aplica la imagen en una vista:

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

    El siguiente código recupera 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 AndroidX (incluso si no tienes una declaración vectorDrawables.useSupportLibrary = true en tu archivo build.gradle), también puedes hacer referencia a un elemento de diseño vectorial con una declaración app:srcCompat. Por ejemplo:

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

  • En algunas ocasiones, es posible que debas encasillar el recurso de elementos de diseño en su clase exacta, como cuando debes usar funciones específicas de la clase VectorDrawable. Para ello, puedes usar un código como el siguiente:

    Kotlin

    if (Build.VERSION.SDK_INT &gt;= Build.VERSION_CODES.LOLLIPOP) {
  val vectorDrawable = drawable as VectorDrawable
} else {
  val bitmapDrawable = drawable as BitmapDrawable
}

    Java

    if (Build.VERSION.SDK_INT &gt;= Build.VERSION_CODES.LOLLIPOP) {
  VectorDrawable vectorDrawable = (VectorDrawable) drawable;
} else {
  BitmapDrawable bitmapDrawable = (BitmapDrawable) drawable;
}

Solo puedes acceder a los recursos de elementos de diseño vectoriales desde el subproceso principal.

Para Android 5.0 (nivel de API 21) y versiones posteriores, puedes usar la clase AnimatedVectorDrawable para animar las propiedades de la clase VectorDrawable. Con AndroidX, puedes usar la clase AnimatedVectorDrawableCompat para animar la clase VectorDrawable en Android 3.0 (nivel de API 11) y versiones posteriores. Para obtener más información, consulta Cómo animar gráficos con elementos de diseño.