Vektorgrafiken für verschiedene Bildschirmdichten hinzufügen (Ansichten)

Konzepte und Jetpack Compose-Implementierung

Android Studio enthält das Tool „Vector Asset Studio“, mit dem Sie Material-Symbole hinzufügen und SVG-Dateien (Scalable Vector Graphics) und PSD-Dateien (Adobe Photoshop Document) als Vektordrawable-Ressourcen in Ihr Projekt importieren können. Wenn Sie Vektordrawables anstelle von Bitmaps verwenden, wird die Größe Ihrer APK reduziert, da dieselbe Datei für verschiedene Bildschirmdichten skaliert werden kann, ohne dass die Bildqualität darunter leidet. Bei älteren Android-Versionen, die keine Vektordrawables unterstützen, kann Vector Asset Studio zur Build-Zeit Ihre Vektordrawables in verschiedene Bitmap-Größen für jede Bildschirmdichte umwandeln.

Vector Asset Studio

Vector Asset Studio fügt dem Projekt eine Vektorgrafik als XML-Datei hinzu, die das Bild beschreibt. Die Verwaltung einer XML-Datei kann einfacher sein als die Aktualisierung mehrerer Rastergrafiken in verschiedenen Auflösungen.

Android 4.4 (API-Level 20) und niedriger unterstützt keine Vektordrawables. Wenn Ihr Mindest-API-Level auf eines dieser API-Levels festgelegt ist, haben Sie zwei Möglichkeiten, wenn Sie Vector Asset Studio verwenden: PNG-Dateien (Portable Network Graphic) generieren (Standard) oder die Abwärtskompatibilitätstechnik in AndroidX verwenden.

Aus Gründen der Abwärtskompatibilität generiert Vector Asset Studio Rasterbilder des Vektordrawables. Die Vektor- und Raster-Drawables werden zusammen im APK verpackt. Sie können in Java-Code als Drawable oder in XML-Code als @drawable auf Vektordrawables verweisen. Wenn Ihre App ausgeführt wird, wird je nach API-Level automatisch das entsprechende Vektor- oder Rasterbild angezeigt.

Abwärtskompatibilität in AndroidX

Für diese Technik sind AndroidX 1.0 oder höher und das Android-Plug-in für Gradle 3.2 oder höher erforderlich. Außerdem werden nur Vektordrawables verwendet. Mit der Klasse VectorDrawableCompat in AndroidX können Sie VectorDrawable in Android 2.1 (API-Level 7) und höher unterstützen.

Bevor Sie Vector Asset Studio verwenden können, müssen Sie Ihrer Datei build.gradle eine Anweisung hinzufügen:

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

Außerdem müssen Sie AndroidX-Codierungstechniken für die Abwärtskompatibilität verwenden, z. B. das Attribut app:srcCompat anstelle des Attributs android:src für Vektordrawables. Weitere Informationen finden Sie unter AndroidX.

Vektor-Drawable einem Layout hinzufügen

In einer Layoutdatei können Sie jedes symbolbezogene Widget, z. B. ImageButton und ImageView, auf ein Vektordrawable verweisen lassen. Im folgenden Layout wird beispielsweise eine Vektorgrafik auf einem Button angezeigt:

Abbildung 1. Ein Vektor-Drawable, das auf einer Schaltfläche in einem Layout angezeigt wird.

So zeigen Sie ein Vektor-Drawable in einem Widget an, wie in der Abbildung dargestellt:

  1. Öffnen Sie ein Projekt und importieren Sie eine Vektordrawable-Datei.

    In diesem Beispiel wird ein Smartphone-/Tablet-Projekt verwendet, das mit dem Assistenten für neue Projekte erstellt wurde.

  2. Doppelklicken Sie in der Android-Ansicht des Fensters Projekt auf eine XML-Layoutdatei, z. B. content_main.xml.

  3. Klicken Sie auf den Tab Design, um den Layout-Editor aufzurufen.

  4. Ziehen Sie das ImageButton-Widget aus dem Fenster Palette in den Layout-Editor.

  5. Wählen Sie im Dialogfeld Ressourcen im linken Bereich Drawable und dann das importierte Vektordrawable aus. Klicken Sie auf OK.

    Die Vektorgrafik wird auf dem ImageButton im Layout angezeigt.

  6. Wenn Sie die Farbe des Bildes in die im Design definierte Akzentfarbe ändern möchten, suchen Sie im Fenster Eigenschaften die Eigenschaft Färbung und klicken Sie auf … .

  7. Wählen Sie im Dialogfeld Ressourcen im linken Bereich Farbe und dann colorAccent aus. Klicken Sie auf Ok.

    Die Farbe des Bildes ändert sich in die Akzentfarbe des Layouts.

Wenn im Projekt AndroidX verwendet wird, sollte der ImageButton-Code so aussehen:

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

Wenn im Projekt kein AndroidX verwendet wird, lautet der Code für Vektordrawables stattdessen android:src="@drawable/ic_build_black_24dp".

Auf ein Vektor-Drawable im Code verweisen

Normalerweise können Sie in Ihrem Code auf generische Weise auf eine Vektordrawable-Ressource verweisen. Wenn Ihre App ausgeführt wird, wird je nach API-Level automatisch das entsprechende Vektor- oder Rasterbild angezeigt:

  • In den meisten Fällen können Sie in XML-Code auf Vektordrawables als @drawable und in Java-Code als Drawable verweisen.

    Mit dem folgenden Layout-XML-Code wird das Bild beispielsweise auf eine Ansicht angewendet:

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

    Mit dem folgenden Code wird das Bild als Drawable abgerufen:

    Kotlin

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

    Java

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

    Die getResources()-Methode befindet sich in der Klasse Context, die für UI-Objekte wie Aktivitäten, Fragmente, Layouts und Ansichten gilt.

  • Wenn Ihre App AndroidX verwendet (auch wenn Sie keine vectorDrawables.useSupportLibrary = true-Anweisung in Ihrer build.gradle-Datei haben), können Sie auch mit einer app:srcCompat-Anweisung auf eine Vektordrawable verweisen. Beispiel:

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

  • Gelegentlich müssen Sie die zeichenfähige Ressource in ihre genaue Klasse umwandeln, z. B. wenn Sie bestimmte Funktionen der Klasse VectorDrawable verwenden müssen. Dazu können Sie beispielsweise den folgenden Code verwenden:

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

Auf Vektordrawable-Ressourcen kann nur über den Hauptthread zugegriffen werden.

Für Android 5.0 (API-Level 21) und höher können Sie die Klasse AnimatedVectorDrawable verwenden, um die Attribute der Klasse VectorDrawable zu animieren. Mit AndroidX können Sie die Klasse AnimatedVectorDrawableCompat verwenden, um die Klasse VectorDrawable für Android 3.0 (API-Level 11) und höher zu animieren. Weitere Informationen finden Sie unter Zeichenbare Grafiken animieren.