Diese Seite wurde von der Cloud Translation API übersetzt.

Stile und Designs

Mit Stilen und Designs 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 die Darstellung einer einzelnen View angeben. Ein Stil kann Attribute wie Schriftfarbe, Schriftgröße, Hintergrundfarbe usw. 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 in der App oder Aktivität alle unterstützten Attribute des Designs angewendet. Designs können Stile auch auf Elemente anwenden, die keine Ansicht sind, wie die Statusleiste und den Fensterhintergrund.

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

Abbildung 1: Zwei Designs wurden auf dieselbe Aktivität angewendet: 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. Themen und Stile haben dieselbe Grundstruktur – ein Schlüssel/Wert-Paar, das Attribute Ressourcen zuordnet.

Ein style gibt Attribute für einen bestimmten Ansichtstyp an. Für einen Stil können z. B. 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 eines Stils extrahieren, können sie einfach in mehreren Widgets verwendet und verwaltet werden.

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

Stile und Designs sollen aufeinander abgestimmt sein. Sie haben beispielsweise einen Stil, der angibt, 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 die 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 zum Zusammenspiel von Designs und Stilen finden Sie im Blogpost Android-Stile: Designs und Stile.

Stil erstellen und anwenden

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

Fügen Sie ein <style>-Element mit einem Namen hinzu, der den Stil eindeutig identifiziert.
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 ansonsten 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, sofern die Ansicht es akzeptiert. Die Ansicht ignoriert alle Attribute, die sie nicht akzeptiert.

Hinweis:Nur das Element, dem du das Attribut style hinzufügst, erhält diese Stilattribute. In untergeordneten Ansichten werden die Stile nicht angewendet. Wenn Sie möchten, dass untergeordnete Ansichten Stile übernehmen, wenden Sie den Stil stattdessen mit dem Attribut android:theme an.

Anstatt einen Stil auf einzelne Ansichten anzuwenden, wenden Sie Stile als Design 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. Um einen Stil zu erweitern, geben Sie ihn 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>

Deine wichtigsten App-Stile sollten jedoch immer aus der Android-Supportbibliothek übernommen werden. Die Stile in der Supportbibliothek sorgen für Kompatibilität, indem sie jeden Stil für die UI-Attribute optimieren, die in den einzelnen Versionen verfügbar sind. Die Support Library-Stile haben oft einen Namen, der dem Stil von der Plattform ähnelt, aber AppCompat enthalten.

Wenn Sie Stile aus 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 Textdarstellungsstile aus der Support Library übernommen:

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

Sie können Stile auch – außer denen von der Plattform – übernehmen, indem Sie den Namen eines Stils durch eine Punktnotation erweitern, anstatt das Attribut parent zu verwenden. Stellen Sie also dem Namen Ihres Stils den Namen des Stils voran, den Sie übernehmen möchten, getrennt durch einen Punkt. In der Regel tun Sie dies nur, wenn Sie Ihre eigenen Stile und nicht Stile aus anderen Bibliotheken erweitern. Für den 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 wie diesen beliebig oft übernehmen, indem Sie weitere Namen verketten.

Hinweis:Wenn Sie einen Stil mithilfe der Punktnotation erweitern und zusätzlich das Attribut parent einfügen, überschreiben die übergeordneten Stile alle Stile, die über die Punktnotation übernommen wurden.

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

Stil als Design anwenden

Sie können Designs auf die gleiche Weise erstellen wie Stile. Der Unterschied besteht darin, wie Sie es anwenden: Statt 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 können Sie beispielsweise das dunkle Design des Material Design-Designs der Android-Supportbibliothek auf die gesamte App anwenden:

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

So wenden Sie das helle Design auf nur 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 Stile angewendet, die sie unterstützt und die im jeweiligen Design definiert sind. Wenn eine Ansicht nur einige der im Stil deklarierten Attribute unterstützt, werden nur diese Attribute angewendet und nicht unterstützte Attribute werden ignoriert.

Ab Android 5.0 (API-Level 21) und Android Support Library Version 22.1 kannst du auch das Attribut android:theme für eine Ansicht in deiner Layoutdatei angeben. Dadurch wird das Design für diese Ansicht und alle untergeordneten Ansichten geändert. Dies ist nützlich, wenn Sie die Farbpaletten des Designs in einem bestimmten Bereich der Benutzeroberfläche ändern möchten.

Die vorherigen Beispiele zeigen, wie ein Design wie Theme.AppCompat angewendet wird, das von der Android Support Library bereitgestellt wird. In der Regel sollten Sie das Design jedoch an die Marke Ihrer App anpassen. Die beste Möglichkeit dafür besteht darin, diese Stile aus der Supportbibliothek zu erweitern und einige der Attribute zu überschreiben, wie im folgenden Abschnitt beschrieben.

Stilhierarchie

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

Berücksichtigen Sie bei der Gestaltung Ihrer App die Stilhierarchie von Android. Im Allgemeinen sollten Themes und Stile aus Gründen der Einheitlichkeit so oft wie möglich verwendet werden. 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 geordnet.

Anwenden von Stilen auf Zeichen- oder Absatzebene mit Text-Spans auf TextView-abgeleitete Klassen.
Programmatische Anwendung von Attributen
Einzelne Attribute direkt auf eine Ansicht anwenden
Stil auf eine Ansicht anwenden
Standardstil.
Ein Design auf eine Sammlung von Ansichten, eine Aktivität oder Ihre gesamte App anwenden
Bestimmte ansichtsspezifische Stile anwenden, z. B. ein TextAppearance für ein TextView festlegen

Abbildung 2: Der Stil aus einem span überschreibt den Stil aus einem textAppearance.

Achtung:Wenn Sie Ihre App mit einem neuen Stil versehen und nicht die erwarteten Ergebnisse sehen, werden Ihre Änderungen wahrscheinlich durch andere Stile überschrieben. Wenn Sie beispielsweise ein Design zusammen mit einem Stil auf eine einzelne View auf Ihre Anwendung anwenden, überschreiben die Stilattribute alle übereinstimmenden Designattribute für diese View. Alle Designattribute, die nicht durch den Stil überschrieben werden, werden jedoch weiterhin verwendet.

Textdarstellung

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

<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 beibehalten. Hinweis: Wenn Sie Textattribute direkt in View oder in einem Stil definieren, überschreiben diese Werte die TextAppearance-Werte.

TextAppearance unterstützt einen Teil der Stilattribute, die von TextView angeboten werden. 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 Zeichenebene und nicht auf Absatzebene. Daher werden Attribute, die das gesamte Layout betreffen, 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 Supportbibliothek und enthält Überschreibungen für Farbattribute, die von wichtigen UI-Elementen wie der App-Leiste und der unverankerten Aktionsschaltfläche (falls verwendet) 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 res/values/colors.xml-Datei des Projekts definiert sind. Das ist die Datei, die Sie bearbeiten, um die Farben zu ändern. In der Farbübersicht in Material Design erfahren Sie, wie Sie die Nutzerfreundlichkeit mit dynamischen Farben und zusätzlichen benutzerdefinierten Farben 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>

Sie können dann beliebige andere 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 Attributtabelle 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 Ansichtsklassenreferenzen. Beispielsweise unterstützen alle Ansichten XML-Attribute aus der Basisklasse View.

Die meisten Attribute werden auf bestimmte Arten von Datenansichten angewendet, einige auch auf alle Datenansichten. Einige unter R.styleable.Theme aufgeführte Designattribute gelten jedoch für das Aktivitätsfenster und nicht für die Ansichten im Layout. Zum Beispiel ä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, die Sie zum Anpassen Ihres Designs verwenden können, die von Theme.AppCompat erweitert wurden, z. B. das Attribut colorPrimary, das im vorherigen Beispiel gezeigt wurde. Diese lassen sich am besten in der Datei attrs.xml der Bibliothek anzeigen.

Hinweis: Attributnamen aus der Supportbibliothek verwenden nicht das Präfix android:. Dieser wird nur für Attribute aus dem Android-Framework verwendet.

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

Versionsspezifische Stile hinzufügen

Wenn eine neue Android-Version Designattribute hinzufügt, die Sie verwenden möchten, können Sie sie Ihrem Design hinzufügen und dabei weiterhin mit alten Versionen kompatibel bleiben. Sie benötigen lediglich eine weitere styles.xml-Datei, die im Verzeichnis values gespeichert ist und den Ressourcenversionsqualifizierer 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. Das bedeutet, dass Sie doppelte Stile vermeiden können, indem Sie mit einem „Basisthema“ 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 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 kannst du AppTheme in deiner 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 findest du unter Alternative Ressourcen bereitstellen.

Widget-Stile anpassen

Jedes Widget im Framework und in der Supportbibliothek hat einen Standardstil. Wenn Sie Ihre Anwendung beispielsweise mit einem Design aus der Support Library gestaltet haben, 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 in Ihrer Layoutdatei mit dem Attribut style tun. Im folgenden Beispiel wird der Schaltflächenstil der Bibliothek ohne Rahmen angewendet:

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

Wenn Sie diesen Stil auf alle Schaltflächen anwenden möchten, können Sie ihn im buttonStyle des 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 wie jeden anderen Stil erweitern und dann den benutzerdefinierten Stil auf Ihr Layout oder Design anwenden.

Weitere Informationen

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

Stile und Designs

Designs und Stile im Vergleich

Stil erstellen und anwenden

Stil erweitern und anpassen

Stil als Design anwenden

Stilhierarchie

Textdarstellung

Standarddesign anpassen

Versionsspezifische Stile hinzufügen

Widget-Stile anpassen

Weitere Informationen

Blogposts