Vektorgrafiken für verschiedene Bildschirmdichten hinzufügen

In Android Studio ist ein Tool namens Vector Asset Studio enthalten, mit dem Sie Materialsymbole hinzufügen und SVG- (Skalierbare Vektorgrafik) und PSD-Dateien (Adobe Photoshop Document) als Vektor-Drawable-Ressourcen in Ihr Projekt importieren können. Durch die Verwendung von Vektor-Drawables anstelle von Bitmaps verringert sich die Größe deines APK, da die Größe derselben Datei ohne Verlust der Bildqualität an verschiedene Bildschirmdichten angepasst werden kann. Bei älteren Android-Versionen, die keine Vektor-Drawables unterstützen, kann Vector Asset Studio Ihre Vektor-Drawables bei der Erstellung für jede Bildschirmdichte in verschiedene Bitmap-Größen umwandeln.

Vector Asset Studio

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

Android 4.4 (API-Level 20) und niedriger unterstützt keine Vektor-Drawables. Wenn Ihre minimale API-Ebene auf einer dieser API-Ebenen festgelegt ist, haben Sie bei der Verwendung von Vector Asset Studio zwei Möglichkeiten: Generieren Sie PNG-Dateien (Portable Network Graphics) (Standardeinstellung) oder verwenden Sie die Supportbibliothek.

Aus Gründen der Abwärtskompatibilität generiert Vector Asset Studio Rasterbilder des Vektor-Drawable. Die Vektor- und Raster-Drawables sind im APK verpackt. Vektor-Drawables kannst du im Java-Code als Drawable oder in XML-Code als @drawable bezeichnen. Wenn deine App ausgeführt wird, wird je nach API-Level automatisch das entsprechende Vektor- oder Rasterbild angezeigt.

Wenn du nur Vektor-Drawables verwenden möchtest, kannst du die Android Support Library 23.2 oder höher verwenden. Bei diesem Verfahren muss Ihre build.gradle-Datei geändert werden, bevor Sie Vector Asset Studio ausführen, wie unter Abwärtskompatibilität der Support Library beschrieben. Mit der Klasse VectorDrawableCompat in der Supportbibliothek können Sie VectorDrawable in Android 2.1 (API-Level 7) und höher unterstützen.

Unterstützte Vektorgrafiktypen

Die Material Design-Spezifikation von Google enthält Materialsymbole, die du in deinen Android-Apps verwenden kannst. Mit Vector Asset Studio können Sie Materialsymbole auswählen, importieren und deren Größe anpassen. Außerdem können Sie die Deckkraft und die Einstellung für die RTL-Spiegelung (Rechts-nach-links) definieren.

In Vector Asset Studio können Sie auch Ihre eigenen 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, jedoch nicht alle SVG- und PSD-Funktionen. Wenn Sie eine SVG- oder PSD-Datei angeben, gibt Vector Asset Studio sofort Feedback dazu, ob der Grafikcode unterstützt wird. Die Datei wird in eine XML-Datei mit VectorDrawable-Code konvertiert. Wenn Fehler auftreten, solltest du überprüfen, ob dein Vektor-Drawable wie beabsichtigt angezeigt wird. Weitere Informationen zu zulässigen PSD-Funktionen finden Sie unter Unterstützung und Einschränkungen für PSD-Dateien.

Unter 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 der Support Library 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 findest du unter Vektor-Drawables animieren.

Hinweise zu SVG- und PSD-Dateien

Ein Vektor-Drawable eignet sich für einfache Symbole. Die Materialsymbole sind gute Beispiele für die Bildtypen, die sich gut als Vektor-Drawables in einer App eignen. Im Gegensatz dazu haben viele Symbole für den App-Start viele Details, sodass sie sich besser als Rasterbilder eignen.

Das anfängliche Laden eines Vektor-Drawables kann mehr CPU-Zyklen kosten als das entsprechende Rasterbild. Danach sind die Speichernutzung und die Leistung in beiden Fällen ähnlich. Wir empfehlen, ein Vektorbild auf maximal 200 × 200 dp zu beschränken, da es andernfalls zu lange dauern kann.

Obwohl Vektor-Drawables eine oder mehrere Farben unterstützen, ist es in vielen Fällen sinnvoll, Symbole schwarz zu färben (android:fillColor="#FF000000"). Mit diesem Ansatz kannst du dem Vektor-Drawable, das du im Layout platziert hast, eine Färbung hinzufügen. Die Symbolfarbe ändert sich dann in die Färbungsfarbe. Wenn die Symbolfarbe nicht schwarz ist, kann sich die Symbolfarbe stattdessen mit der Färbung vermischen.

Abwärtskompatibilitätslösungen für Vektor-Drawable

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

Verfahren Drawables im APK VectorDrawable-XML-Elemente Version Build-Flags App-Code
PNG-Generierung Vektor und Raster Teilmenge 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ützte Codierungstechniken
Support Library 23.2 oder höher Vektor Volle Unterstützung Android-Plug-in für Gradle 2.0 oder höher Anweisungen zur Supportbibliothek erforderlich Ein Teil der unterstützten Codierungstechniken

Wenn du Vektor-Drawables verwendest, kann ein kleineres APK erstellt werden. Das anfängliche Laden der Vektor-Drawables kann jedoch länger dauern.

PNG-Generierung

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

Ab Android 5.0 (API-Level 21) und höher unterstützt Vector Asset Studio alle VectorDrawable-Elemente. Zur 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, obwohl 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 diese gemäß Ihrer Mindest-API-Ebene unterstützt werden.

Supportbibliothek

Für diese Technik sind die Android Support Library 23.2 oder höher und das Android-Plug-in für Gradle 2.0 oder höher erforderlich. Es werden nur Vektor-Drawables verwendet. Mit der Klasse VectorDrawableCompat in der Supportbibliothek 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 der Datei build.gradle eine Anweisung hinzufügen:

Groovig

android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

dependencies {
    implementation 'com.android.support:appcompat-v7:23.2.0'
}

Kotlin

android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

dependencies {
    implementation("com.android.support:appcompat-v7:23.2.0")
}

Außerdem musst du Codierungstechniken verwenden, die mit der Supportbibliothek kompatibel sind, z. B. das Attribut app:srcCompat anstelle des Attributs android:src für Vektor-Drawables. Weitere Informationen findest du unter Android Support Library 23.2.

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. Klicken Sie mit der rechten Maustaste auf den Ordner res und wählen Sie Neu > Vektor-Asset aus.
  4. Einige andere Projektansichten und -ordner verfügen ebenfalls über diesen Menüpunkt.

    Vector Asset Studio wird angezeigt.

    Abbildung 1. Vector Asset Studio.

  5. Wenn stattdessen das Dialogfeld Neues Android-Plug-in für Gradle erforderlich angezeigt wird, korrigieren Sie Ihre Gradle-Version so:
    1. Wählen Sie File > Project Structure (Datei > Projektstruktur) aus.
    2. Wählen Sie im Dialogfeld Projektstruktur die Option Projekt aus.
    3. Ändern Sie im Feld Version des Android-Plug-ins die Version des Android-Plug-ins für Gradle in 1.5.0 oder höher und klicken Sie auf OK.
    4. Gradle synchronisiert das Projekt.

    5. Klicken Sie in der Android-Ansicht des Fensters Projekt mit der rechten Maustaste auf den Ordner res und wählen Sie Neu > Vektor-Asset aus.
    6. Vector Asset Studio wird angezeigt.

  6. Fahren Sie mit dem Importieren einer Vektorgrafik 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:

Materialsymbol hinzufügen

Nachdem Sie Vector Asset Studio geöffnet haben, können Sie so ein Materialsymbol hinzufügen:

  1. Wählen Sie in Vector Asset Studio die Option Material Icon aus.
  2. Klicken Sie im Feld „Symbol“ auf die Schaltfläche.
  3. Das Dialogfeld Symbol auswählen wird angezeigt. Sie können filtern, welche Symbole sichtbar sind, indem Sie eine Symbolkategorie aus der Liste auf der linken Seite auswählen oder das Suchfeld eingeben (siehe Abbildung 2).

    Abbildung 2. Materialsymbole in Vector Asset Studio filtern.

  4. Wählen Sie ein Materialsymbol aus und klicken Sie auf OK. Das Symbol wird in der Vector Drawable Preview angezeigt.

  5. Optional können Sie den Ressourcennamen, die Größe, die Deckkraft und die RTL-Spiegelungseinstellung (Rechts-nach-links) ändern:
    • Name: Geben Sie einen neuen Namen ein, wenn Sie nicht den Standardnamen verwenden möchten. Vector Asset Studio erstellt automatisch einen eindeutigen Namen (mit einer Ziffer am Ende), wenn der Ressourcenname im Projekt bereits 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 sie im Vorschaubereich angezeigt.
    • Der Standardwert ist 24 × 24 dp, was in der Spezifikation Material Design definiert ist. Deaktivieren Sie das Kästchen, um zur Standardeinstellung zurückzukehren.

    • Deckkraft: Verwenden Sie den Schieberegler, um die Deckkraft des Bildes anzupassen. Die Änderung wird im Vorschaubereich angezeigt.
    • Automatische Spiegelung für RTL-Layout aktivieren: Wählen Sie diese Option aus, wenn ein Spiegelbild angezeigt werden soll, wenn das Layout von rechts nach links statt von links nach rechts erfolgt. Einige Sprachen werden beispielsweise von rechts nach links gelesen. Wenn Sie ein Pfeilsymbol haben, können Sie in diesem Fall ein Spiegelbild davon anzeigen. Wenn Sie mit einem älteren Projekt arbeiten, müssen Sie Ihrem App-Manifest möglicherweise auch android:supportsRtl="true" hinzufügen. Die automatische Spiegelung wird unter Android 5.0 (API-Level 21) und höher sowie in der Support Library unterstützt.
  6. Klicke auf Weiter.
  7. Ändern Sie optional das Modul und das Ressourcenverzeichnis:
    • Res Directory: Wählen Sie den Ressourcenquellsatz aus, dem Sie das Vektor-Drawable hinzufügen möchten: src/main/res, src/debug/res, src/release/res oder einen benutzerdefinierten Quellsatz. Der Hauptquellsatz gilt für alle Build-Varianten, einschließlich Debug- und Release-Varianten. Die Quellsätze für die Fehlerbehebung und den Release überschreiben den Hauptquellsatz und gelten für eine Version eines Builds. Der Quelltextsatz für die Fehlerbehebung dient nur der Fehlerbehebung. Um einen neuen Quellsatz zu definieren, wählen Sie Datei > Projektstruktur > app > Build-Typen aus. Sie können beispielsweise einen Betaquellensatz definieren und eine Version eines Symbols erstellen, das rechts unten den Text „BETA“ 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.

  8. Klicken Sie auf Fertig.
  9. Vector Asset Studio fügt dem Projekt im Ordner app/src/main/res/drawable/ eine XML-Datei hinzu, in der das Vektor-Drawable definiert ist. In der Android-Ansicht des Fensters Projekt kannst du die generierte Vektor-XML-Datei im Ordner Drawable ansehen.

  10. Erstellen Sie das Projekt.
  11. Wenn das Mindest-API-Level Android 4.4 (API-Level 20) und niedriger ist und Sie das Verfahren „Support Library“ 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/ ansehen.

    Sie sollten diese generierten Rasterdateien nicht bearbeiten, sondern mit der Vektor-XML-Datei arbeiten. Das Build-System generiert die Rasterdateien bei Bedarf automatisch neu, sodass Sie sie nicht pflegen 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 Lokale Datei aus.
  2. Die Datei muss sich auf einem lokalen Laufwerk befinden. Befindet sich die Datei beispielsweise im Netzwerk, müssen Sie sie zuerst auf ein lokales Laufwerk herunterladen.

  3. Klicken Sie auf ..., um eine Bilddatei anzugeben.
  4. Das Bild wird in der Vector Drawable Preview angezeigt.

    Wenn die SVG- oder PSD-Datei nicht unterstützte Elemente enthält, wird unten in Vector Asset Studio ein Fehler angezeigt (siehe Abbildung 3).

    Abbildung 3. In Vector Asset Studio werden einige Fehler angezeigt.

    Wenn Fehler auftreten, musst du überprüfen, ob das importierte Vektor-Drawable korrekt gerendert wird. Scrollen Sie durch die Liste, um die Fehler zu sehen.

    Eine Liste der unterstützten Elemente finden Sie unter Vector Drawable Backward-Compatibility-Lösungen. Weitere Informationen zu zulässigen PSD-Dateien finden Sie unter Support und Einschränkungen für PSD-Dateien.

  5. Optional können Sie den Ressourcennamen, die Größe, die Deckkraft und die RTL-Spiegelungseinstellung (Rechts-nach-links) ändern:
    • Name: Geben Sie einen neuen Namen ein, wenn Sie nicht den Standardnamen verwenden möchten. Vector Asset Studio erstellt automatisch einen eindeutigen Namen (mit einer Ziffer am Ende), wenn der 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. Anschließend ändert sich die Größe in die Größe des Bildes selbst. Jedes Mal, wenn Sie die Größe ändern, wird die Änderung im Vorschaubereich angezeigt. Der Standardwert ist 24 × 24 dp, was in der Spezifikation Material Design definiert ist.
    • Deckkraft: Verwenden Sie den Schieberegler, um die Deckkraft des Bildes anzupassen. Die Änderung wird im Vorschaubereich angezeigt.
    • Automatische Spiegelung für RTL-Layout aktivieren: Wählen Sie diese Option aus, wenn ein Spiegelbild angezeigt werden soll, wenn das Layout von rechts nach links statt von links nach rechts erfolgt. Einige Sprachen werden beispielsweise von rechts nach links gelesen. Wenn Sie ein Pfeilsymbol haben, können Sie in diesem Fall ein Spiegelbild davon anzeigen. Wenn Sie mit einem älteren Projekt arbeiten, müssen Sie Ihrem App-Manifest möglicherweise android:supportsRtl="true" hinzufügen. Die automatische Spiegelung wird ab Android 5.0 (API-Level 21) und in der Support Library unterstützt.
  6. Klicke auf Weiter.
  7. Ändern Sie optional das Ressourcenverzeichnis:
    • Res Directory: Wählen Sie den Ressourcenquellsatz aus, dem Sie das Vektor-Drawable hinzufügen möchten: src/main/res, src/debug/res, src/release/res oder einen benutzerdefinierten Quellsatz. Der Hauptquellsatz gilt für alle Build-Varianten, einschließlich Debug- und Release-Varianten. Die Quellsätze für die Fehlerbehebung und den Release überschreiben den Hauptquellsatz und gelten für eine Version eines Builds. Der Quelltextsatz für die Fehlerbehebung dient nur der Fehlerbehebung. Um einen neuen Quellsatz zu definieren, wählen Sie Datei > Projektstruktur > app > Build-Typen aus. Sie können beispielsweise einen Betaquellensatz definieren und eine Version eines Symbols erstellen, das rechts unten den Text „BETA“ 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.

  8. Klicken Sie auf Fertig.
  9. Vector Asset Studio fügt dem Projekt im Ordner app/src/main/res/drawable/ eine XML-Datei hinzu, in der das Vektor-Drawable definiert ist. In der Android-Ansicht des Fensters Projekt kannst du die generierte Vektor-XML-Datei im Ordner Drawable ansehen.

  10. Erstellen Sie das Projekt.
  11. Wenn das Mindest-API-Level Android 4.4 (API-Level 20) und niedriger ist und Sie das Verfahren „Support Library“ 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/ ansehen.

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

Ein Vektor-Drawable zu einem Layout hinzufügen

In einer Layoutdatei kannst du ein beliebiges Symbol-Widget wie ImageButton oder ImageView so einrichten, dass es auf ein Vektor-Drawable verweist. Das folgende Layout zeigt beispielsweise ein Vektor-Drawable, das auf einer Schaltfläche angezeigt wird:

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

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

  1. Öffnen Sie ein Projekt und importieren Sie ein Vektor-Drawable.
  2. In diesem Beispiel wird ein Telefon-/Tabletprojekt verwendet, das mit dem Assistenten für neue Projekte generiert wurde.

  3. Doppelklicken Sie in der Android-Ansicht des Fensters Projekt auf eine Layout-XML-Datei, z. B. content_main.xml.
  4. Klicken Sie auf den Tab Design, um den Layout-Editor aufzurufen.
  5. Ziehen Sie das ImageButton-Widget aus dem Fenster Palette in den Layout-Editor.
  6. Wählen Sie im Dialogfeld Ressourcen im linken Bereich Drawable und dann das importierte Vektor-Drawable aus. Klicken Sie auf OK.
  7. Das Vektor-Drawable wird auf dem ImageButton im Layout angezeigt.

  8. Wenn Sie die Farbe des Bildes in die im Design definierte Akzentfarbe ändern möchten, suchen Sie im Fenster Eigenschaften die Eigenschaft tint und klicken Sie auf ....
  9. Wählen Sie im Dialogfeld Ressourcen im linken Bereich Farbe und dann colorAccent aus. Klicken Sie auf OK.
  10. Die Farbe des Bildes ändert sich in die Akzentfarbe im Layout.

Wenn das Projekt die Support Library verwendet, sollte der ImageButton-Code in etwa 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 das Projekt nicht die Support Library verwendet, lautet der Vektor-Drawable-Code stattdessen android:src="@drawable/ic_build_black_24dp".

Im Code auf ein Vektor-Drawable verweisen

Normalerweise kannst du in deinem Code generisch auf eine Vektor-Drawable-Ressource verweisen. Wenn deine App ausgeführt wird, wird das entsprechende Vektor- oder Rasterbild automatisch je nach API-Ebene angezeigt:

  • In den meisten Fällen kannst du Vektor-Drawables im XML-Code als @drawable oder im Java-Code als Drawable bezeichnen.
  • Mit dem folgenden Layout-XML-Code wird beispielsweise das Bild auf eine Ansicht angewendet:

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

    Mit dem folgenden Java-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 Methode getResources() befindet sich in der Klasse Context, die für UI-Objekte wie Aktivitäten, Fragmente, Layouts, Ansichten usw. gilt.

  • Wenn deine App überhaupt die Support Library verwendet (auch wenn die build.gradle-Datei keine vectorDrawables.useSupportLibrary = true-Anweisung enthält), kannst du auch mit einer app:srcCompat-Anweisung auf ein Vektor-Drawable verweisen. Beispiele:
  • <ImageView
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        app:srcCompat="@drawable/myimage" />
    
  • Gelegentlich musst du die Drawable-Ressource in die exakte Klasse umwandeln, z. B. wenn du bestimmte Features der VectorDrawable-Klasse verwenden musst. Dazu können Sie Java-Code wie den folgenden verwenden:
  • Kotlin

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

    Java

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

Du kannst nur vom Hauptthread aus auf Vektor-Drawable-Ressourcen zugreifen.

Für das Verfahren „Support Library“ müssen Sie Programmiertechniken verwenden, die mit der Support Library kompatibel sind. Weitere Informationen findest du unter Android Support Library 23.2.

Von Vector Asset Studio generierten XML-Code ändern

Du kannst den Vektor-Drawable-XML-Code ändern, aber nicht die PNGs und den entsprechenden XML-Code, die beim Build generiert wurden. Wir raten jedoch davon ab.

Wenn Sie PNG-Dateien generieren, stellt Vector Asset Studio sicher, dass das Vektor-Drawable und die PNGs übereinstimmen und dass das Manifest den richtigen Code enthält. Wenn Sie Code hinzufügen, der unter Android 4.4 (API-Level 20) und niedriger nicht unterstützt wird, können sich Ihre 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 das Support Library-Verfahren nicht verwenden:

  1. Klicke im Fenster Projekt doppelt auf die generierte Vektor-XML-Datei im Ordner drawable.
  2. Die XML-Datei wird im Editor und im Vorschaufenster angezeigt.

    Abbildung 5: Eine Vektor-XML-Datei, die im Codeeditor und im Vorschaufenster angezeigt wird.

  3. Bearbeiten Sie den XML-Code entsprechend dem Mindest-API-Level:
    • 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.
    • Android 4.4 (API-Level 20) und niedriger – Vector Asset Studio unterstützt alle Drawable-Elemente und einen Teil der VectorDrawable-Elemente. Eine Liste finden Sie unter Vector Drawable Backward-Compatibility-Lösungen. Sie können die Werte im generierten Code ändern und unterstützte XML-Elemente hinzufügen.
  4. Erstelle das Projekt und überprüfe, ob die Vektor-Drawable- und die entsprechenden Rasterbilder identisch sind.
  5. Denken Sie daran, dass die generierten PNGs im Fenster Vorschau möglicherweise anders angezeigt werden als in der App, da es unterschiedliche Rendering-Engines und Änderungen gibt, die vor einem Build am Vektor-Drawable vorgenommen wurden. Wenn Sie der mit Vector Asset Studio erstellten Vektor-XML-Datei Code hinzufügen, werden Funktionen, die in Android 4.4 (API-Level 20) und niedriger nicht unterstützt werden, in den generierten PNG-Dateien nicht berücksichtigt. Wenn du Code hinzufügst, solltest du daher immer prüfen, ob die generierten PNGs mit dem Vektor-Drawable übereinstimmen. Dazu kannst du in der Ansicht „Projektdateien“ des Fensters Projekt doppelt auf die PNG-Datei klicken. Am linken Rand des Codeeditors wird auch das PNG-Bild angezeigt, wenn sich dein Code auf das Drawable bezieht (siehe Abbildung 6).

    Abbildung 6: Ein PNG-Bild, das am linken Rand des Code-Editors angezeigt wird.

Vektor-Drawable aus einem Projekt löschen

So entfernst du ein Vektor-Drawable aus einem Projekt:

  1. Löschen Sie im Fenster Projekt die generierte Vektor-XML-Datei. Wählen Sie dazu die Datei aus und drücken Sie die Taste Löschen (oder wählen Sie Bearbeiten > Löschen).
  2. Das Dialogfeld Safe Delete wird angezeigt.

  3. Wählen Sie optional Optionen aus, um festzustellen, wo die Datei im Projekt verwendet wird. Klicken Sie dann auf OK.
  4. Android Studio löscht die Datei aus dem Projekt und dem Laufwerk. Wenn Sie jedoch nach Orten im Projekt suchen, an denen die Datei verwendet wird und einige Nutzungen gefunden werden, können Sie diese ansehen und entscheiden, ob Sie die Datei löschen möchten.

  5. Wählen Sie Build > Clean Project (Erstellen > Projekt bereinigen) aus.
  6. Alle automatisch generierten PNG- und XML-Dateien, die dem gelöschten Vektor-Drawable entsprechen, werden aus dem Projekt und dem Laufwerk entfernt.

Bereitstellung einer App mit Vektor-Drawables

Wenn Sie die Support Library 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 bei einer Konvertierung der Vektorbilder in PNGs.

Wenn du Android 4.4 (API-Level 20) oder niedriger verwendest und in deinem Projekt entsprechende Vektor-Drawables und Rasterbilder vorhanden sind, hast du zwei Möglichkeiten, deine APK-Dateien zu senden:

  • 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-Levels. Wenn du keine entsprechenden Rasterbilder in das APK für Android 5.0 (API-Level 21) und höher einfügst, kann das APK viel kleiner sein. Weitere Informationen finden Sie unter Unterstützung mehrerer APKs.

Support und Einschränkungen für PSD-Dateien

In Vector Asset Studio werden nicht alle Funktionen der PSD-Datei unterstützt. In der folgenden Liste sind die unterstützten und nicht unterstützten Eigenschaften der PSD sowie einige Conversion-Details zusammengefasst.

Dokument

Unterstützt:

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

Conversion-Details:

  • Die Abmessungen des PSD-Dokuments werden zu den Dimensionen für den Vektor-Drawable und den Darstellungsbereich.

Nicht unterstützt:

  • Ein PSD-Farbmodus für Duo oder Multichannel

Formen

Unterstützt:

  • Ausschneiden von Masken, wenn die Clipping-Basis eine andere Form ist
  • Formvorgänge, einschließlich Zusammenführen/Hinzufügen, Schneiden, Subtrahieren und Ausschließen.

Nicht unterstützt:

  • Regel für ungerade Füllung von Photoshop-Formen. In Android 6.0 (API-Ebene 23) und niedriger unterstützen Vektor-Drawables nur die Ausfüllregel, die nicht null ist. Bei sich selbst überschneidenden Formen kann diese Einschränkung zu Rendering-Unterschieden zwischen der PSD und dem resultierenden Vektor-Drawable führen. Um dieses Problem zu beheben, füge der Form im Vektor-Drawable android:fillType="evenOdd" hinzu. 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, Bindestriche und Ausrichtung.
  • Einfarbige Füllfarben und Striche
  • Strich- und Füllfarben als RGB, Lab oder CMYK.

Conversion-Details:

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

Nicht unterstützt:

  • Farbfüllungen und Striche, die keine Volltonfarben sind, z. B. Farbverläufe.

Deckkraft

Unterstützt:

  • Formebenen mit einer Deckkraft von 0.

Conversion-Details:

  • In Vector Asset Studio wird die Deckkraft der Füllung mit der Deckkraft der Ebene multipliziert, um den Alphawert für die Füllung zu berechnen.
  • Das Tool multipliziert die Deckkraft der Ausschneidebasis (falls eine Beschneidungsbasis vorhanden ist) mit dem Alphawert für die Füllung, um die endgültige Füllung (Alpha) zu berechnen.
  • Das Tool multipliziert die Strichdeckkraft mit der Ebenendeckkraft, um den Alphawert für den Strich zu berechnen.
  • Das Tool multipliziert die Deckkraft der Ausschneidebasis (falls eine Beschneidungsbasis vorhanden ist) mit dem Strich alpha, um den endgültigen Strich Alpha zu berechnen.

Ebenen

Unterstützt:

  • Beliebige sichtbare Formebene.

Conversion-Details:

  • In Vector Asset Studio wird der Name der Ebenen in der Vektor-Drawable-Datei beibehalten.

Nicht unterstützt:

  • Ebeneneffekte
  • Anpassungs- und Textebenen.
  • Mischmodi (ignoriert)

Support und Einschränkungen für SVG-Dateien

In Vector Asset Studio werden nicht alle Funktionen für SVG-Dateien unterstützt. Im folgenden Abschnitt werden die unterstützten und nicht unterstützten Funktionen für die Konvertierung einer SVG-Datei in eine VectorDrawable zusammen mit zusätzlichen Konvertierungsdetails zusammengefasst.

Unterstützte Funktionen

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

Formen

VectorDrawable unterstützt SVG-Pfade.

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

Transformation

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

Gruppen

Das Tool unterstützt das Gruppieren von Elementen zur Verschiebung, Skalierung und Drehung. Gruppen unterstützen keine Deckkrafteigenschaften.

Das Tool wendet außerdem alle Gruppenstile und die Deckkraft auf untergeordnete Pfade an.

Füllungen und Striche

Pfade können mithilfe von durchgehenden Farben oder Farbverläufen (linear, radial oder eckig) ausgefüllt und gezeichnet werden. Es werden nur zentrierte Striche unterstützt. Mischmodi werden nicht unterstützt. Gestrichelte Pfade werden nicht unterstützt.

Masken

Das Tool unterstützt eine Ausschneidemaske pro Gruppe.

Funktionen, die vom SVG-Importer nicht unterstützt werden

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

  • Filtereffekte: Effekte wie Schlagschatten, Weichzeichnen und Farbmatrix werden nicht unterstützt.
  • Text: Die Umwandlung von Text in Formen mit anderen Tools wird empfohlen.
  • Musterfüllung