App-Symbole erstellen (Ansichten)

Jetpack Compose-Implementierung

Auf dieser Seite finden Sie Informationen zum Erstellen und Verwenden von App-Symbolen, die nur für ansichtsbasierte Layouts gelten. Ausführlichere Informationen zum Erstellen von App-Symbolen finden Sie unter App-Symbole erstellen. Dort wird auch das von uns empfohlene UI-Framework behandelt.

Symbol für Aktionsleiste oder Tab erstellen

Mit Image Asset Studio können Sie Symbole für Aktionsleiste und Tabs für View-basierte Layouts erstellen.

Aktionsleistensymbole sind grafische Elemente, die in der Aktionsleiste platziert werden und einzelne Aktionen repräsentieren. Weitere Informationen finden Sie unter Aktionen hinzufügen und verarbeiten, App-Leiste – Material Design{:.external} und Design der Aktionsleiste.

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

Image Asset Studio platziert die Symbole an den richtigen Stellen in den res/drawable-<density>/-Verzeichnissen.

Wir empfehlen, für Aktionsleisten- und Tab-Symbole das Material Design-Format zu verwenden, auch wenn Sie ältere Android-Versionen unterstützen. Verwenden Sie appcompat und andere Support-Bibliotheken, um Ihre Material Design-UI auf älteren Plattformversionen bereitzustellen.

Alternativ zu Image Asset Studio können Sie Vector Asset Studio verwenden, um Symbole für die Aktionsleiste und Tabs zu erstellen. Vektordrawables eignen sich für einfache Symbole und können die Größe Ihrer App reduzieren.

Nachdem Sie das Image Asset Studio geöffnet haben, können Sie ein Symbol für die Aktionsleiste oder den Tab hinzufügen. Gehen Sie dazu so vor:

  1. Wählen Sie im Feld Symboltyp die Option Symbole für Aktionsleiste und Tab aus.

  2. Wählen Sie einen Asset-Typ aus und geben Sie das Asset dann im Feld darunter an:

    • Klicken Sie im Feld Clip Art 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 verwenden.

    • Geben Sie im Feld Text einen Textstring ein und wählen Sie eine Schriftart aus.

    Das Symbol wird rechts im Bereich Quellasset und unten im Assistenten im Vorschau-Bereich angezeigt.

  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 (was durch einen Fehler unten im Assistenten angezeigt wird), wird er überschrieben. Der Name darf nur Kleinbuchstaben, Unterstriche und Ziffern enthalten.

    • Zuschneiden: Wenn Sie den Rand zwischen der Symbolgrafik und dem Rahmen im Quellasset anpassen möchten, wählen Sie Ja aus. Bei diesem Vorgang wird transparenter Raum entfernt, ohne das Seitenverhältnis zu ändern. Wenn Sie das Quell-Asset unverändert lassen möchten, wählen Sie Nein aus.

    • Abstand: Wenn Sie den Abstand des Quellassets auf allen vier Seiten anpassen möchten, bewegen Sie den Schieberegler. Wählen Sie einen Wert zwischen -10% und 50 % aus. Wenn Sie auch Kürzen auswählen, wird das Video zuerst gekürzt.

    • Design: Wählen Sie HOLO_LIGHT oder HOLO_DARK aus. 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.

    Image Asset Studio erstellt das Symbol in einem transparenten Quadrat, sodass an den Rändern etwas Platz ist. Der Innenabstand bietet ausreichend Platz für den Standardschatteneffekt des Symbols.

  4. Klicken Sie auf Weiter.

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

    • Res Directory (Ressourcenverzeichnis): Wählen Sie die Ressourcenquelle aus, der Sie das Bild-Asset hinzufügen möchten: src/main/res, src/debug/res, src/release/res oder eine benutzerdefinierte Quelle. Der Haupt-Source-Set gilt für alle Build-Varianten, einschließlich Debug- und Release-Varianten. Die Source-Sets für Debug und Release überschreiben das Haupt-Source-Set und gelten für eine Version eines Builds. Das Debug-Source-Set ist nur zum Debugging. Wenn Sie ein neues Source-Set definieren möchten, wählen Sie File > Project Structure > app > Build Types (Datei > Projektstruktur > App > Build-Typen) aus. Sie können beispielsweise eine Beta-Quellgruppe 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 Ausgabeordner werden die Bilder und die Ordner angezeigt, in denen sie in der Ansicht „Projektdateien“ des Fensters Projekt zu sehen sind.

  6. Klicken Sie auf Fertig.

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

Auf eine Bildressource im Code verweisen

Normalerweise können Sie in Ihrem Code auf generische Weise auf eine Bildressource verweisen. Wenn Ihre App ausgeführt wird, wird je nach Gerät automatisch das entsprechende Bild angezeigt:

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

    Im folgenden Layout-XML-Code wird das Drawable beispielsweise in einem ImageView angezeigt:

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

  • Wenn Ihre App die Support Library verwendet, können Sie mit einer app:srcCompat-Anweisung in XML-Code auf eine Bildressource verweisen. 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 Verzeichnis res/ Ihres Projekts haben, können Sie in Ihrem Java-Code oder Ihrem XML-Layout mit der Ressourcen-ID darauf verweisen. Mit dem folgenden Java-Code wird ein ImageView für die Verwendung der drawable/myimage.png-Ressource festgelegt:

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 Auf App-Ressourcen zugreifen.