Diese Seite wurde von der Cloud Translation API übersetzt.

Stile und Designs

Mit Stilen und Designs für Android kannst du die Details deines App-Designs von der Benutzeroberfläche trennen Struktur und Verhalten ähnlich wie 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. Designs können auch Stile auf Nicht-Ansichtselemente, wie die Statusleiste und den Fensterhintergrund.

Stile und Designs werden in einem Stil-Ressourcendatei in der Datei res/values/, in der Regel styles.xml.

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

Designs und Stile

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

Ein style gibt Attribute für einen bestimmten Ansichtstyp an. 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. Das Extrahieren aller Attribute eines Stils erleichtert deren Verwendung und Verwaltung. über mehrere Widgets hinweg nutzen.

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

Stile und Themen sollten 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. Für Gehen Sie wie folgt vor:

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. Die name in jedem Element gibt ein Attribut an, das Sie sonst als XML-Attribut in Ihrem Layout. 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. Nicht zulässige Attribute werden ignoriert.

Hinweis: Diese werden nur an das Element gesendet, dem Sie das Attribut style hinzufügen. Stilattribute festlegen. In untergeordneten Ansichten werden die Stile nicht angewendet. Wenn Sie möchten, dass untergeordnete Ansichten Stile übernehmen, wenden Sie stattdessen den Stil mit dem Attribut android:theme an.

Statt jedoch einen Stil auf einzelne Ansichten anzuwenden, Stile als Design anwenden auf Ihre gesamte App, Aktivität oder Sammlung von 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 Standardtextdarstellung der Android-Plattform übernehmen und sie wie folgt ändern: folgt:

<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 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, deklarieren Sie den Namen des übergeordneten Stils ohne den im vorherigen Beispiel gezeigten @android:style/-Teil. 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 (außer die 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. Ich Dies sollten Sie normalerweise nur tun, wenn Sie Ihre eigenen Stile erweitern, nicht Stile aus anderen Bibliotheken. Im folgenden Beispiel werden beispielsweise alle Stile von GreenText im 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 wie diesen beliebig oft übernehmen, indem Sie weitere Stile Namen.

Hinweis:Wenn Sie einen Stil mithilfe der Punktnotation erweitern und zusätzlich das Zeichen parent verwenden, überschreiben die übergeordneten Stile alle Stile, die vom Punktnotation.

Welche Attribute du mit einem <item>-Tag deklarieren kannst, erfährst du in den verschiedenen Klassenreferenzen in der Tabelle „XML-Attribute“. Alle Ansichten werden unterstützt XML-Attribute aus der Basis View-Klasse und in vielen Ansichten gibt es eigene spezielle Attribute. 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 darin, wie Sie sie anwenden: anstatt einen Stil mit dem Attribut style auf eine Ansicht anzuwenden, wenden Sie ein Design mit das Attribut android:theme im <application>-Tag oder <activity>-Tag in der Datei AndroidManifest.xml.

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 helle Design 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 angewendet und die nicht unterstützten Attribute werden ignoriert.

Ab Android 5.0 (API-Level 21) und der Android Support Library v22.1 können Sie auch das Attribut android:theme einer Ansicht in Ihrer Layoutdatei zu. Dadurch wird das Design des dieser Ansicht und aller untergeordneten Ansichten. Dies ist nützlich, um Farbvorlagen für ein bestimmtes Ihrer Benutzeroberfläche.

In den vorherigen Beispielen wird gezeigt, wie ein Thema wie Theme.AppCompat angewendet wird, das von der Android-Supportbibliothek bereitgestellt wird. Üblicherweise möchten Sie das Design jedoch die Marke Ihrer App. 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 so gut wie möglich für Einheitlichkeit nutzen. Wenn Sie dieselben Attribute in mehreren Orten enthält, wird anhand der folgenden Liste festgelegt, welche Attribute letztendlich angewendet werden. Die Liste ist von der höchsten zur niedrigsten Priorität sortiert.

Stile auf Zeichen- oder Absatzebene mithilfe von Textbereichen auf TextView-abgeleitete Stile anwenden Klassen.
Attribute programmatisch anwenden
Einzelne Attribute direkt auf eine Ansicht anwenden
Stil auf eine Ansicht anwenden
Standardstil.
Design auf eine Sammlung von Ansichten, eine Aktivität oder die gesamte App anwenden
Bestimmte ansichtenspezifische Stile anwenden, z. B. eine TextAppearance auf eine TextView setzen

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

Achtung: Wenn Sie Ihre App gestalten und nicht die erwarteten Ergebnisse sehen, werden Ihre Änderungen wahrscheinlich von einem anderen Stil überschrieben. Wenn Sie z. B. ein Design auf Ihre App anwenden, einem einzelnen View einen Stil zuweisen, überschreiben die Stilattribute alle übereinstimmenden Attribute für diese View. Beachten Sie jedoch, dass alle Themenattribute, die nicht die durch den Stil überschrieben wurden, weiterhin verwendet werden.

TextAppearance

Eine Einschränkung bei Stilen besteht darin, dass Sie nur einen Stil auf einen View anwenden können. In einer TextView. Sie können jedoch auch einen Attribut „TextAppearance“ das ähnlich funktioniert wie ein Stil, 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. Wenn Sie Textattribute jedoch direkt auf der View oder in einem Stil definieren, werden die TextAppearance-Werte durch diese Werte überschrieben.

TextAppearance unterstützt eine Teilmenge von Stilattributen, die TextView Angebote. Die vollständige Attributliste 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 Zeichen- und nicht auf Absatzebene. -Attribute, die sich auf das gesamte Layout auswirken, werden nicht unterstützt.

Standarddesign anpassen

Wenn Sie ein Projekt mit Android Studio erstellen, wird ein Material Design-Design auf Ihre App angewendet, gemäß der Definition in der styles.xml-Datei Ihres Projekts. 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 eigentlich Verweise auf andere color_resources, definiert in den res/values/colors.xml-Datei des Projekts. 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.

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 Aktivität Hintergrundfarbe folgendermaßen ab:

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

Die meisten Attribute werden auf bestimmte Arten von Ansichten angewendet, einige gelten auch für alle Ansichten. 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 Starten eine Aktivität in Form einer Animation.

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

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

In der Supportbibliothek sind auch andere 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. Du brauchst nur eine weitere styles.xml-Datei die in einem values-Verzeichnis gespeichert sind, Ressourcenversion Kennzeichner:

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 duplizieren, indem Sie mit einem „Basis“-Design beginnen und es dann in Ihren versionsspezifischen Stilen erweitern.

Um beispielsweise Fensterübergänge für Android 5.0 (API-Level 21) und höher zu deklarieren, benötigen Sie um neue Attribute zu 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>

Du kannst jetzt AppTheme in deiner Manifestdatei anwenden und das System wählt die Stile aus die für jede Systemversion verfügbar sind.

Weitere Informationen zur Verwendung alternativer Ressourcen für verschiedene Geräte findest du unter Alternative Ressourcen zur Verfügung stellen

Widget-Stile 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 einen anderen Widget-Stil auf ein können Sie das Attribut style in Ihrer Layoutdatei verwenden. 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 genau wie andere Stile auch erweitern. und wenden Sie dann Ihren benutzerdefinierten Widget-Stil auf Ihr Layout oder Design an.

Weitere Informationen

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

Stile und Designs

Designs und Stile

Stil erstellen und anwenden

Stil erweitern und anpassen

Design als Design anwenden

Stilhierarchie

TextAppearance

Standarddesign anpassen

Versionsspezifische Stile hinzufügen

Widget-Stile anpassen

Weitere Informationen

Blogposts