Vektorgrafiken für verschiedene Bildschirmdichten hinzufügen

Android Studio enthält ein Tool namens Vector Asset Studio, mit dem Sie Material Design-Symbole hinzufügen und SVG- (Scalable Vector Graphic) und PSD-Dateien (Adobe Photoshop Document) als Vektor-Drawable-Ressourcen in Ihr Projekt importieren können. Wenn du Vektor-Drawables anstelle von Bitmaps verwendest, wird die Größe deines APKs reduziert, da die Größe derselben Datei für verschiedene Bildschirmdichten ohne Verlust der Bildqualität angepasst werden kann. Für frühere Android-Versionen, die keine Vektor-Drawables unterstützen, kann Vector Asset Studio Ihre Vektor-Drawables beim Erstellen 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. Eine einzelne XML-Datei zu verwalten, kann einfacher sein, als mehrere Rastergrafiken mit unterschiedlichen Auflösungen zu aktualisieren.

Wenn Sie Vektor-Drawables mit Jetpack Compose verwenden möchten, müssen Sie das minimale API-Level auf Android 5.0 (API-Level 21) oder höher festlegen.

Android 4.4 (API-Level 20) und niedriger unterstützen keine Vektor-Drawables. Wenn Ihr Mindest-API-Level in diesem Bereich liegt, bietet Vector Asset Studio zwei Optionen:

  • PNG-Dateien generieren (Standard): Vector Asset Studio generiert Rasterbilder des Vektor-Drawables und verpackt sowohl die Vektor- als auch die Raster-Drawables in der APK. Sie können Vektor-Drawables im Kotlin-Code als Drawable oder im XML-Code als @drawable referenzieren. Wenn Ihre App ausgeführt wird, wird je nach API-Level automatisch das entsprechende Vektor- oder Rasterbild angezeigt.
  • AndroidX 1.0.0 oder höher verwenden: Wenn Sie nur Vektor-Drawables verwenden möchten, ändern Sie die Datei build.gradle, bevor Sie Vector Asset Studio ausführen, wie unter AndroidX beschrieben. Mit der Klasse VectorDrawableCompat in AndroidX kannst du VectorDrawable in Android 2.1 (API-Level 7) und höher unterstützen.

Unterstützte Vektorgrafiktypen

Die Google Material Design-Spezifikation bietet Material Design-Symbole, die Sie in Ihren Android-Apps verwenden können. Mit Vector Asset Studio können Sie Material Design-Symbole auswählen, importieren und ihre Größe anpassen sowie die Deckkraft und die Einstellung für die Spiegelung von rechts nach links (RTL) festlegen.

Mit Vector Asset Studio können Sie auch eigene SVG- und PSD-Dateien importieren. SVG ist ein XML-basierter offener Standard des World Wide Web Consortium (W3C). Das PSD-Dateiformat unterstützt Adobe Photoshop-Funktionen. Vector Asset Studio unterstützt die wesentlichen Standards, aber nicht alle SVG- und PSD-Funktionen. Wenn Sie eine SVG- oder PSD-Datei angeben, erhalten Sie von Vector Asset Studio sofort Feedback dazu, ob der Grafikcode unterstützt wird oder nicht. Die Datei wird in eine XML-Datei mit VectorDrawable-Code konvertiert. Wenn Fehler auftreten, sollten Sie prüfen, ob das Vektor-Drawable wie vorgesehen angezeigt wird. Weitere Informationen zu zulässigen PSD-Funktionen finden Sie unter Unterstützung und Einschränkungen für PSD-Dateien.

Ab Android 5.0 (API-Level 21) können Sie die Klasse AnimatedVectorDrawable verwenden, um die Attribute der Klasse VectorDrawable zu animieren. Mit AndroidX kannst du 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 Animierte Vektor-Images in Compose.

Überlegungen zu SVG- und PSD-Dateien

Vektor-Drawables eignen sich am besten für einfache Symbole wie Material Design-Symbole. App-Startsymbole haben oft viele Details, daher funktionieren sie besser als Rasterbilder.

Das erste Laden eines Vektor-Drawables kann mehr CPU-Zyklen erfordern als das entsprechende Rasterbild. Danach sind Speichernutzung und Leistung bei beiden ähnlich. Wir empfehlen, ein Vektor-Image auf maximal 200 × 200 dp zu beschränken, da das Zeichnen sonst zu lange dauern kann.

Vektor-Drawables unterstützen zwar eine oder mehrere Farben, in vielen Fällen ist es jedoch sinnvoll, Symbole schwarz (android:fillColor="#FF000000") zu färben. Mit diesem Ansatz können Sie dem Vektor-Drawable, das Sie in einem Layout platziert haben, eine Tönung hinzufügen. Die Symbolfarbe ändert sich dann in die Tönungsfarbe. Wenn die Symbolfarbe nicht schwarz ist, kann sie sich stattdessen mit der Farbtonfarbe vermischen.

Lösungen für die Abwärtskompatibilität von Vektor-Drawables

In der folgenden Tabelle sind die beiden Techniken zusammengefasst, die Sie für die Abwärtskompatibilität verwenden können:

Technik Drawables in APK VectorDrawable-XML-Elemente Version Build-Flags App-Code
PNG-Generierung Vektor und Raster Teilweise unterstützt

SVG: Android-Plug-in für Gradle 1.5.0 oder höher

PSD: Android Studio 2.2 oder höher

 Standard Unterstützung verschiedener Codierungstechniken
AndroidX 1.0 oder höher Vektor Umfassende Unterstützung Android-Plug-in für Gradle 3.2 oder höher Erklärungen zur Supportbibliothek erforderlich Unterstützung einer Teilmenge von Codierungstechniken

Die Verwendung von Vektor-Drawables kann zu einem kleineren APK führen, aber das erste Laden von Vektor-Drawables kann länger dauern.

PNG-Generierung

Android 5.0 (API-Level 21) und höher unterstützt Vektor-Drawables. Wenn Ihre App ein niedrigeres Mindest-API-Level hat, fügt Vector Asset Studio die Vektor-Drawable-Datei Ihrem Projekt hinzu. Außerdem erstellt Gradle beim Build PNG-Rasterbilder in verschiedenen Auflösungen. Gradle generiert die PNG-Dichten, die durch das DSL-Attribut (Domain Specific Language) generatedDensities in einer build.gradle-Datei angegeben sind.

Für Android 5.0 (API-Level 21) und höher unterstützt Vector Asset Studio alle VectorDrawable-Elemente. Aus Gründen der Abwärtskompatibilität mit Android 4.4 (API-Level 20) und niedriger unterstützt Vector Asset Studio die folgenden XML-Elemente:

<vector>

  • android:width
  • android:height
  • android:viewportWidth
  • android:viewportHeight
  • android:alpha

<group>

  • android:rotation
  • android:pivotX
  • android:pivotY
  • android:scaleX
  • android:scaleY
  • android:translateX
  • android:translateY

<path>

  • android:pathData
  • android:fillColor
  • android:strokeColor
  • android:strokeWidth
  • android:strokeAlpha
  • android:fillAlpha
  • android:strokeLineCap
  • android:strokeLineJoin
  • android:strokeMiterLimit

Sie können den von Vector Asset Studio generierten XML-Code ändern, auch wenn dies keine Best Practice ist. Das Ändern der Werte im Code sollte keine Probleme verursachen, solange sie gültig und statisch sind. Wenn Sie XML-Elemente hinzufügen möchten, müssen Sie darauf achten, dass sie von Ihrem Mindest-API-Level unterstützt werden.

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 Vektor-Drawables verwendet. Mit der Klasse VectorDrawableCompat in AndroidX kannst du VectorDrawable in Android 2.1 (API-Level 7) und höher unterstützen.

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

Kotlin

android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

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

Groovy

android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

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

Vector Asset Studio ausführen

So starten Sie Vector Asset Studio:

  1. Öffnen Sie in Android Studio ein Android-App-Projekt.

  2. Wählen Sie im Fenster Projekt die Android-Ansicht aus.

  3. Rechtsklicken Sie auf den Ordner res und wählen Sie New > Vector Asset aus.

    Einige andere Projektansichten und Ordner haben diesen Menüpunkt ebenfalls.

    Vector Asset Studio wird angezeigt.

    Vector Asset Studio mit Auswahl von Material Design-Symbolen.
    Abbildung 1. Vector Asset Studio

  4. Wenn stattdessen das Dialogfeld Need Newer Android Plugin for Gradle (Neueres Android-Plug-in für Gradle erforderlich) angezeigt wird, korrigieren Sie die Gradle-Version so:

    1. Wählen Sie File > Project Structure (Datei > Projektstruktur).

    2. Wählen Sie im Dialogfeld Project Structure (Projektstruktur) die Option Project (Projekt) aus.

    3. Ändern Sie im Feld Android-Plug-in-Version die Version des Android-Plug-ins für Gradle in 1.5.0 oder höher und klicken Sie auf OK.

      Gradle synchronisiert das Projekt.

    4. Klicken Sie in der Android-Ansicht des Fensters Project mit der rechten Maustaste auf den Ordner res und wählen Sie New > Vector Asset aus.

      Vector Asset Studio wird angezeigt.

  5. Fahren Sie mit Vektorgrafik importieren fort.

Vektorgrafik importieren

Mit Vector Asset Studio können Sie eine Vektorgrafikdatei in Ihr App-Projekt importieren. Führen Sie einen der folgenden Schritte aus:

Material Design-Symbol hinzufügen

Nachdem Sie Vector Asset Studio geöffnet haben, können Sie ein Material Design-Symbol so hinzufügen:

  1. Wählen Sie im Vector Asset Studio die Option ClipArt aus.

  2. Klicken Sie im Feld „ClipArt“ auf die Schaltfläche.

  3. Das Dialogfeld Symbol auswählen wird angezeigt. Sie können filtern, welche Symbole sichtbar sind. Wählen Sie dazu eine Symbolkategorie aus dem Menü aus oder geben Sie etwas in das Suchfeld ein, wie in Abbildung 2 dargestellt.

    Material Design-Symbole in Vector Asset Studio filtern
    Abbildung 2: Material Design-Symbole im Vector Asset Studio filtern

    Wählen Sie ein Material Design-Symbol aus und klicken Sie auf OK. Das Symbol wird in der Vektor-Drawable-Vorschau angezeigt.

  4. Optional können Sie den Ressourcennamen, die Größe, die Deckkraft und die Einstellung für die Spiegelung von rechts nach links (RTL) ändern:

    • Name: Geben Sie einen neuen Namen ein, wenn Sie nicht den Standardnamen verwenden möchten. Vector Asset Studio erstellt automatisch einen eindeutigen Namen (fügt eine Zahl am Ende des Namens hinzu), wenn dieser Ressourcenname bereits im Projekt vorhanden ist. Der Name darf nur Kleinbuchstaben, Unterstriche und Ziffern enthalten.

    • Überschreiben: Wählen Sie diese Option aus, wenn Sie die Größe des Bildes anpassen möchten. Wenn Sie eine neue Größe eingeben, wird die Änderung im Vorschaubereich angezeigt.

      Der Standardwert ist 24 × 24 dp, wie in der Material Design-Spezifikation definiert. Heben Sie die Auswahl des Kästchens auf, um zur Standardeinstellung zurückzukehren.

    • Deckkraft: Passen Sie die Deckkraft des Bildes mit dem Schieberegler an. Die Änderung wird im Vorschaubereich angezeigt.

    • Automatische Spiegelung für linksläufiges Layout aktivieren: Wählen Sie diese Option aus, wenn Sie möchten, dass ein Spiegelbild angezeigt wird, wenn das Layout von rechts nach links statt von links nach rechts verläuft. Beispielsweise werden einige Sprachen von rechts nach links gelesen. Wenn Sie ein Pfeilsymbol haben, sollten Sie es in diesem Fall spiegeln. Wenn Sie mit einem älteren Projekt arbeiten, müssen Sie möglicherweise auch android:supportsRtl="true" zu Ihrem App-Manifest hinzufügen. Die automatische Spiegelung wird unter Android 5.0 (API-Level 21) und höher sowie mit AndroidX unterstützt.

  5. Klicken Sie auf Weiter.

  6. Ändern Sie optional das Modul- und Ressourcenverzeichnis:

    • Res Directory: Wählen Sie das Ressourcen-Source-Set aus, dem Sie das Vektor-Drawable hinzufügen möchten: src/main/res, src/debug/res, src/release/res oder ein benutzerdefiniertes Source-Set. Das Haupt-Source-Set gilt für alle Build-Varianten, einschließlich Debug und Release. Die Debug- und Release-Source-Sets überschreiben das Haupt-Source-Set und gelten für eine Version eines Builds. Das Debug-Source-Set ist nur für die Fehlerbehebung gedacht. Wenn Sie ein neues Source-Set definieren möchten, wählen Sie File > Project Structure > app > Build Types aus. Sie können beispielsweise ein Beta-Source-Set definieren und eine Version eines Symbols erstellen, die den Text „BETA“ in der rechten unteren Ecke enthält. Weitere Informationen finden Sie unter Build-Varianten konfigurieren.

    Im Bereich Ausgabeverzeichnisse werden das Vektor-Drawable und das Verzeichnis angezeigt, in dem es angezeigt wird.

  7. Klicken Sie auf Fertig.

    Vector Asset Studio fügt dem Projekt im Ordner app/src/main/res/drawable/ eine XML-Datei hinzu, die das Vektor-Drawable definiert. In der Android-Ansicht des Projektfensters können Sie die generierte Vektor-XML-Datei im Ordner drawable aufrufen.

  8. Erstellen Sie das Projekt:

    Wenn das Mindest-API-Level Android 4.4 (API-Level 20) oder niedriger ist und Sie die AndroidX-Technik nicht aktiviert haben, generiert Vector Asset Studio PNG-Dateien. In der Ansicht „Projektdateien“ des Fensters Projekt können Sie die generierten PNG- und XML-Dateien im Ordner app/build/generated/res/pngs/debug/ aufrufen.

    Sie sollten diese generierten Rasterdateien nicht bearbeiten, sondern stattdessen mit der Vektor-XML-Datei arbeiten. Das Build-System generiert die Rasterdateien bei Bedarf automatisch neu, sodass Sie sie nicht verwalten müssen.

SVG- oder PSD-Datei importieren

Nachdem Sie Vector Asset Studio geöffnet haben, können Sie eine SVG- oder PSD-Datei so importieren:

  1. Wählen Sie in Vector Asset Studio die Option Local file (Lokale Datei) aus.

    Die Datei muss sich auf einem lokalen Laufwerk befinden. Wenn sie sich beispielsweise im Netzwerk befindet, müssen Sie sie zuerst auf ein lokales Laufwerk herunterladen.

  2. Geben Sie eine Bilddatei an, indem Sie auf … klicken.

    Das Bild wird in der Vektor-Drawable-Vorschau angezeigt.

    Wenn die SVG- oder PSD-Datei nicht unterstützte Funktionen enthält, wird unten in Vector Asset Studio ein Fehler angezeigt, wie in Abbildung 3 zu sehen.

    Vector Asset Studio mit SVG-Importfehlern.
    Abbildung 3: Vector Asset Studio zeigt einige Fehler an.

    Wenn Fehler angezeigt werden, müssen Sie dafür sorgen, dass das importierte Vektor-Drawable richtig gerendert wird. Scrollen Sie durch die Liste, um die Fehler aufzurufen.

    Eine Liste der unterstützten Elemente findest du unter Lösungen für die Abwärtskompatibilität von Vektor-Drawables. Weitere Informationen zu zulässigen PSD-Dateien finden Sie unter Unterstützung und Einschränkungen für PSD-Dateien.

  3. Optional können Sie den Ressourcennamen, die Größe, die Deckkraft und die Einstellung für die Spiegelung von rechts nach links (RTL) ändern:

    • Name: Geben Sie einen neuen Namen ein, wenn Sie nicht den Standardnamen verwenden möchten. Vector Asset Studio erstellt automatisch einen eindeutigen Namen (fügt eine Zahl am Ende des Namens hinzu), wenn dieser Ressourcenname bereits im Projekt vorhanden ist. Der Name darf nur Kleinbuchstaben, Unterstriche und Ziffern enthalten.

    • Überschreiben: Wählen Sie diese Option aus, wenn Sie die Größe des Bildes anpassen möchten. Nachdem Sie es ausgewählt haben, ändert sich die Größe in die Größe des Bildes selbst. Wenn Sie die Größe ändern, wird die Änderung im Vorschaubereich angezeigt. Der Standardwert ist 24 × 24 dp, wie in der Material Design-Spezifikation definiert.

    • Deckkraft: Passen Sie die Deckkraft des Bildes mit dem Schieberegler an. Die Änderung wird im Vorschaubereich angezeigt.

    • Automatische Spiegelung für linksläufiges Layout aktivieren: Wählen Sie diese Option aus, wenn Sie möchten, dass ein Spiegelbild angezeigt wird, wenn das Layout von rechts nach links statt von links nach rechts verläuft. Einige Sprachen werden beispielsweise von rechts nach links gelesen. Wenn Sie ein Pfeilsymbol haben, sollten Sie es in diesem Fall spiegeln. Wenn Sie mit einem älteren Projekt arbeiten, müssen Sie möglicherweise android:supportsRtl="true" zu Ihrem App-Manifest hinzufügen. Die automatische Spiegelung wird von Android 5.0 (API-Level 21) und höher sowie von AndroidX unterstützt.

  4. Klicken Sie auf Weiter.

  5. Optional können Sie das Ressourcenverzeichnis ändern:

    • Res Directory: Wählen Sie das Quell-Set für die Ressource aus, dem Sie das Vektor-Drawable hinzufügen möchten: src/main/res, src/debug/res, src/release/res oder ein benutzerdefiniertes Quell-Set. Das Haupt-Source-Set gilt für alle Build-Varianten, einschließlich Debug und Release. Die Debug- und Release-Source-Sets überschreiben das Haupt-Source-Set und gelten für eine Version eines Builds. Das Debug-Source-Set ist nur für die Fehlerbehebung gedacht. Wenn Sie ein neues Source-Set definieren möchten, wählen Sie Datei > Projektstruktur > App > Build-Typen aus. Sie können beispielsweise ein Beta-Source-Set definieren und eine Version eines Symbols erstellen, die den Text „BETA“ in der rechten unteren Ecke enthält. Weitere Informationen finden Sie unter Build-Varianten konfigurieren.

    Im Bereich Ausgabeverzeichnisse werden das Vektor-Drawable und das Verzeichnis angezeigt, in dem es angezeigt wird.

  6. Klicken Sie auf Fertig.

    Vector Asset Studio fügt dem Projekt im Ordner app/src/main/res/drawable/ eine XML-Datei hinzu, die das Vektor-Drawable definiert. In der Android-Ansicht des Projektfensters können Sie die generierte Vektor-XML-Datei im Ordner drawable aufrufen.

  7. Erstellen Sie das Projekt:

    Wenn das Mindest-API-Level Android 4.4 (API-Level 20) oder niedriger ist und Sie die AndroidX-Technik nicht aktiviert haben, generiert Vector Asset Studio PNG-Dateien. In der Ansicht „Projektdateien“ des Fensters Projekt können Sie die generierten PNG- und XML-Dateien im Ordner app/build/generated/res/pngs/debug/ aufrufen.

    Sie sollten diese generierten Rasterdateien nicht bearbeiten, sondern stattdessen mit der Vektor-XML-Datei arbeiten. Das Build-System generiert die Rasterdateien bei Bedarf automatisch neu, sodass Sie sie nicht verwalten müssen.

Vektor-Asset in Jetpack Compose referenzieren

Nachdem Sie mit Vector Asset Studio ein Asset zu Ihrem res/drawable-Ordner hinzugefügt haben, können Sie in Ihrem Code darauf verweisen.

In Jetpack Compose wird der Vektor am häufigsten mit dem Composables Icon oder Image angezeigt.

Die zusammensetzbare Funktion Icon ist die Standardmethode zum Anzeigen kleiner, einfarbiger Assets. Es bietet integrierte Unterstützung für Material Design-Prinzipien, z. B. die Anwendung dynamischer Tönung basierend auf Material 3-Designs und automatische Barrierefreiheit durch Inhaltsbeschreibungen.

Verwenden Sie die painterResource API, um dem Compose-Element XML-Vektor-Assets bereitzustellen:

Icon(
    painter = painterResource(id = R.drawable.ic_speedometer),
    tint = MaterialTheme.colorScheme.primary, // Applies dynamic theme color
    contentDescription = "Current Speed", // Essential for accessibility
)

Verwenden Sie für komplexe und mehrfarbige Vektoren die Image-Komposition:

Image(
     painter = painterResource(id = R.drawable.ic_complex_vector),
     contentDescription = null // Decorative element
)

Informationen zu anderen komplexen Szenarien, z. B. zum Anpassen eines Images oder zum Optimieren der Leistung, finden Sie unter Mit Images arbeiten. Informationen zum Animieren von Vektoren finden Sie unter Animierte Vektorbilder in Compose.

Von Vector Asset Studio generierten XML-Code ändern

Du kannst den XML-Code des Vektor-Drawables ändern, aber nicht die PNGs und den entsprechenden XML-Code, der beim Erstellen generiert wird. Wir raten jedoch davon ab.

Wenn Sie die PNG-Generierungstechnik verwenden, sorgt Vector Asset Studio dafür, dass das Vektor-Drawable und die PNGs übereinstimmen und das Manifest den richtigen Code enthält. Wenn du Code hinzufügst, der unter Android 4.4 (API-Level 20) und niedriger nicht unterstützt wird, können sich deine Vektor- und PNG-Bilder unterscheiden. Außerdem muss das Manifest den Code enthalten, der Ihre Änderungen unterstützt.

So ändern Sie die Vektor-XML-Datei, wenn Sie die AndroidX-Technik nicht verwenden:

  1. Doppelklicken Sie im Fenster Project (Projekt) im Ordner drawable auf die generierte XML-Datei.

    Die XML-Datei wird im Editor und im Fenster Vorschau angezeigt.

    Eine Vektor-XML-Datei, die im Code-Editor und im Vorschaufenster angezeigt wird.
    Abbildung 4: Eine Vektor-XML-Datei, die im Code-Editor und im Vorschaufenster angezeigt wird.

  2. Bearbeiten Sie den XML-Code basierend auf dem, was vom Mindest-API-Level unterstützt wird:

    • Android 5.0 (API-Level 21) und höher: Vector Asset Studio unterstützt alle Drawable- und VectorDrawable-Elemente. Sie können XML-Elemente hinzufügen und Werte ändern. In Jetpack Compose können Sie das Vektor-Drawable in ImageVector laden, um es weiter anzupassen.

    • Android 4.4 (API-Level 20) und niedriger: Vector Asset Studio unterstützt alle Drawable-Elemente und eine Teilmenge der VectorDrawable-Elemente. Eine Liste findest du unter Lösungen für die Abwärtskompatibilität von Vektor-Drawables. Sie können Werte im generierten Code ändern und unterstützte XML-Elemente hinzufügen.

  3. Erstelle das Projekt und prüfe, ob das Vektor-Drawable und die entsprechenden Rasterbilder gleich aussehen.

    Beachten Sie, dass die generierten PNGs im Fenster Vorschau aufgrund unterschiedlicher Rendering-Engines und Änderungen, die vor einem Build am Vektor-Drawable vorgenommen wurden, möglicherweise anders angezeigt werden als in der App. Wenn Sie der von Vector Asset Studio erstellten XML-Vektordatei Code hinzufügen, werden alle Funktionen, die in Android 4.4 (API-Level 20) und niedriger nicht unterstützt werden, in den generierten PNG-Dateien nicht angezeigt. Wenn Sie Code hinzufügen, sollten Sie daher immer prüfen, ob die generierten PNGs mit dem Vektor-Drawable übereinstimmen. Dazu können Sie im Fenster Projekt in der Ansicht Projektdateien auf die PNG-Datei doppelklicken. Das PNG-Bild wird auch am linken Rand des Code-Editors angezeigt, wenn Ihr Code auf das Drawable verweist (siehe Abbildung 5).

    Ein PNG-Bild, das im linken Bereich des Code-Editors angezeigt wird.
    Abbildung 5. Ein PNG-Bild, das im linken Rand des Code-Editors angezeigt wird.

Vektor-Drawable aus einem Projekt löschen

So entfernen Sie ein Vektor-Drawable aus einem Projekt:

  1. Löschen Sie im Fenster Projekt die generierte Vektor-XML-Datei, indem Sie die Datei auswählen und die Taste Löschen drücken (oder Bearbeiten > Löschen auswählen).

    Das Dialogfeld Sicher löschen wird angezeigt.

  2. Wählen Sie optional Optionen aus, um herauszufinden, wo die Datei im Projekt verwendet wird, und klicken Sie auf OK.

    Android Studio löscht die Datei aus dem Projekt und vom Laufwerk. Wenn Sie jedoch nach Stellen im Projekt gesucht haben, an denen die Datei verwendet wird, und einige Verwendungen gefunden wurden, können Sie diese ansehen und entscheiden, ob Sie die Datei löschen möchten.

  3. Wählen Sie Build > Clean Project aus.

    Alle automatisch generierten PNG- und XML-Dateien, die dem gelöschten Vektor-Drawable entsprechen, werden aus dem Projekt und vom Laufwerk entfernt.

App mit Vektor-Drawables bereitstellen

Wenn Sie die AndroidX-Technik verwendet haben oder Ihr Mindest-API-Level Android 5.0 (API-Level 21) oder höher ist, enthält Ihr APK die Vektor-Drawables, die Sie mit Vector Asset Studio hinzugefügt haben. Diese APKs sind kleiner, als wenn die Vektor-Images in PNGs konvertiert würden.

Wenn Ihr minimales API-Level Android 4.4 (API-Level 20) oder niedriger umfasst und Sie entsprechende Vektor-Drawables und Rasterbilder in Ihrem Projekt haben, haben Sie zwei Möglichkeiten, Ihre APK-Dateien bereitzustellen:

  • Erstelle ein APK, das sowohl die Vektor-Drawables als auch die entsprechenden Rasterdarstellungen enthält. Diese Lösung ist am einfachsten zu implementieren.
  • Erstellen Sie separate APKs für verschiedene API-Level. Wenn Sie die entsprechenden Rasterbilder nicht in das APK für Android 5.0 (API-Level 21) und höher aufnehmen, kann das APK viel kleiner sein. Weitere Informationen finden Sie unter Unterstützung für mehrere APKs.

Unterstützung und Einschränkungen für PSD-Dateien

Vector Asset Studio unterstützt nicht alle PSD-Dateifunktionen. In der folgenden Liste sind die unterstützten und nicht unterstützten PSD-Merkmale sowie einige Konvertierungsdetails zusammengefasst.

Dokument

Unterstützt:

  • Ein PSD-Farbmodus: Bitmap, Graustufen, indiziert, RGB, Lab oder CMYK.
  • Eine Farbtiefe von 8, 16 oder 32 Bit.

Conversion-Details:

  • Die Abmessungen des PSD-Dokuments werden zu den Abmessungen des Vektor-Drawables und des Darstellungsbereichs.

Nicht unterstützt:

  • Ein PSD-Farbmodus mit Duplex oder Mehrkanal.

Formen

Unterstützt:

  • Schnittmasken, wenn die Schnittbasis eine andere Form ist.
  • Formvorgänge, einschließlich Zusammenführen/Hinzufügen, Überschneiden, Subtrahieren und Ausschließen.

Nicht unterstützt:

  • Even-Odd-Füllregel, die von Photoshop-Formen verwendet wird. In Android 6.0 (API-Level 23) und niedriger unterstützen Vektor-Drawables nur die Füllregel „nonzero“. Bei sich selbst schneidenden Formen kann diese Einschränkung zu Rendering-Unterschieden zwischen der PSD und dem resultierenden Vektor-Drawable führen. Fügen Sie der Form im Vektor-Drawable android:fillType="evenOdd" hinzu, um dieses Problem zu beheben. Beispiel:

    <vector xmlns:android="https://schemas.android.com/apk/res/android"
  android:viewportHeight="168"
  android:height="24dp"
  android:viewportWidth="209"
  android:width="24dp">

  <path
      android:fillAlpha="1.0"
      android:fillColor="#000000"
      android:fillType="evenOdd"
      android:pathData="M24,58 L24,167 L114,167 L114,66 M64,1 L64,96 L208,96 L208,8 M1,97 L146,139 L172,47"/>
</vector>

Striche und Füllungen

Unterstützt:

  • Striche, einschließlich Farbe, Deckkraft, Breite, Verbindung, Abschluss, Striche und Ausrichtung.
  • Einfarbige Füllungen und Striche.
  • Strich- und Füllfarben, die als RGB, Lab oder CMYK angegeben sind.

Conversion-Details:

  • Wenn ein Strich gestrichelt ist, mit einer Schnittbasis abgeschnitten wird oder eine andere Ausrichtung als die Mitte verwendet, konvertiert Vector Asset Studio ihn in eine Füllform im Vektor-Drawable.

Nicht unterstützt:

  • Andere Farbfüllungen und Striche als durchgehende, z. B. Farbverläufe.

Deckkraft

Unterstützt:

  • Formebenen mit einer Deckkraft von 0.

Conversion-Details:

  • Vector Asset Studio multipliziert die Fülldeckkraft mit der Ebenendeckkraft, um den Füll-Alphawert zu berechnen.
  • Das Tool multipliziert die Deckkraft der Schnittbasis (falls vorhanden) mit dem Füll-Alpha, um das endgültige Füll-Alpha zu berechnen.
  • Das Tool multipliziert die Deckkraft des Strichs mit der Deckkraft der Ebene, um den Alpha-Wert des Strichs zu berechnen.
  • Das Tool multipliziert die Deckkraft der Schnittbasis (falls vorhanden) mit dem Alpha-Wert des Strichs, um den endgültigen Alpha-Wert des Strichs zu berechnen.

Ebenen

Unterstützt:

  • Jede sichtbare Formebene.

Conversion-Details:

  • Vector Asset Studio behält die Namen der Ebenen in der Vektor-Drawable-Datei bei.

Nicht unterstützt:

  • Ebeneneffekte
  • Anpassungs- und Textebenen.
  • Füllmethoden (ignoriert).

Unterstützung und Einschränkungen für SVG-Dateien

Vector Asset Studio unterstützt nicht alle SVG-Dateifunktionen. Im folgenden Abschnitt werden die unterstützten und nicht unterstützten Funktionen zusammengefasst, wenn das Tool eine SVG-Datei in ein VectorDrawable konvertiert. Außerdem finden Sie hier weitere Details zur Konvertierung.

Unterstützte Funktionen

VectorDrawable unterstützt alle Funktionen von Tiny SVG 1.2 mit Ausnahme von Text.

Formen

VectorDrawable unterstützt SVG-Pfade.

Das Tool wandelt einfache Formen wie Kreise, Quadrate und Polygone in Pfade um.

Transformationen

Das Tool unterstützt Transformationsmatrizen und wendet sie direkt auf untergeordnete Pfade an.

Gruppen

Das Tool unterstützt Gruppenelemente für die Übersetzung, Skalierung und Drehung. Gruppen unterstützen kein Deckkraftattribut.

Das Tool wendet auch alle Gruppenstile oder Deckkraft auf untergeordnete Pfade an.

Füllungen und Konturen

Pfade können mit Volltonfarben oder Farbverläufen (linear, radial oder winklig) gefüllt und umrandet werden. Es werden nur zentrierte Striche unterstützt. Füllmethoden werden nicht unterstützt. Gestrichelte Pfade werden nicht unterstützt.

Masken

Das Tool unterstützt eine Schnittmaske pro Gruppe.

Vom SVG-Importer nicht unterstützte Funktionen

Alle Funktionen, die nicht im vorherigen Abschnitt Unterstützte Funktionen aufgeführt sind, werden nicht unterstützt. Zu den wichtigsten nicht unterstützten Funktionen gehören:

  • Filtereffekte: Effekte wie Schlagschatten, Weichzeichnen und Farbmatrix werden nicht unterstützt.
  • Text: Es wird empfohlen, Text mit anderen Tools in Formen umzuwandeln.
  • Musterfüllungen

Zusätzliche Ressourcen

Weitere Informationen zu Vektorgrafiken finden Sie in den folgenden zusätzlichen Ressourcen:

Dokumentation

Inhalte ansehen