App-Symbole erstellen

Symbole helfen Nutzern, Ihre App und die darin ausgeführten Aktionen zu identifizieren. Mit Compose können Sie auf die Material-Symbole zugreifen und sie direkt Ihrer App hinzufügen. Um benutzerdefinierte Symbole für Ihre App mit Views erstellen, bietet Android Studio Image Asset Studio.

Mit Compose Symbole in Ihrer App hinzufügen

Mit der Funktion "Schreiben" können Sie Compose Material Library oder Für den Zugriff auf die Compose Material 3-Bibliothek alle Materialsymbole. Verwenden Sie dann die zusammensetzbare Funktion Icon, um Ihrer App Symbole hinzuzufügen. Die Material Design-Symbole eignen sich am besten für Symbole in der Aktionsleiste, Tabsymbole oder Benachrichtigungssymbole. Weitere Informationen finden Sie unter Material Icons.

Wenn Sie benutzerdefinierte Symbole erstellen möchten, etwa ein App Launcher-Symbol, verwenden Sie Bild-Asset-Studio Für Launcher-Symbole: AndroidManifest.xml muss auf den mipmap/-Speicherort verweisen. In Image Asset Studio wird dieser Code automatisch. Der folgende Manifestdateicode verweist auf die ic_launcher im Verzeichnis mipmap/:

  <application android:name="ApplicationTitle"
            android:label="@string/app_label"
            android:icon="@mipmap/ic_launcher" >

Bild-Asset-Studio

Android Studio enthält ein Tool namens Image Asset Studio, mit dem du deine eigene App erstellen kannst. Symbole von Materialsymbole benutzerdefinierte Bilder und Textzeichenfolgen. Es generiert eine Reihe von Symbolen in der entsprechenden Auflösung für jede Pixeldichte, die von Ihrer App unterstützt wird. Die neu generierten Symbole werden in Image Asset Studio in dichtespezifischen Ordnern unter dem Verzeichnis res/ in Ihrem Projekt. Zur Laufzeit verwendet Android basierend auf der Bildschirmdichte des Geräts, auf dem Ihre App ausgeführt wird.

Mit Image Asset Studio kannst du die folgenden Symboltypen generieren:

  • Launcher-Symbole
  • Aktionsleisten- und Tabsymbole
  • Benachrichtigungssymbole

In den folgenden Abschnitten werden die Symboltypen beschrieben, die Sie erstellen können, sowie die Bild- und Texteingaben die Sie verwenden können.

Adaptive und alte Launcher-Symbole

Ein Launcher-Symbol ist eine Grafik, die Nutzern Ihre App präsentiert. Sie kann:

  • Sie werden in der Liste der auf einem Gerät installierten Apps und auf dem Startbildschirm angezeigt.
  • Verknüpfungen in Ihrer App darstellen, z. B. ein Symbol für eine Kontaktverknüpfung, über das Details zu einem Kontakt geöffnet werden
  • Von Launcher-Apps verwendet werden.
  • Helfen Sie Nutzern, Ihre App bei Google Play zu finden.

Adaptive Launcher-Symbole können auf verschiedenen Gerätemodellen in verschiedenen Formen angezeigt werden und sind ab Android 8.0 (API-Ebene 26) verfügbar. In Android Studio 3.0 wird die Unterstützung für das Erstellen adaptiver Symbole mit Image Asset Studio eingeführt. In Image Asset Studio werden Vorschauen eines adaptiven Symbols in Kreis-, Quadrat-, Quadrat- und kreisförmigen Formen sowie eine Vollansicht des Symbols generiert. Image Asset Studio generiert auch alte, runde und Google Play Store- eine Vorschau des Symbols anzeigen. Ein altes Launcher-Symbol ist eine Grafik, die Ihre App auf dem Startbildschirm und im Launcher-Fenster. Alte Launcher-Symbole sind für Geräte mit Android 7.1 (API-Ebene 25) oder niedriger gedacht, die keine adaptiven Symbole unterstützen und auf verschiedenen Gerätemodellen nicht in unterschiedlichen Formen angezeigt werden.

Image Asset Studio platziert die Symbole an den richtigen Stellen in den res/mipmap-density/-Verzeichnissen. Außerdem wird ein Bild mit 512 × 512 Pixeln erstellt, das für den Google Play Store geeignet ist.

Wir empfehlen, den Material Design-Stil für Launcher-Symbole zu verwenden, auch wenn Sie ältere Android-Versionen unterstützen.

Weitere Informationen finden Sie unter . Adaptive Launcher-Symbole und Produktsymbole – Material Design.

Symbole für die Aktionsleiste und Tabs

Aktionsleistensymbole sind grafische Elemente, die in der Aktionsleiste platziert werden und einzelne umzusetzenden Maßnahmen. Weitere Informationen finden Sie unter Aktionen hinzufügen und verarbeiten. App Bar – Material Design und Aktionsleistendesign .

Tab-Symbole sind grafische Elemente, die zur Darstellung einzelner Tabs in einer UI mit mehreren Tabs dienen. Jedes Tab-Symbol hat zwei Status: „nicht ausgewählt“ und „ausgewählt“. Weitere Informationen finden Sie unter Wischansichten mit Tabs erstellen und Tabs – Material Design.

In Image Asset Studio werden die Symbole an den richtigen Stellen im res/drawable-density/ Verzeichnisse enthalten.

Wir empfehlen, für die Aktionsleiste das Material Design zu verwenden. und Tab-Symbole, auch wenn Sie ältere Android-Versionen unterstützen. appcompat und andere verwenden Supportbibliotheken um deine Material Design-UI für ältere Plattformversionen bereitzustellen.

Alternativ zu Image Asset Studio können Sie mit Vector Asset Studio Symbole für die Aktionsleiste und Tabs erstellen. Vektorgrafiken eignen sich für einfache Symbole und können die Größe Ihrer App verringern.

Benachrichtigungssymbole

Eine Benachrichtigung ist eine Meldung, die Sie dem Nutzer außerhalb der normalen Benutzeroberfläche Ihrer App anzeigen können. In Image Asset Studio werden Benachrichtigungssymbole an den richtigen Stellen in den res/drawable-density/-Verzeichnissen platziert:

  • Symbole für Android 2.2 (API-Ebene 8) und niedriger werden in res/drawable-density/-Verzeichnissen platziert.
  • Symbole für Android 2.3 bis 2.3.7 (API-Level 9 bis 10) befinden sich res/drawable-density-v9/ Verzeichnisse.
  • Symbole für Android 3 (API-Level 11) und höher werden in res/drawable-density-v11/-Verzeichnissen abgelegt.

Wenn Ihre App Android 2.3 bis 2.3.7 (API-Ebene 9 bis 10) unterstützt, generiert Image Asset Studio eine graue Version Ihres Symbols. In neueren Android-Versionen wird das weiße Symbol verwendet, das von Image Asset Studio generiert wird.

Weitere Informationen finden Sie unter Benachrichtigungen, Material Design für Benachrichtigungen, Änderungen bei Benachrichtigungen in Android 5.0, Benachrichtigungen, Android 4.4 und niedriger und Symbole in der Statusleiste, Android 3.0 und niedriger.

Clipart

Mit Image Asset Studio können Sie Google-Materialsymbole ganz einfach im VectorDrawable- und PNG-Format importieren. Wählen Sie dazu einfach ein Symbol in einem Dialogfeld aus. Weitere Informationen finden Sie unter Material Icons.

Bilder

Sie können eigene Bilder importieren und an den Symboltyp anpassen. Image Asset Studio unterstützt die folgenden Dateitypen: PNG (bevorzugt), JPG (akzeptabel) und GIF (nicht empfohlen).

Textstrings

Mit Image Asset Studio können Sie eine Textzeichenfolge in verschiedenen Schriftarten eingeben und auf einem Symbol platzieren. Das textbasierte Symbol wird in PNG-Dateien für verschiedene Dichten konvertiert. Sie können die Schriftarten verwenden, auf Ihrem Computer installiert sind.

Image Asset Studio ausführen

So starten Sie Image Asset Studio:

  1. Wählen Sie im Fenster Projekt die Android-Ansicht aus.
  2. Klicken Sie mit der rechten Maustaste auf den Ordner res und wählen Sie Neu > Image Asset aus.

    Der Assistent für adaptive und alte Symbole in Image Asset Studio

  3. Führen Sie die folgenden Schritte aus:

Adaptive und alte Launcher-Symbole erstellen

Nachdem Sie Image Asset Studio geöffnet haben, können Sie adaptive und alte Symbole hinzufügen. Gehen Sie dazu so vor:

  1. Wählen Sie im Feld Symboltyp die Option Launcher-Symbole (Adaptive und Legacy) verwendet.
  2. Wählen Sie auf dem Tab Ebene im Vordergrund einen Asset-Typ aus und geben Sie dann das Asset im darunter stehenden Feld an:
    • Wählen Sie Image aus, um den Pfad für eine Bilddatei anzugeben.
    • Wähle Clip Art aus, um ein Bild aus der Symbolset von Material Design.
    • Wählen Sie Text aus, um einen Textstring anzugeben, und wählen Sie eine Schriftart aus.
  3. Wähle auf dem Tab Hintergrundebene einen Asset-Typ und dann geben Sie das Asset im Feld darunter an. Sie können entweder eine Farbe auswählen oder ein Bild als Hintergrundebene festlegen.
  4. Prüfen Sie auf dem Tab Optionen die Standardeinstellungen und bestätigen Sie, dass Sie alte, runde und Google Play Store-Symbole generieren möchten.
  5. Optional können Sie den Namen und die Anzeigeeinstellungen für die Tabs Ebene im Vordergrund und Ebene im Hintergrund ändern:
    • Name: Wenn Sie den Standardnamen nicht verwenden möchten, geben Sie einen neuen Namen ein. Namen. Wenn dieser Ressourcenname bereits im Projekt vorhanden ist, wird er überschrieben, was unten im Assistenten durch einen Fehler angezeigt wird. Der Name darf nur Kleinbuchstaben, Unterstriche und Ziffern enthalten.
    • Zuschneiden: Hiermit können Sie den Rand zwischen Symbolgrafik und Rahmen anpassen. im Quell-Asset auf Ja. Bei diesem Vorgang werden transparente Bereiche entfernt, während das Seitenverhältnis beibehalten wird. Um die Quell-Asset nicht geändert haben, wählen Sie Nein aus.
    • Farbe: Du kannst die Farbe eines Clip Art oder eines Textsymbol auf das Feld. Führen Sie im Dialogfeld Farbe auswählen eine Farbe angeben und dann auf Auswählen klicken. Der neue Wert erscheint in auf dem Feld.
    • Größe ändern: Legen Sie mit dem Schieberegler einen Skalierungsfaktor in Prozent fest. um die Größe eines Bild-, Clip-Art- oder Textsymbols zu ändern. Dieses Steuerelement ist für die Hintergrundebene deaktiviert, wenn Sie einen Asset-Typ vom Typ Farbe angeben.
  6. Klicken Sie auf Weiter.
  7. Ändern Sie optional das Ressourcenverzeichnis: Wählen Sie den Satz der Ressourcenquelle aus. wo Sie das Bild-Asset einfügen möchten: src/main/res. src/debug/res, src/release/res oder einen benutzerdefinierten Quellsatz angegeben. Das Hauptquellenset gilt für alle Buildvarianten, einschließlich Debug- und Release-Varianten. Die Debug- und Release-Quellsätze überschreiben den Haupt-Quellsatz und gelten für eine Version eines Builds. Der Debug-Quellsatz dient nur zur Fehlerbehebung. Um einen neuen Quellensatz zu definieren, wählen Sie Datei > Projektstruktur > App > Build-Typen. Sie können beispielsweise einen Beta-Quellensatz definieren und eine Version einer Symbol mit dem Text „BETA“ in der unteren rechten Ecke. Weitere Informationen finden Sie unter Konfigurieren Build-Varianten.
  8. Klicken Sie auf Fertig. In Image Asset Studio werden die Bilder mipmap-Ordner für die verschiedenen Punktdichten.

Vorschau von Designs für App-Symbole

In Android Studio können Sie sich eine Vorschau Ihres thematischen App-Symbols ansehen und testen, wie es sich an die Farbgebung des Hintergrunds des Nutzers anpasst. Wenn Sie eine Vorschau des App-Symbols mit dem Design sehen möchten, öffnen Sie die Datei launcher.xml, in der das Symbol definiert ist, und verwenden Sie dann die Auswahl System-UI-Modus in der Symbolleiste, um den Hintergrund zu wechseln und zu sehen, wie das Symbol reagiert.

Weitere Informationen zum Erstellen von App-Symboldesigns finden Sie unter Adaptive Symbole:

Auswahl des System-UI-Modus

Du kannst App-Symbole auf verschiedenen Hintergründen in der Vorschau ansehen.

Symbol für eine Aktionsleiste oder einen Tab erstellen

Nachdem Sie Image Asset Studio geöffnet haben, können Sie eine Aktionsleiste oder ein Tab-Symbol hinzufügen. Gehen Sie dazu so vor:

  1. Wählen Sie im Feld Symboltyp die Option Aktionsleiste und Tabsymbole aus.
  2. Wählen Sie einen Asset-Typ aus und geben Sie das Asset dann im Feld darunter an:
    • Klicken Sie auf die Schaltfläche im Feld Clip Art.

      • Wählen Sie im Dialogfeld Symbol auswählen ein Materialsymbol aus und klicken Sie dann auf OK.

    • Geben Sie im Feld Pfad den Pfad und den Dateinamen des Bildes an. Klicken Sie auf ..., um ein Dialogfeld zu öffnen.
    • Geben Sie im Feld Text einen Textstring ein und wählen Sie eine Schriftart aus.

    Das Symbol wird rechts im Bereich Quell-Asset angezeigt. Vorschaubereich unten im Assistenten.

  3. Optional können Sie den Namen und die Anzeigeoptionen ändern:
    • Name: Wenn Sie den Standardnamen nicht verwenden möchten, geben Sie einen neuen Namen ein. Wenn dieser Ressourcenname bereits im Projekt vorhanden ist, wie durch einen Fehler unter werden sie überschrieben. Der Name darf Kleinbuchstaben enthalten nur Zeichen, Unterstriche und Ziffern enthalten.
    • Zuschneiden: Wählen Sie Ja aus, um den Abstand zwischen dem Symbol und dem Rahmen im Quell-Asset anzupassen. Dieser Vorgang wird transparenter Bereich entfernt, während wobei das Seitenverhältnis beibehalten wird. Wenn das Quell-Asset unverändert bleiben soll, wählen Sie Nein aus.
    • Abstand: Wenn Sie den Abstand des Quell-Assets an allen vier Seiten anpassen möchten, bewegen Sie den Schieberegler. Wählen Sie einen Wert zwischen -10% und 50 % aus. Wenn Sie auch Zuschneiden auswählen, wird zuerst zugeschnitten.
    • Design: Auswählen HOLO_LIGHT oder HOLO_DARK. Wenn Sie eine Farbe im Dialogfeld Farbe auswählen angeben möchten, wählen Sie BENUTZERDEFINIERT aus und klicken Sie dann auf das Feld Benutzerdefinierte Farbe.

    In Image Asset Studio wird das Symbol in einem transparenten Quadrat erstellt, damit es einen gewissen Abstand gibt. an den Kanten. Der Innenrand bietet ausreichend Platz für den standardmäßigen Schlagschatten-Symboleffekt.

  4. Klicken Sie auf Weiter.
  5. Ändern Sie optional das Ressourcenverzeichnis:
    • Res Directory (Ressourcenverzeichnis): Wählen Sie das Ressourcenquellen-Set aus, dem Sie das Bild-Asset hinzufügen möchten: src/main/res, src/debug/res, src/release/res oder ein benutzerdefiniertes Quellen-Set. Der Hauptquellsatz gilt für alle Build-Varianten, einschließlich Debuggen und veröffentlichen. Die Debug- und Release-Quellsätze überschreiben den Haupt-Quellsatz und werden auf eine Version eines Builds angewendet. Der Debug-Quellsatz dient nur zur Fehlerbehebung. Wenn Sie einen neuen Quellsatz definieren möchten, wählen Sie Datei > Projektstruktur > App > Build-Typen aus. Sie könnten z. B. einen Beta-Quellensatz definieren und einen Version eines Symbols mit dem Text "BETA" in der unteren rechten Ecke. Weitere Informationen finden Sie unter Buildvarianten konfigurieren.

    Im Bereich Output Directories (Ausgabeverzeichnisse) werden die Bilder und die Ordner angezeigt, in denen sie im Fenster Project (Projekt) in der Project Files view (Ansicht „Projektdateien“) zu sehen sind.

  6. Klicken Sie auf Fertig.

    7. In Image Asset Studio werden die Bilder in den drawable-Ordnern für die verschiedenen Dichten.

Benachrichtigungssymbol erstellen

Nachdem Sie Image Asset Studio geöffnet haben, können Sie ein Benachrichtigungssymbol hinzufügen. Gehen Sie dazu so vor:

  1. Wählen Sie im Feld Symboltyp die Option Benachrichtigungssymbole aus.
  2. Wählen Sie einen Asset-Typ aus und geben Sie das Asset im darunter stehenden Feld an:
    • Klicken Sie im Feld Clipart auf die Schaltfläche.

      • Wählen Sie im Dialogfeld Symbol auswählen ein Materialsymbol aus und klicken Sie dann auf OK.

    • Geben Sie im Feld Pfad den Pfad und den Dateinamen des Bildes an. Klicken Sie auf ..., um ein Dialogfeld zu öffnen.
    • Geben Sie im Feld Text einen Textstring ein und wählen Sie eine Schriftart aus.

    Das Symbol wird rechts im Bereich Quell-Asset angezeigt. Vorschaubereich unten im Assistenten.

  3. Optional können Sie den Namen und die Anzeigeoptionen ändern:
    • Name: Wenn Sie den Standardnamen nicht verwenden möchten, geben Sie einen neuen Namen ein. Wenn dieser Ressourcenname bereits im Projekt vorhanden ist, wie durch einen Fehler unter werden sie überschrieben. Der Name darf Kleinbuchstaben enthalten nur Zeichen, Unterstriche und Ziffern enthalten.
    • Zuschneiden: Wählen Sie Ja aus, um den Abstand zwischen dem Symbol und dem Rahmen im Quell-Asset anzupassen. Bei diesem Vorgang werden transparente Bereiche entfernt, während das Seitenverhältnis beibehalten wird. So verlassen Sie das Quell-Asset unverändert lassen, wählen Sie Nein aus.
    • Abstand: Wenn Sie den Abstand des Quell-Assets an allen vier Seiten anpassen möchten, bewegen Sie den Schieberegler. Wählen Sie einen Wert zwischen -10 % und 50 % aus. Wenn Sie auch Zuschneiden auswählen, wird zuerst geschnitten.

    In Image Asset Studio wird das Symbol in einem transparenten Quadrat erstellt, damit es einen gewissen Abstand gibt. an den Kanten. Der Abstand bietet ausreichend Platz für den standardmäßigen Schlagschatteneffekt für Symbole.

  4. Klicken Sie auf Weiter.
  5. Ändern Sie optional das Ressourcenverzeichnis:
    • Res Directory (Ressourcenverzeichnis): Wählen Sie das Ressourcenquellen-Set aus, dem Sie das Bild-Asset hinzufügen möchten: src/main/res, src/debug/res, src/release/res oder ein benutzerdefiniertes Quellen-Set. Der Haupt-Quellsatz gilt für alle Buildvarianten, einschließlich Debug- und Release-Varianten. Die Debug- und Release-Quellsätze überschreiben den Haupt-Quellsatz und werden auf eine Version eines Builds angewendet. Die Quelle für die Fehlerbehebung dient nur der Fehlerbehebung. Um eine neue Quelle zu definieren Datei > Projektstruktur > app > Build-Typen. Sie können beispielsweise ein Beta-Quellset definieren und eine Version eines Symbols erstellen, die rechts unten den Text „BETA“ enthält. Weitere Informationen finden Sie unter Build-Varianten konfigurieren

    Im Bereich Output Directories werden die Bilder und Ordner angezeigt. wo sie in Ansicht „Projektdateien“ des Projekt.

  6. Klicken Sie auf Fertig.

    7. Image Asset Studio fügt die Bilder in den Ordnern drawable für die verschiedenen Dichten und Versionen hinzu.

Bildressourcen im Code mit Ansichten referenzieren

Sie können in Ihrem Code normalerweise ganz allgemein auf eine Bildressource verweisen. ausgeführt wird, wird das entsprechende Bild automatisch angezeigt. Gerät:

  • In den meisten Fällen können Sie Bildressourcen im XML-Code als @drawable oder im Java-Code als Drawable angeben.

    • Mit dem folgenden Layout-XML-Code wird beispielsweise das Drawable in einem ImageView:

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

    Im 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 und Ansichten gilt.

  • Wenn Ihre App die Support Library verwendet, können Sie auf eine Bildressource in XML-Code mit einem app:srcCompat-Anweisung. Beispiel:
    • <ImageView
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    app:srcCompat="@drawable/myimage" />

Sie können nur über den Hauptthread auf Bildressourcen zugreifen.

Nachdem Sie eine Bildressource im res/-Verzeichnis Ihres Projekts erstellt haben, können Sie sie über die Ressourcen-ID in Ihrem Java-Code oder XML-Layout referenzieren. Der folgende Java-Code legt eine ImageView die Ressource drawable/myimage.png:

Kotlin

findViewById<ImageView>(R.id.myimageview).apply {
    setImageResource(R.drawable.myimage)
}

Java

ImageView imageView = (ImageView) findViewById(R.id.myimageview);
imageView.setImageResource(R.drawable.myimage);

Weitere Informationen finden Sie unter Weitere Informationen finden Sie unter „Ressourcen aufrufen“.

Symbol aus einem Projekt löschen

So entfernen Sie ein Symbol aus einem Projekt:

  1. Wählen Sie im Fenster Projekt die Android-Ansicht aus.
  2. Maximieren Sie den Ordner res/mipmap für ein Launcher-Symbol oder den res/drawable für andere Arten von Symbolen.
  3. Suchen Sie nach einem Unterordner mit dem Namen des Symbols, das Sie löschen möchten.

    4. Dieser Ordner enthält das Symbol in unterschiedlicher Dichte.

  4. Wählen Sie den Ordner aus und drücken Sie die Taste Entf.

    5. Alternativ können Sie auch auf Bearbeiten > Löschen: Sie können auch mit der rechten Maustaste auf die Datei klicken und Löschen auswählen.

    Das Dialogfeld Sicheres Löschen wird angezeigt.

  5. Wählen Sie optional Optionen aus, um herauszufinden, wo das Symbol im Projekt verwendet wird, und klicken Sie auf OK.

    6. Android Studio löscht die Dateien aus dem Projekt und aus dem Laufwerk. Wenn Sie jedoch nach für die Stellen im Projekt, an denen die Dateien verwendet werden und einige Nutzungen gefunden werden, können Sie diese aufrufen und entscheiden, ob sie gelöscht werden sollen. Sie müssen diese Verweise löschen oder ersetzen, damit Ihr Projekt erfolgreich kompiliert werden kann.

  6. Wählen Sie Build aus > Projekt bereinigen:

    7. Android Studio entfernt alle generierten Bilddateien, die der gelöschten Image-Ressource entsprechen. Sie werden aus dem Projekt und dem Laufwerk entfernt.

  7. Beheben Sie bei Bedarf alle verbleibenden Fehler, die auf Code zurückzuführen sind, der auf die Ressource verweist.

    8. Android Studio hebt diese Fehler in Ihrem Code hervor. Wenn Sie alle Referenzen aus können Sie Ihr Projekt erfolgreich neu erstellen.