Stile und Designs

Compose ausprobieren

Jetpack Compose ist das empfohlene UI-Toolkit für Android. Hier erfahren Sie, wie Sie mit Designs in Compose arbeiten.

Designsysteme in Compose →

Mit Stilen und Designs unter Android kannst du die Details deines 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 festlegen. Ein Stil kann Attribute wie Schriftfarbe, Schriftgröße, Hintergrundfarbe und vieles mehr festlegen.

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, werden in jeder Ansicht der App oder Aktivität alle unterstützten Attribute des Designs angewendet. Designs können auch Stile auf Elemente anwenden, die keine Ansichten sind, z. B. die Statusleiste und den Fensterhintergrund.

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

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

Designs und Stile im Vergleich

Designs und Stile haben viele Ähnlichkeiten, werden aber für unterschiedliche Zwecke verwendet. Designs und Stile 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, kann 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 von Stilen, Layouts, Widgets usw. verwiesen werden kann. Designs weisen Android-Ressourcen semantische Namen wie colorPrimary zu.

Stile und Designs sind so konzipiert, dass sie sich gegenseitig ergänzen. Sie könnten beispielsweise einen Stil haben, der festlegt, 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 dazu, wie Designs und Stile zusammenwirken, finden Sie im Blogpost Android styling: themes vs styles.

Stil erstellen und anwenden

Wenn Sie einen neuen Stil erstellen möchten, öffnen Sie die res/values/styles.xml-Datei Ihres Projekts. 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 <item>-Element hinzu. Das name in jedem Element gibt ein Attribut an, das Sie sonst als XML-Attribut in Ihrem Layout verwenden. Der Wert im Element <item> 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 diese Ansicht angewendet, wenn die Ansicht es akzeptiert. Die Ansicht ignoriert alle Attribute, die sie nicht akzeptiert.

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

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

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

Die grundlegenden App-Stile sollten jedoch immer von der Android Support Library übernommen werden. Die Stile in der Supportbibliothek sorgen für Kompatibilität, indem jeder Stil für die in der jeweiligen Version verfügbaren UI-Attribute optimiert wird. Die Stile der Supportbibliothek haben oft einen ähnlichen Namen wie der Stil der Plattform, enthalten aber AppCompat.

Wenn Sie Stile von einer Bibliothek oder Ihrem eigenen Projekt übernehmen möchten, deklarieren Sie den Namen des übergeordneten Stils ohne den im vorherigen Beispiel gezeigten Teil @android:style/. Im folgenden Beispiel werden beispielsweise Textdarstellungsstile aus der Supportbibliothek übernommen:

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

Sie können auch Stile übernehmen, mit Ausnahme derer von der Plattform, indem Sie den Namen eines Stils mit einer Punktnotation erweitern, anstatt das Attribut parent zu verwenden. Dazu stellen Sie dem Namen Ihres Stils den Namen des Stils voran, von dem Sie erben möchten, getrennt durch einen Punkt. In der Regel tun Sie dies nur, wenn Sie Ihre eigenen Stile erweitern, nicht die Stile aus anderen Bibliotheken. Im folgenden Stil werden beispielsweise alle Stile aus dem GreenText im vorherigen Beispiel übernommen und dann die Textgröße erhöht:

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

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

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

Stil als Design anwenden

Designs werden auf dieselbe Weise erstellt 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 Tag <activity> in der Datei AndroidManifest.xml an.

So wendest du beispielsweise das dunkle Material Design-Design der Android Support Library auf die gesamte App an:

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

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

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

In jeder Ansicht der App oder Aktivität werden die unterstützten Stile aus den im angegebenen 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 ignoriert.

Ab Android 5.0 (API-Level 21) und Android Support Library v22.1 können Sie auch das Attribut android:theme 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 Farbvorlagen des Designs in einem bestimmten Bereich der Benutzeroberfläche zu ändern.

In den vorherigen Beispielen wurde gezeigt, wie ein Design wie Theme.AppCompat aus der Android Support Library angewendet wird. In der Regel möchten Sie das Design jedoch an die Marke Ihrer App anpassen. Am besten erweitern Sie diese Stile aus der Supportbibliothek 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 für Ihre App die Stilhierarchie von Android. Verwenden Sie im Allgemeinen so oft wie möglich Designs und Stile, um Konsistenz zu gewährleisten. 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. Anwenden von Stilen auf Zeichen- oder Absatzebene mithilfe von Textspannen auf von TextView abgeleitete Klassen.
2. Attribute programmatisch anwenden
3. Anwenden einzelner Attribute direkt auf eine Ansicht.
4. Stil auf eine Ansicht anwenden
5. Standardstil.
6. Anwenden eines Designs auf eine Sammlung von Ansichten, eine Aktivität oder die gesamte App.
7. Anwenden bestimmter ansichtsspezifischer Stile, z. B. Festlegen eines TextAppearance für ein TextView.

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 ein View 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, während der Stil von View für andere Zwecke verfügbar bleibt. Wenn Sie jedoch Textattribute direkt im View oder in einem Stil definieren, werden die TextAppearance-Werte durch diese Werte überschrieben.

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

Einige gängige TextView-Attribute, die nicht enthalten sind, sind 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 Datei styles.xml Ihres Projekts definiert. Dieser AppTheme-Stil erweitert ein Design aus der Supportbibliothek und enthält Überschreibungen für Farbattribute, die von wichtigen UI-Elementen wie der App-Leiste und dem unverankerten Aktionsbutton verwendet werden, sofern diese verwendet werden. Sie können das Farbdesign Ihrer App also schnell anpassen, indem Sie die bereitgestellten Farben aktualisieren.

Ihre styles.xml-Datei 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 res/values/colors.xml des Projekts definiert sind. In dieser Datei können Sie die Farben ändern. In der Übersicht über Material Design-Farben erfährst du, wie du die Nutzerfreundlichkeit mit dynamischen Farben und zusätzlichen benutzerdefinierten Farben verbessern kannst.

Wenn 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. Sie können beispielsweise die Hintergrundfarbe der Aktivität so ändern:

<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 der Attribute 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 der Ansichtsklasse. Beispielsweise unterstützen alle Ansichten XML-Attribute aus der Basisklasse View.

Die meisten Attribute werden auf bestimmte Arten von Ansichten angewendet, einige auf alle Ansichten. Einige der unter R.styleable.Theme aufgeführten Designattribute gelten jedoch für das Aktivitätsfenster, nicht für die Ansichten im Layout. Beispielsweise ändert windowBackground 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 von Theme.AppCompat erweitertes Design anpassen können, z. B. das Attribut colorPrimary im vorherigen Beispiel. Diese werden am besten in der attrs.xml-Datei der Bibliothek angezeigt.

In der Supportbibliothek sind auch andere Designs verfügbar, die du anstelle der im vorherigen Beispiel gezeigten Designs erweitern kannst. Die verfügbaren Designs finden Sie in der themes.xml-Datei der Bibliothek.

Versionsspezifische Stile hinzufügen

Wenn in einer neuen Android-Version Designattribute hinzugefügt werden, die du verwenden möchtest, kannst du sie deinem Design hinzufügen und gleichzeitig die Kompatibilität mit alten Versionen beibehalten. Sie benötigen lediglich eine weitere styles.xml-Datei, die in einem values-Verzeichnis gespeichert ist, das den Ressourcenversions-Qualifier 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 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 doppelte 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 und das System wählt die für jede Systemversion verfügbaren Stile aus.

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

Widget-Stile anpassen

Jedes Widget im Framework und in der Support-Bibliothek hat einen Standardstil. Wenn Sie Ihre App beispielsweise mit einem Design aus der Supportbibliothek gestalten, wird eine Instanz von Button mit dem Stil Widget.AppCompat.Button gestaltet. Wenn Sie einen anderen Widget-Stil auf eine Schaltfläche anwenden möchten, können Sie das mit dem Attribut style in Ihrer 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 der 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, 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:

Blogposts

• Android-Stile: Designs im Vergleich zu Stilen
• Android-Stile: Allgemeine Designattribute
• Android-Stile: Designattribute bevorzugen