Stile und Designs

Jetpack Compose

Jetpack Compose ist das empfohlene UI-Toolkit für Android. Informationen zum Arbeiten mit Designs in Compose

Designsysteme in Compose →

Mit Stilen und Designs in Android können Sie die Details Ihres App-Designs von der UI-Struktur und dem UI-Verhalten trennen, ähnlich wie bei Stylesheets im Webdesign.

Ein Stil ist eine Sammlung von Attributen, die das Erscheinungsbild einer einzelnen View festlegen. Ein Stil kann Attribute wie Schriftfarbe, Schriftgröße, Hintergrundfarbe und vieles mehr angeben.

Ein Design ist eine Sammlung von Attributen, die auf eine gesamte App, Aktivität oder Ansichtshierarchie angewendet wird, nicht nur auf eine einzelne Ansicht. Wenn Sie ein Design anwenden, wird jedes Attribut des Designs, das von einer Ansicht in der App oder Aktivität unterstützt wird, auf diese Ansicht angewendet. Mit Designs können auch Stile auf Nicht-Ansichtselemente wie die Statusleiste und den Fensterhintergrund angewendet werden.

Stile und Designs werden in einer Stilressourcendatei in res/values/, die in der Regel styles.xml heißt, deklariert.

Abbildung 1 : Zwei Designs, die auf dieselbe Aktivität angewendet werden: Theme.AppCompat (links) und Theme.AppCompat.Light (rechts).

Designs im Vergleich zu Stilen

Designs und Stile haben viele Gemeinsamkeiten, werden aber für unterschiedliche Zwecke verwendet. Sie haben dieselbe grundlegende Struktur: ein Schlüssel-Wert-Paar, das Attribute Ressourcen zuordnet.

Ein Stil gibt Attribute für einen bestimmten Ansichtstyp an. Ein Stil kann beispielsweise die Attribute einer Schaltfläche angeben. Jedes Attribut, das Sie in einem Stil angeben, ist ein Attribut, das Sie in der Layoutdatei festlegen können. Wenn Sie alle Attribute in einen Stil extrahieren, können Sie sie ganz einfach in mehreren Widgets verwenden und verwalten.

Ein Design definiert eine Sammlung benannter Ressourcen, auf die von Stilen, Layouts, Widgets usw. verwiesen werden kann. Designs weisen Android-Ressourcen semantische Namen wie colorPrimary zu.

Stile und Designs sollen zusammen verwendet werden. Beispielsweise kann ein Stil festlegen, dass ein Teil einer Schaltfläche colorPrimary und ein anderer Teil colorSecondary ist. Die tatsächlichen Definitionen dieser Farben werden im Design bereitgestellt. Wenn das Gerät in den Nachtmodus wechselt, kann Ihre App vom „hellen“ zum „dunklen“ Design wechseln und die Werte für alle diese Ressourcennamen ändern. Sie müssen die Stile nicht ändern, da sie die semantischen Namen und keine spezifischen Farbdefinitionen verwenden.

Weitere Informationen zur Zusammenarbeit von Designs und Stilen finden Sie im Blogpost Android styling: themes vs styles.

Stil erstellen und anwenden

Öffnen Sie die Datei res/values/styles.xml Ihres Projekts, um einen neuen Stil zu erstellen. Führen Sie für jeden Stil, den Sie erstellen möchten, die folgenden Schritte aus:

1. Fügen Sie ein <style>-Element mit einem Namen hinzu, der den Stil eindeutig identifiziert.
2. Fügen Sie für jedes Stilattribut, das Sie definieren möchten, ein -Element hinzu.<item> Der name in jedem Element gibt ein Attribut an, das Sie sonst als XML-Attribut in Ihrem Layout verwenden. Der Wert im <item>-Element ist der Wert für dieses Attribut.

Angenommen, Sie definieren den folgenden Stil:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="GreenText" parent="TextAppearance.AppCompat">
        <item name="android:textColor">#00FF00</item>
    </style>
</resources>

Sie können den Stil so auf eine Ansicht anwenden:

<TextView
    style="@style/GreenText"
    ... />

Jedes im Stil angegebene Attribut wird auf diese Ansicht angewendet, wenn die Ansicht es akzeptiert. Alle Attribute, die von der Ansicht nicht akzeptiert werden, werden ignoriert.

Anstatt einen Stil auf einzelne Ansichten anzuwenden, wenden Sie Stile in der Regel als Design für die gesamte App, Aktivität oder Sammlung von Ansichten an, wie in einem anderen Abschnitt dieses Leitfadens beschrieben.

Stil erweitern und anpassen

Wenn Sie eigene Stile erstellen, erweitern Sie immer einen vorhandenen Stil aus dem Framework oder der Support Library, damit die Kompatibilität mit den UI-Stilen der Plattform erhalten bleibt. Um einen Stil zu erweitern, geben Sie den Stil, den Sie erweitern möchten, mit dem Attribut parent an. Anschließend können Sie die übernommenen Stilattribute überschreiben und neue hinzufügen.

Sie können beispielsweise das Standardtextdesign der Android-Plattform übernehmen und es so ändern:

<style name="GreenText" parent="@android:style/TextAppearance">
    <item name="android:textColor">#00FF00</item>
</style>

Übernehmen Sie Ihre Kern-App-Stile jedoch immer aus der Android Support Library. Die Stile in der Support Library sorgen für Kompatibilität, indem jeder Stil für die UI-Attribute optimiert wird, die in der jeweiligen Version verfügbar sind. Die Stile der Support Library haben oft einen ähnlichen Namen wie der Stil der Plattform, enthalten aber AppCompat.

Wenn Sie Stile aus einer Bibliothek oder Ihrem eigenen Projekt übernehmen möchten, deklarieren Sie den Namen des übergeordneten Stils ohne den Teil @android:style/, der im vorherigen Beispiel gezeigt wird. Im folgenden Beispiel werden Stile für das Textdesign aus der Support Library übernommen:

<style name="GreenText" parent="TextAppearance.AppCompat">
    <item name="android:textColor">#00FF00</item>
</style>

Sie können Stile auch übernehmen, indem Sie den Namen eines Stils mit einer Punktnotation erweitern, anstatt das Attribut parent zu verwenden. Dies gilt jedoch nicht für Stile der Plattform. Das heißt, Sie stellen dem Namen Ihres Stils den Namen des Stils voran, den Sie übernehmen möchten, getrennt durch einen Punkt. Dies tun Sie in der Regel nur, wenn Sie Ihre eigenen Stile erweitern, nicht Stile aus anderen Bibliotheken. Der folgende Stil übernimmt beispielsweise alle Stile aus GreenText im vorherigen Beispiel und erhöht dann die Textgröße:

<style name="GreenText.Large">
    <item name="android:textSize">22dp</item>
</style>

Sie können Stile auf diese Weise beliebig oft übernehmen, indem Sie weitere Namen verketten.

In den verschiedenen Klassenreferenzen finden Sie in der Tabelle „XML Attribute“ die Attribute, die Sie mit einem <item>-Tag deklarieren können. Alle Ansichten unterstützen XML-Attribute aus der Basisklasse View. Viele Ansichten fügen eigene spezielle Attribute hinzu. Zu den TextView XML-Attributen gehört beispielsweise das android:inputType Attribut, das Sie auf eine Textansicht anwenden können, die Eingaben empfängt, z. B. ein EditText Widget.

Stil als Design anwenden

Sie können ein Design auf dieselbe Weise erstellen wie Stile. Der Unterschied besteht darin, wie Sie es anwenden: Anstatt einen Stil mit dem Attribut style auf eine Ansicht anzuwenden, wenden Sie ein Design mit dem Attribut android:theme entweder auf das Tag <application> oder auf ein <activity>-Tag in der Datei AndroidManifest.xml an.

So wenden Sie beispielsweise das „dunkle“ Material Design-Design der Android Support Library auf die gesamte App an:

<manifest ... >
    <application android:theme="@style/Theme.AppCompat" ... >
    </application>
</manifest>

Und so wenden Sie das „helle“ Design nur auf eine Aktivität an:

<manifest ... >
    <application ... >
        <activity android:theme="@style/Theme.AppCompat.Light" ... >
        </activity>
    </application>
</manifest>

Jede Ansicht in der App oder Aktivität wendet die Stile an, die sie unterstützt und die im angegebenen Design definiert sind. Wenn eine Ansicht nur einige der im Stil deklarierten Attribute unterstützt, werden nur diese Attribute angewendet und die nicht unterstützten Attribute ignoriert.

Ab Android 5.0 (API-Level 21) und Android Support Library v22.1 können Sie das Attribut android:theme auch für eine Ansicht in der Layoutdatei angeben. Dadurch wird das Design für diese Ansicht und alle untergeordneten Ansichten geändert. Das ist nützlich, um Farbpaletten für Designs in einem bestimmten Teil der Benutzeroberfläche zu ändern.

Die vorherigen Beispiele zeigen, wie Sie ein Design wie Theme.AppCompat anwenden, das von der Android Support Library bereitgestellt wird. In der Regel möchten Sie das Design jedoch an die Marke Ihrer App anpassen. Am besten erweitern Sie diese Stile aus der Support Library und überschreiben einige der Attribute, wie im folgenden Abschnitt beschrieben.

Stilhierarchie

Android bietet verschiedene Möglichkeiten, Attribute in Ihrer Android-App festzulegen. Sie können Attribute beispielsweise direkt in einem Layout festlegen, einen Stil auf eine Ansicht anwenden, ein Design auf ein Layout anwenden oder Attribute programmatisch festlegen.

Berücksichtigen Sie bei der Auswahl der Gestaltungsmethode für Ihre App die Stilhierarchie von Android. Verwenden Sie nach Möglichkeit Designs und Stile, um die Einheitlichkeit zu gewährleisten. Wenn Sie dieselben Attribute an mehreren Stellen angeben, bestimmt die folgende Liste, welche Attribute letztendlich angewendet werden. Die Liste ist nach Priorität geordnet, von der höchsten zur niedrigsten.

1. Anwenden von Stilen auf Zeichen- oder Absatzelebene mit Textspans auf TextView-abgeleitete Klassen.
2. Attribute programmatisch anwenden.
3. Einzelne Attribute direkt auf eine Ansicht anwenden.
4. Stil auf eine Ansicht anwenden.
5. Standardstil.
6. Design auf eine Sammlung von Ansichten, eine Aktivität oder die gesamte App anwenden.
7. Bestimmte ansichtsspezifische Stile anwenden, z. B. TextAppearance für ein TextView festlegen.

Abbildung 2 : Stile aus einem span überschreiben Stile aus einem textAppearance.

TextAppearance

Eine Einschränkung bei Stilen besteht darin, dass Sie nur einen Stil auf eine View anwenden können. In einem TextView können Sie jedoch auch ein Attribut TextAppearance angeben, das ähnlich wie ein Stil funktioniert, wie im folgenden Beispiel gezeigt:

<TextView
    ...
    android:textAppearance="@android:style/TextAppearance.Material.Headline"
    android:text="This text is styled via textAppearance!" />

Mit TextAppearance können Sie textspezifische Stile definieren, während der Stil einer View für andere Zwecke verfügbar bleibt. Wenn Sie jedoch Textattribute direkt in der View oder in einem Stil definieren, überschreiben diese Werte die TextAppearance-Werte.

TextAppearance unterstützt eine Teilmenge der Stilattribute, die TextView bietet. Die vollständige Attributliste finden Sie unter TextAppearance.

Einige häufig verwendete TextView Attribute, die nicht enthalten sind, sind lineHeight[Multiplier|Extra], lines, breakStrategy und hyphenationFrequency. TextAppearance funktioniert auf Zeichenebene und nicht auf Absatzebene. Daher werden Attribute, die sich auf das gesamte Layout auswirken, nicht unterstützt.

Standarddesign anpassen

Wenn Sie ein Projekt mit Android Studio erstellen, wird standardmäßig ein Material Design-Design auf Ihre App angewendet, wie in der Datei styles.xml Ihres Projekts definiert. Dieser AppTheme Stil erweitert ein Design aus der Support Library und enthält Überschreibungen für Farbattribute, die von wichtigen UI-Elementen wie der App-Leiste und der schwebenden Aktionsschaltfläche verwendet werden, falls vorhanden. So können Sie das Farbdesign Ihrer App schnell anpassen, indem Sie die bereitgestellten Farben aktualisieren.

Die Datei styles.xml sieht beispielsweise so aus:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

Die Stilwerte sind eigentlich Verweise auf andere Farbressourcen, die in der Datei des Projekts res/values/colors.xml definiert sind. Diese Datei bearbeiten Sie, um die Farben zu ändern. Weitere Informationen finden Sie unter Material Design Color Overview , um die Nutzerfreundlichkeit mit dynamischen Farben und zusätzlichen benutzerdefinierten Farben zu verbessern.

Sobald Sie die Farben kennen, aktualisieren Sie die Werte in res/values/colors.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--   Color for the app bar and other primary UI elements. -->
    <color name="colorPrimary">#3F51B5</color>

    <!--   A darker variant of the primary color, used for
           the status bar (on Android 5.0+) and contextual app bars. -->
    <color name="colorPrimaryDark">#303F9F</color>

    <!--   a secondary color for controls like checkboxes and text fields. -->
    <color name="colorAccent">#FF4081</color>
</resources>

Anschließend können Sie alle anderen gewünschten Stile überschreiben. So ändern Sie beispielsweise die Hintergrundfarbe der Aktivität:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    ...
    <item name="android:windowBackground">@color/activityBackground</item>
</style>

Eine Liste der Attribute, die Sie in Ihrem Design verwenden können, finden Sie in der Attributtabelle unter R.styleable.Theme. Wenn Sie Stile für die Ansichten in Ihrem Layout hinzufügen, finden Sie Attribute auch in der Tabelle „XML-Attribute“ in den Referenzen zu den Ansichtsklassen. Alle Ansichten unterstützen beispielsweise XML-Attribute aus der Basisklasse View.

Die meisten Attribute werden auf bestimmte Ansichtstypen angewendet, einige auf alle Ansichten. Einige Designattribute, die unter R.styleable.Theme aufgeführt sind, gelten jedoch für das Aktivitätsfenster und nicht für die Ansichten im Layout. windowBackground ändert beispielsweise den Fensterhintergrund und windowEnterTransition definiert eine Übergangsanimation, die beim Start der Aktivität verwendet werden soll. Weitere Informationen finden Sie unter Aktivität mit einer Animation starten.

Die Android Support Library bietet auch andere Attribute, mit denen Sie Ihr Design anpassen können, das von Theme.AppCompat abgeleitet wurde, z. B. das Attribut colorPrimary, das im vorherigen Beispiel gezeigt wird. Diese Attribute finden Sie am besten in der Datei attrs.xml der Bibliothek.

In der Support Library sind auch verschiedene Designs verfügbar, die Sie möglicherweise anstelle der im vorherigen Beispiel gezeigten Designs erweitern möchten. Die verfügbaren Designs finden Sie am besten in der Datei der Bibliothekthemes.xml.

Versionsspezifische Stile hinzufügen

Wenn in einer neuen Android-Version Designattribute hinzugefügt werden, die Sie verwenden möchten, können Sie sie Ihrem Design hinzufügen und trotzdem mit alten Versionen kompatibel bleiben. Sie benötigen lediglich eine weitere Datei styles.xml, die in einem values-Verzeichnis mit dem Ressourcenversions qualifizierer gespeichert ist:

res/values/styles.xml        # themes for all versions
res/values-v21/styles.xml    # themes for API level 21+ only

Da die Stile in der Datei values/styles.xml für alle Versionen verfügbar sind, können sie von Ihren Designs in values-v21/styles.xml übernommen werden. So können Sie Stile vermeiden, indem Sie mit einem „Basisdesign“ beginnen und es dann in Ihren versionsspezifischen Stilen erweitern.

Wenn Sie beispielsweise Fensterübergänge für Android 5.0 (API-Level 21) und höher deklarieren möchten, müssen Sie neue Attribute verwenden. Ihr Basisdesign in res/values/styles.xml kann so aussehen:

<resources>
    <!-- Base set of styles that apply to all versions. -->
    <style name="BaseAppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/primaryColor</item>
        <item name="colorPrimaryDark">@color/primaryTextColor</item>
        <item name="colorAccent">@color/secondaryColor</item>
    </style>

    <!-- Declare the theme name that's actually applied in the manifest file. -->
    <style name="AppTheme" parent="BaseAppTheme" />
</resources>

Fügen Sie dann die versionsspezifischen Stile in res/values-v21/styles.xml hinzu:

<resources>
    <!-- extend the base theme to add styles available only with API level 21+ -->
    <style name="AppTheme" parent="BaseAppTheme">
        <item name="android:windowActivityTransitions">true</item>
        <item name="android:windowEnterTransition">@android:transition/slide_right</item>
        <item name="android:windowExitTransition">@android:transition/slide_left</item>
    </style>
</resources>

Jetzt können Sie AppTheme in Ihrer Manifestdatei anwenden. Das System wählt die für die einzelnen Systemversionen verfügbaren Stile aus.

Weitere Informationen zur Verwendung alternativer Ressourcen für verschiedene Geräte finden Sie unter Alternative Ressourcen bereitstellen.

Widget-Stile anpassen

Jedes Widget im Framework und in der Support Library hat einen Standardstil. Wenn Sie Ihre App beispielsweise mit einem Design aus der Support Library gestalten, wird eine Instanz von Button mit dem Widget.AppCompat.Button Stil gestaltet. Wenn Sie eine andere Widget-Stil auf eine Schaltfläche anwenden möchten, können Sie dies mit dem Attribut style in der Layoutdatei tun. Im folgenden Beispiel wird der randlose Schaltflächenstil der Bibliothek angewendet:

<Button
    style="@style/Widget.AppCompat.Button.Borderless"
    ... />

Wenn Sie diesen Stil auf alle Schaltflächen anwenden möchten, können Sie ihn in buttonStyle Ihres Designs so deklarieren:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="buttonStyle">@style/Widget.AppCompat.Button.Borderless</item>
    ...
</style>

Sie können Widget-Stile auch erweitern, genau wie jeden anderen Stil erweitern, und dann Ihren benutzerdefinierten Widget-Stil in Ihrem Layout oder Design anwenden.

Zusätzliche Ressourcen

Weitere Informationen zu Designs und Stilen finden Sie in den folgenden zusätzlichen Ressourcen:

Blog posts

• Android styling: themes vs styles
• Android styling: common theme attributes
• Android styling: prefer theme attributes