Stile und Designs

Schreiben Sie jetzt
Jetpack Compose ist das empfohlene UI-Toolkit für Android. Weitere Informationen
Systeme in Compose entwerfen →

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 Stylesheets im Webdesign.

Ein Stil ist eine Sammlung von Attributen, die das Aussehen einer einzelnen View festlegen. Mit einem Stil lassen sich Attribute wie Schriftfarbe, Schriftgröße, Hintergrundfarbe und vieles mehr festlegen.

Ein Thema 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, wird in jeder Ansicht in der App oder in der Aktivität jedes der unterstützten Attribute des Designs angewendet. Designs können auch Stile auf nicht sichtbare Elemente anwenden, z. B. die Statusleiste und den Fensterhintergrund.

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

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

Unterschiede zwischen Designs und Stilen

Designs und Stile haben viele Ähnlichkeiten, dienen aber unterschiedlichen Zwecken. Designs und Stile haben dieselbe Grundstruktur – ein Schlüssel/Wert-Paar, das Attribute Ressourcen zuordnet.

Ein style gibt Attribute für einen bestimmten Ansichtstyp an. Zum Beispiel könnten mit einem Stil die Attribute einer Schaltfläche angegeben werden. Jedes Attribut, das Sie in einem Stil angeben, ist ein Attribut, das Sie in der Layoutdatei festlegen können. Wenn Sie alle Attribute für einen Stil extrahieren, können Sie sie ganz einfach über mehrere Widgets hinweg verwenden und verwalten.

Ein Design definiert eine Sammlung benannter Ressourcen, auf die unter anderem Stile, Layouts und Widgets verweisen können. Designs weisen Android-Ressourcen semantische Namen wie colorPrimary zu.

Stile und Designs sollten aufeinander abgestimmt sein. Beispielsweise kann bei einem Stil angegeben werden, 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" Design 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 zum Zusammenwirken von Designs und Stilen finden Sie im Blogpost Android-Stile: Designs vs. Stile.

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. Das 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 wie folgt auf eine Ansicht anwenden:

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

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

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

Stil erweitern und anpassen

Wenn Sie Ihre eigenen Stile erstellen, sollten Sie immer einen vorhandenen Stil aus dem Framework oder der Supportbibliothek erweitern, um die Kompatibilität mit Plattform-UI-Stilen aufrechtzuerhalten. Wenn Sie einen Stil erweitern möchten, geben Sie diesen mit dem Attribut parent an. Anschließend können Sie 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>

Du solltest jedoch immer deine wichtigsten App-Stile aus der Android Support Library übernehmen. Die Stile in der Supportbibliothek bieten Kompatibilität, da sie jeden Stil für die in den einzelnen Versionen verfügbaren UI-Attribute optimieren. Die Stile der Supportbibliothek 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, geben Sie den Namen des übergeordneten Stils ohne den im vorherigen Beispiel gezeigten @android:style/-Teil an. Im folgenden Beispiel werden Textdarstellungsstile aus der Supportbibliothek übernommen:

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

Sie können Stile auch übernehmen – außer denen von der Plattform –, indem Sie den Namen eines Stils um eine Punktnotation erweitern, anstatt das Attribut parent zu verwenden. Stellen Sie dem Namen des Stils also den Namen des Stils voran, den Sie übernehmen möchten, getrennt durch einen Punkt. Sie tun dies normalerweise nur, wenn Sie Ihre eigenen Stile erweitern, nicht Stile aus anderen Bibliotheken. Der folgende Stil übernimmt beispielsweise alle Stile aus dem GreenText im vorherigen Beispiel und vergrößert dann die Textgröße:

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

Sie können Stile wie diesen 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“ unter den verschiedenen Klassenreferenzen. Alle Ansichten unterstützen XML-Attribute aus der Basisklasse View und viele Ansichten haben eigene Sonderattribute. Die XML-Attribute TextView 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 die gleiche Weise erstellt wie Stile. Der Unterschied besteht darin, wie Sie ihn anwenden: Anstatt einen Stil mit dem Attribut style auf eine Ansicht anzuwenden, wenden Sie ein Design mit dem Attribut android:theme entweder auf das <application>-Tag oder ein <activity>-Tag in der Datei AndroidManifest.xml an.

So kannst du zum Beispiel das „dunkle“ Design-Design der Android Support Library auf die gesamte App anwenden:

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

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

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

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

Ab Android 5.0 (API-Level 21) und der Android Support Library Version 22.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. Dies ist nützlich, wenn Sie die Farbpaletten für einen bestimmten Bereich der Benutzeroberfläche ändern möchten.

Die vorherigen Beispiele zeigen, wie du ein Design wie Theme.AppCompat aus der Android Support Library anwendest. Üblicherweise möchten Sie das Design jedoch an die Marke Ihrer App anpassen. Die beste Möglichkeit dazu besteht darin, diese Stile aus der Support Library zu erweitern und einige der Attribute zu überschreiben, wie im folgenden Abschnitt beschrieben.

Stilhierarchie

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

Achten Sie bei der Gestaltung Ihrer App auf die Stilhierarchie von Android. Im Allgemeinen sollten Sie aus Gründen der Einheitlichkeit so oft wie möglich Designs und Stile verwenden. Wenn Sie dieselben Attribute an mehreren Stellen angeben, wird anhand der folgenden Liste festgelegt, welche Attribute letztendlich angewendet werden. Die Liste ist von der höchsten zur niedrigsten Priorität sortiert.

  1. Stile auf Zeichen- oder Absatzebene mithilfe von Textspannen auf TextView-abgeleitete Klassen anwenden
  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. ein TextAppearance für ein TextView festlegen

Abbildung 2: Der Stil eines span-Elements überschreibt den Stil einer textAppearance.

Textdarstellung

Eine Einschränkung bei Stilen besteht darin, dass Sie nur einen Stil auf einen 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 einen textspezifischen Stil festlegen, während der Stil einer View für andere Zwecke verfügbar bleibt. Hinweis: Wenn du Textattribute direkt im View oder in einem Stil definierst, werden die TextAppearance-Werte durch diese Werte überschrieben.

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

Einige gängige TextView-Attribute, die nicht enthalten sind, sind lineHeight[Multiplier|Extra], lines, breakStrategy und hyphenationFrequency. TextAppearance funktioniert auf Zeichen- und nicht auf Absatzebene. Attribute, die sich auf das gesamte Layout auswirken, werden also 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 gegebenenfalls der unverankerten Aktionsschaltfläche verwendet werden. Sie können das Farbdesign Ihrer App also schnell anpassen, indem Sie die angegebenen 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 Verweise auf andere Farbressourcen, die in der Datei res/values/colors.xml des Projekts definiert sind. Das ist die Datei, die Sie bearbeiten, um die Farben zu ändern. In der Farbübersicht für Material Design erfahren Sie, wie Sie die Verwendung dynamischer Farben und zusätzlicher benutzerdefinierter Farben verbessern können.

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 beliebige andere Stile überschreiben. Sie können beispielsweise die Hintergrundfarbe einer 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 den Ansichten in Ihrem Layout Stile hinzufügen, finden Sie Attribute auch in der Tabelle „XML-Attribute“ in den Referenzklassen der Ansichten. Alle Ansichten unterstützen beispielsweise XML-Attribute aus der Basisklasse View.

Die meisten Attribute werden auf bestimmte Arten von Ansichten angewendet, einige gelten auch für alle Ansichten. Einige unter R.styleable.Theme aufgeführte Themenattribute gelten jedoch für das Aktivitätsfenster und 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 du dein Design über Theme.AppCompat anpassen kannst, z. B. das im vorherigen Beispiel gezeigte Attribut colorPrimary. Diese lassen sich am besten in der attrs.xml-Datei der Bibliothek einsehen.

In der Support Library sind auch andere Themes verfügbar, die Sie anstelle der im vorherigen Beispiel gezeigten erweitern möchten. Die verfügbaren Designs findest du am besten in der Datei themes.xml der Bibliothek.

Versionsspezifische Stile hinzufügen

Wenn in einer neuen Android-Version Designattribute hinzugefügt werden, die Sie verwenden möchten, können Sie sie zu Ihrem Design hinzufügen, wobei die Kompatibilität mit alten Versionen weiterhin möglich ist. Sie benötigen lediglich eine weitere styles.xml-Datei, die in einem values-Verzeichnis gespeichert ist und 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. Um doppelte Stile zu vermeiden, beginnen Sie mit einem „Basisthema“ und erweitern es dann in Ihren versionsspezifischen Stilen.

Wenn Sie beispielsweise Fensterübergänge für Android 5.0 (API-Level 21) und höher deklarieren, müssen Sie neue Attribute verwenden. Ihr Basisdesign 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 so 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 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-Stile anpassen

Jedes Widget im Framework und in der Supportbibliothek verfügt über 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. Mit dem Attribut style in der Layoutdatei kannst du einen anderen Widget-Stil auf eine Schaltfläche anwenden. Im folgenden Beispiel wird der rahmenlose Schaltflächenstil der Bibliothek angewendet:

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

Wenn du diesen Stil auf alle Schaltflächen anwenden möchtest, kannst du ihn so im buttonStyle deines Designs deklarieren:

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

Sie können Widget-Stile genau wie andere Stile erweitern und anschließend Ihren benutzerdefinierten Widget-Stil auf Ihr Layout oder Design anwenden.

Zusätzliche Ressourcen

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

Blogposts