Ajouter des graphiques vectoriels multidensités (vues)

Concepts et implémentation de Jetpack Compose

Android Studio dispose d'un outil appelé Vector Asset Studio, qui vous permet d'ajouter des icônes Material et d'importer des fichiers Scalable Vector Graphics (SVG) et Adobe Photoshop Document (PSD) dans votre projet en tant que ressources drawable vectorielles. L'utilisation de drawables vectoriels au lieu de bitmaps réduit la taille de votre APK, car le même fichier peut être redimensionné pour différentes densités d'écran sans perte de qualité d'image. Pour les anciennes versions d'Android qui ne sont pas compatibles avec les drawables vectoriels, Vector Asset Studio peut, au moment de la compilation, les transformer en bitmaps de différentes tailles pour chaque densité d'écran.

À propos de Vector Asset Studio

Vector Asset Studio ajoute un graphique vectoriel au projet sous la forme d'un fichier XML décrivant l'image. Il est souvent plus simple de gérer un fichier XML unique que de mettre à jour plusieurs images matricielles de différentes résolutions.

Android 4.4 (niveau d'API 20) et les versions antérieures ne sont pas compatibles avec les drawables vectoriels. Si votre niveau d'API minimal est défini sur l'un de ceux-ci, vous avez deux options lorsque vous utilisez Vector Asset Studio : vous pouvez soit générer des fichiers PNG (Portable Network Graphic, choix par défaut), soit utiliser la technique de rétrocompatibilité dans AndroidX.

Pour assurer la rétrocompatibilité, Vector Asset Studio génère des images matricielles du drawable vectoriel. Les drawables vectoriels et matriciels sont tous deux empaquetés dans l'APK. Vous pouvez faire référence à des drawables vectoriels à l'aide de Drawable en Java ou de @drawable en XML. Lorsque votre application s'exécute, l'image vectorielle ou matricielle correspondante s'affiche automatiquement en fonction du niveau d'API.

Rétrocompatibilité dans AndroidX

Cette technique repose sur AndroidX 1.0 (ou version ultérieure) et sur le plug-in Android pour Gradle 3.2 (ou version ultérieure). Elle utilise des drawables vectoriels uniquement. La classe VectorDrawableCompat dans AndroidX vous permet de prendre en charge VectorDrawable sous Android 2.1 (niveau d'API 7) ou version ultérieure.

Avant d'utiliser Vector Asset Studio, vous devez ajouter une instruction dans le fichier 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")
}

Vous devez également utiliser des techniques de codage AndroidX pour la rétrocompatibilité, comme l'utilisation de l'attribut app:srcCompat au lieu de l'attribut android:src pour les drawables vectoriels. Pour en savoir plus, consultez AndroidX.

Ajouter un drawable vectoriel à une mise en page

Dans un fichier de mise en page, vous pouvez définir n'importe quel widget lié à une icône, tel que ImageButton, ImageView, etc., pour qu'il pointe vers un drawable vectoriel. Par exemple, la mise en page suivante montre un drawable vectoriel affiché sur un bouton :

Figure 1 : Un drawable vectoriel affiché sur un bouton dans une mise en page.

Pour afficher un drawable vectoriel sur un widget, comme illustré dans l'image, procédez comme suit :

  1. Ouvrez un projet et importez un drawable vectoriel.

    Cet exemple utilise un projet pour téléphone et tablette généré avec l'assistant de création de projet.

  2. Dans la vue Android de la fenêtre Project (Projet), double-cliquez sur un fichier XML de mise en page, par exemple content_main.xml.

  3. Cliquez sur l'onglet Design (Conception) pour afficher l'éditeur de mise en page.

  4. Faites glisser le widget ImageButton de la fenêtre Palette vers l'éditeur de mise en page.

  5. Dans la boîte de dialogue Resources (Ressources), sélectionnez Drawable dans le volet de gauche, puis le drawable vectoriel que vous avez importé. Cliquez sur OK.

    Le drawable vectoriel apparaît alors dans l'élément ImageButton de la mise en page.

  6. Pour remplacer la couleur de l'image par la couleur d'accentuation définie par le thème, dans la fenêtre Propriétés, recherchez la propriété tint, puis cliquez sur … .

  7. Dans la boîte de dialogue Resources (Ressources), sélectionnez Color (Couleur) dans le volet de gauche, puis colorAccent. Cliquez sur OK.

    La couleur de l'image est remplacée par la couleur d'accentuation de la mise en page.

Si le projet utilise AndroidX, le code de l'élément ImageButton doit ressembler à ceci :

<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 le projet n'utilise pas AndroidX, le code du drawable vectoriel serait plutôt android:src="@drawable/ic_build_black_24dp".

Faire référence à un drawable vectoriel dans du code

Normalement, vous pouvez faire référence à une ressource drawable vectoriel de manière générique dans votre code. Lorsque votre application s'exécute, l'image vectorielle ou matricielle correspondante s'affiche automatiquement en fonction du niveau d'API :

  • Dans la plupart des cas, vous pouvez faire référence aux ressources de drawable vectoriel à l'aide de @drawable en XML ou avec Drawable en Java.

    Par exemple, le code XML de mise en page suivant applique une image à une vue :

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

    Le code suivant récupère l'image en tant que Drawable :

    Kotlin

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

    Java

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

    La méthode getResources() se trouve dans la classe Context, qui s'applique aux objets d'UI tels que les activités, les fragments, les mises en page, les vues, etc.

  • Si votre application utilise AndroidX (même si vous ne disposez pas d'une instruction vectorDrawables.useSupportLibrary = true dans votre fichier build.gradle), vous pouvez également faire référence à un drawable vectoriel à l'aide d'une instruction app:srcCompat. Exemple :

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

  • Parfois, vous devrez peut-être indiquer la classe exacte de la ressource drawable, par exemple lorsque vous devez utiliser des fonctionnalités spécifiques de la classe VectorDrawable. Pour ce faire, vous pouvez utiliser un code semblable au code suivant :

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

Vous ne pouvez accéder aux ressources de drawable vectoriel qu'à partir du thread principal.

Pour Android 5.0 (niveau d'API 21) ou version ultérieure, vous pouvez utiliser la classe AnimatedVectorDrawable pour animer les propriétés de la classe VectorDrawable. Avec AndroidX, vous pouvez utiliser la classe AnimatedVectorDrawableCompat pour animer la classe VectorDrawable pour Android 3.0 (niveau d'API 11) ou version ultérieure. Pour en savoir plus, consultez Animer des images Drawable.