Stile und Designs

Compose ausprobieren

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

Designsysteme in Compose →

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

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

Ein Designthema ist eine Sammlung von Attributen, die auf eine gesamte App, Aktivität oder Ansichtshierarchie angewendet werden – nicht nur auf eine einzelne Ansicht. Wenn Sie ein Design anwenden, werden alle unterstützten Attribute des Designs auf jede Ansicht in der App oder Aktivität angewendet. Mithilfe von Themen können auch Stile auf Elemente außerhalb des Ansichtsbereichs angewendet werden, z. B. auf die Statusleiste und den Fensterhintergrund.

Stile und Designs werden in einer Stilressourcendatei in res/values/ deklariert, die in der Regel den Namen styles.xml hat.

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

Designs und Stile

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

Mit einem Stil werden Attribute für einen bestimmten Ansichtstyp angegeben. Mit einem Stil können beispielsweise die Attribute einer Schaltfläche angegeben werden. Jedes Attribut, das Sie in einem Stil angeben, kann auch in der Layoutdatei festgelegt werden. 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 durch Stile, Layouts, Widgets usw. verwiesen werden kann. Mithilfe von Themen werden Android-Ressourcen semantische Namen wie colorPrimary zugewiesen.

Stile und Themen sollen zusammenpassen. Beispiel: Sie haben einen Stil, in dem angegeben ist, dass ein Teil einer Schaltfläche colorPrimary und ein anderer Teil colorSecondary ist. Die tatsächlichen Definitionen dieser Farben finden Sie im Design. 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 für die Stile die semantischen Namen und keine bestimmten Farbdefinitionen verwendet werden.

Weitere Informationen zur Kombination von Designs und Stilen finden Sie im Blogpost Android-Design: Designs und Stile im Vergleich.

Stil erstellen und anwenden

Wenn Sie einen neuen Stil erstellen möchten, öffnen Sie die res/values/styles.xml-Datei Ihres Projekts. Gehen Sie für jeden Stil, den Sie erstellen möchten, so vor:

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 <item>-Element hinzu. Mit dem name in jedem Element wird ein Attribut angegeben, 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>

So wenden Sie den Stil auf eine Ansicht an:

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

Jedes im Stil angegebene Attribut wird auf die Datenansicht angewendet, sofern dies zulässig ist. Nicht zulässige Attribute werden ignoriert.

Anstatt einen Stil auf einzelne Ansichten anzuwenden, wenden Sie Stile in der Regel als Thema auf Ihre 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 Supportbibliothek, damit die Kompatibilität mit den UI-Stilen der Plattform erhalten bleibt. Wenn Sie einen Stil erweitern möchten, geben Sie den Stil mit dem parent-Attribut an. Sie können dann die übernommenen Stilattribute überschreiben und neue hinzufügen.

Sie können beispielsweise die Standardschriftart der Android-Plattform übernehmen und so ändern:

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

Die Hauptstile Ihrer App sollten Sie jedoch immer von der Android-Unterstützungsbibliothek ableiten. Die Stile in der Support Library sorgen für Kompatibilität, da jeder Stil für die in jeder Version verfügbaren UI-Attribute optimiert ist. Die Stile der Supportbibliothek haben oft einen ähnlichen Namen wie der Stil der Plattform, aber mit AppCompat.

Wenn Sie Stile aus einer Bibliothek oder Ihrem eigenen Projekt übernehmen möchten, geben Sie den Namen des übergeordneten Stils ohne den Teil @android:style/ an, der im vorherigen Beispiel zu sehen ist. Im folgenden Beispiel werden beispielsweise Textstilvorlagen aus der Support Library übernommen:

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

Sie können auch Stile erben – mit Ausnahme der von der Plattform –, indem Sie den Namen eines Stils mit einer Punktnotation erweitern, anstatt das parent-Attribut zu verwenden. Das heißt, Sie fügen dem Namen Ihres Stils den Namen des Stils vor, den Sie übernehmen möchten, getrennt durch einen Punkt. Normalerweise geschieht dies nur, wenn Sie Ihre eigenen Stile erweitern, nicht Stile aus anderen Bibliotheken. Im folgenden Beispiel werden beispielsweise alle Stile von GreenText aus dem vorherigen Beispiel übernommen und die Textgröße wird erhöht:

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

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

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

Design als Design anwenden

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

So wenden Sie beispielsweise das dunkle Material Design-Design der Android-Supportbibliothek auf die gesamte App an:

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

So wenden Sie das Design „hell“ nur auf eine Aktivität an:

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

Auf jede Ansicht in der App oder Aktivität werden die unterstützten Stile aus den im jeweiligen Design definierten Stilen angewendet. Wenn eine Ansicht nur einige der im Stil deklarierten Attribute unterstützt, werden nur diese Attribute angewendet und die nicht unterstützten Attribute werden ignoriert.

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

In den vorherigen Beispielen wird gezeigt, wie ein Thema wie Theme.AppCompat angewendet wird, das von der Android-Supportbibliothek bereitgestellt wird. In der Regel sollten Sie das Design jedoch an die Marke Ihrer App anpassen. Am besten erweitern Sie diese Stile aus der Support-Bibliothek 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 und sogar Attribute programmatisch festlegen.

Beachten Sie bei der Auswahl des Stils Ihrer App die Stilhierarchie von Android. Verwenden Sie im Allgemeinen möglichst viele Themen und Stile, um für Einheitlichkeit zu sorgen. Wenn Sie dieselben Attribute an mehreren Stellen angeben, wird anhand der folgenden Liste bestimmt, welche Attribute letztendlich angewendet werden. Die Liste ist von der höchsten zur niedrigsten Priorität sortiert.

1. Textausschnitte können auf TextView-basierte Klassen angewendet werden, um Text auf Zeichen- oder Absatzebene zu formatieren.
2. Attribute programmatisch anwenden
3. Einzelne Attribute direkt auf eine Ansicht anwenden
4. Einen Stil auf eine Ansicht anwenden
5. Standardstil
6. Sie können ein Design auf eine Sammlung von Ansichten, eine Aktivität oder Ihre gesamte App anwenden.
7. Bestimmte ansichtenspezifische Stile anwenden, z. B. eine TextAppearance auf eine TextView setzen

Abbildung 2: Das Styling eines span überschreibt das Styling eines textAppearance.

TextAppearance

Eine Einschränkung bei Stilen besteht darin, dass Sie auf eine View nur einen Stil anwenden können. In einem TextView können Sie jedoch auch ein TextAppearance-Attribut 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 und den Stil einer View für andere Zwecke verfügbar lassen. Beachten Sie jedoch, dass Textattribute, die Sie direkt auf der View oder in einem Stil definieren, die TextAppearance-Werte überschreiben.

TextAppearance unterstützt eine Teilmenge der Stilattribute, die TextView bietet. Eine vollständige Liste der Attribute finden Sie unter TextAppearance.

Zu den gängigen TextView-Attributen, die nicht enthalten sind, gehören lineHeight[Multiplier|Extra], lines, breakStrategy und hyphenationFrequency. TextAppearance funktioniert auf Zeichenebene und nicht auf Absatzebene. Attribute, die sich auf das gesamte Layout auswirken, werden daher 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 styles.xml-Datei 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 Floating Action Button verwendet werden, sofern verwendet. So können Sie das Farbdesign Ihrer App schnell anpassen, indem Sie die bereitgestellten Farben aktualisieren.

Ihre styles.xml-Datei könnte beispielsweise so aussehen:

<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 tatsächlich Verweise auf andere Farbressourcen, die in der res/values/colors.xml-Datei des Projekts definiert sind. Diese Datei bearbeiten Sie, um die Farben zu ändern. Sehen Sie sich die Material Design-Farbübersicht an, um die Nutzerfreundlichkeit mit dynamischen Farben und zusätzlichen benutzerdefinierten Farben zu verbessern.

Aktualisieren Sie die Werte in res/values/colors.xml, sobald Sie die Farben kennen:

<?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>

Sie können dann beliebige andere Stile überschreiben. So ändern Sie beispielsweise die Hintergrundfarbe für Aktivitäten:

<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 Tabelle 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 Verweisdokumenten der Ansichtsklasse. Alle Ansichten unterstützen beispielsweise XML-Attribute aus der Basisklasse View.

Die meisten Attribute werden auf bestimmte Arten von Datenansichten angewendet, einige auf alle. Einige der unter R.styleable.Theme aufgeführten Designattribute beziehen sich jedoch auf das Aktivitätsfenster und nicht auf die Ansichten im Layout. Mit windowBackground wird beispielsweise der Fensterhintergrund geändert und mit windowEnterTransition wird eine Übergangsanimation definiert, die beim Starten der Aktivität verwendet wird. Weitere Informationen finden Sie unter Aktivität mit einer Animation starten.

Die Android Support Library bietet auch andere Attribute, mit denen Sie Ihr von Theme.AppCompat erweitertes Design anpassen können, z. B. das im vorherigen Beispiel gezeigte colorPrimary-Attribut. Sie lassen sich am besten in der attrs.xml-Datei der Bibliothek ansehen.

In der Support-Bibliothek sind auch verschiedene Themen verfügbar, die Sie anstelle der im vorherigen Beispiel gezeigten Themen erweitern können. Die verfügbaren Themen finden Sie in der themes.xml-Datei der Bibliothek.

Versionsspezifische Stile hinzufügen

Wenn in einer neuen Version von Android Designattribute hinzugefügt werden, die Sie verwenden möchten, können Sie sie Ihrem Design hinzufügen und es gleichzeitig mit älteren Versionen kompatibel machen. Sie benötigen lediglich eine weitere styles.xml-Datei, die in einem values-Verzeichnis gespeichert ist und den Qualifikator für die Ressourcenversion enthält:

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

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

Wenn Sie beispielsweise Fensterübergänge für Android 5.0 (API-Ebene 21) und höher deklarieren möchten, müssen Sie neue Attribute verwenden. Ihr Basis-Design in res/values/styles.xml kann also 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>

Sie können AppTheme jetzt in Ihrer Manifestdatei anwenden. Das System wählt dann die für jede Systemversion verfügbaren Stile aus.

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

Widget-Designs anpassen

Jedes Widget im Framework und in der Support Library hat einen Standardstil. Wenn Sie beispielsweise Ihre App mit einem Design aus der Support Library stylen, wird eine Instanz von Button mit dem Stil Widget.AppCompat.Button gestylt. Wenn Sie einer Schaltfläche einen anderen Widget-Stil zuweisen möchten, können Sie das mit dem Attribut style in Ihrer Layoutdatei tun. Im folgenden Beispiel wird beispielsweise der Schaltflächenstil ohne Rahmen 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 der buttonStyle Ihres Themas 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 genauso wie andere Stile erweitern und dann Ihren benutzerdefinierten Widget-Stil auf Ihr Layout oder Design anwenden.

Weitere Informationen

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

Blogposts

• Android-Design: Themen und Stile
• Android-Design: Gemeinsame Themenattribute
• Android-Styling: Verwenden Sie bevorzugt Themenattribute