Aggiungere grafica vettoriale a più densità (visualizzazioni)

Concetti e implementazione di Jetpack Compose

Android Studio include uno strumento chiamato Vector Asset Studio che ti aiuta ad aggiungere icone Material e a importare file SVG (Scalable Vector Graphics) e PSD (Adobe Photoshop Document) nel tuo progetto come risorse drawable vettoriali. L'utilizzo di risorse grafiche vettoriali anziché bitmap riduce le dimensioni dell'APK perché lo stesso file può essere ridimensionato per diverse densità dello schermo senza perdita di qualità dell'immagine. Per le versioni precedenti di Android che non supportano i drawables vettoriali, Vector Asset Studio può, al momento del tempo di compilazione, trasformare i drawables vettoriali in diverse dimensioni bitmap per ogni densità dello schermo.

Informazioni su Vector Asset Studio

Vector Asset Studio aggiunge una grafica vettoriale al progetto come file XML che descrive l'immagine. Gestire un file XML può essere più semplice che aggiornare più immagini raster a varie risoluzioni.

Android 4.4 (livello API 20) e versioni precedenti non supportano i drawables vettoriali. Se il tuo livello API minimo è impostato su uno di questi livelli API, hai due opzioni quando utilizzi Vector Asset Studio: generare file Portable Network Graphic (PNG) (l'opzione predefinita) o utilizzare la tecnica di compatibilità con le versioni precedenti in AndroidX.

Per la compatibilità con le versioni precedenti, Vector Asset Studio genera immagini raster del drawable vettoriale. Le risorse disegnabili vettoriali e raster sono raggruppate nell'APK. Puoi fare riferimento ai drawables vettoriali come Drawable nel codice Java o @drawable nel codice XML; quando la tua app viene eseguita, l'immagine vettoriale o raster corrispondente viene visualizzata automaticamente a seconda del livello API.

Compatibilità con le versioni precedenti in AndroidX

Questa tecnica richiede AndroidX 1.0 o versioni successive e il plug-in Android per Gradle 3.2 o versioni successive e utilizza solo risorse grafiche vettoriali. La classe VectorDrawableCompat in AndroidX ti consente di supportare VectorDrawable in Android 2.1 (livello API 7) e versioni successive.

Prima di utilizzare Vector Asset Studio, devi aggiungere un'istruzione al file build.gradle:

Alla moda

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")
}

Per la compatibilità con le versioni precedenti, devi anche utilizzare tecniche di codifica AndroidX, ad esempio l'attributo app:srcCompat anziché l'attributo android:src per gli elementi grafici vettoriali. Per saperne di più, consulta AndroidX.

Aggiungere una risorsa drawable vettoriale a un layout

In un file di layout, puoi impostare qualsiasi widget correlato alle icone, ad esempio ImageButton, ImageView e così via, in modo che punti a un elemento disegnabile vettoriale. Ad esempio, il seguente layout mostra un elemento disegnabile vettoriale visualizzato su un pulsante:

Figura 1. Una risorsa drawable vettoriale visualizzata su un pulsante in un layout.

Per visualizzare un elemento disegnabile vettoriale su un widget, come mostrato nella figura:

  1. Apri un progetto e importa un drawable vettoriale.

    Questo esempio utilizza un progetto per smartphone/tablet generato con la procedura guidata Nuovo progetto.

  2. Nella visualizzazione Android della finestra Progetto, fai doppio clic su un file XML di layout, ad esempio content_main.xml.

  3. Fai clic sulla scheda Progettazione per visualizzare l'editor di layout.

  4. Trascina il widget ImageButton dalla finestra Tavolozza nel Layout Editor.

  5. Nella finestra di dialogo Risorse, seleziona Drawable nel riquadro a sinistra e poi seleziona il drawable vettoriale che hai importato. Fai clic su Ok.

    La risorsa disegnabile vettoriale viene visualizzata in ImageButton nel layout.

  6. Per cambiare il colore dell'immagine con il colore intenso definito nel tema, nella finestra Proprietà, individua la proprietà Tinta e fai clic su … .

  7. Nella finestra di dialogo Risorse, seleziona Colore nel riquadro a sinistra, quindi seleziona colorAccent. Fai clic su Ok.

    Il colore dell'immagine cambia in base al colore intenso nel layout.

Se il progetto utilizza AndroidX, il codice ImageButton dovrebbe essere simile al seguente:

<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" />

Se il progetto non utilizza AndroidX, il codice del drawable vettoriale sarebbe invece android:src="@drawable/ic_build_black_24dp".

Fare riferimento a una risorsa drawable vettoriale nel codice

In genere, puoi fare riferimento a una risorsa disegnabile vettoriale in modo generico nel tuo codice e, quando l'app viene eseguita, l'immagine vettoriale o raster corrispondente viene visualizzata automaticamente a seconda del livello API:

  • Nella maggior parte dei casi, puoi fare riferimento ai drawables vettoriali come @drawable nel codice XML o Drawable nel codice Java.

    Ad esempio, il seguente codice XML di layout applica l'immagine a una visualizzazione:

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

    Il seguente codice recupera l'immagine come Drawable:

    Kotlin

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

    Java

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

    Il metodo getResources() si trova nella classe Context, che si applica agli oggetti UI, come attività, frammenti, layout, visualizzazioni e così via.

  • Se la tua app utilizza AndroidX (anche se non hai un'istruzione vectorDrawables.useSupportLibrary = true nel file build.gradle), puoi anche fare riferimento a un drawable vettoriale con un'istruzione app:srcCompat. Ad esempio:

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

  • A volte, potresti dover eseguire il cast del tipo della risorsa disegnabile nella sua classe esatta, ad esempio quando devi utilizzare funzionalità specifiche della classe VectorDrawable. Per farlo, puoi utilizzare un codice come il seguente:

    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;
}

Puoi accedere alle risorse disegnabili vettoriali solo dal thread principale.

Per Android 5.0 (livello API 21) e versioni successive, puoi utilizzare la classe AnimatedVectorDrawable per animare le proprietà della classe VectorDrawable. Con AndroidX, puoi utilizzare la classe AnimatedVectorDrawableCompat per animare la classe VectorDrawable per Android 3.0 (livello API 11) e versioni successive. Per ulteriori informazioni, consulta Animare la grafica disegnabile.