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, mit denen die Darstellung eines einzelnen Stils festgelegt wird.
View
Über einen Stil können Attribute festgelegt werden.
wie Schriftfarbe, Schriftgröße und Hintergrundfarbe.
Ein Design ist eine Sammlung von Attributen, die auf eine gesamte App, Aktivität oder Ansicht angewendet wird. und nicht nur eine Einzelansicht. Wenn Sie ein Design anwenden, wird jede Ansicht in der App oder In der Aktivität werden alle unterstützten Attribute des Designs 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
.
![](https://developer.android.google.cn/static/training/material/images/material-themes_2x.png?authuser=9&hl=de)
Abbildung 1: Zwei Themen, die auf dieselbe Aktivität angewendet werden:
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 haben Stile dieselbe Grundstruktur: ein Schlüssel/Wert-Paar, das attributes Ressourcen
Ein style gibt Attribute für einen bestimmten Ansichtstyp an. Zum Beispiel könnte ein Stil die Attribute einer Schaltfläche angeben. Jedes Attribut, das Sie in einem Stil angeben, ist ein Attribut, das Sie in in der Layoutdatei. 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 von Stilen, Layouts,
Widgets usw. In Designs werden Android semantische Namen wie colorPrimary
zugewiesen
Ressourcen.
Stile und Designs sollten aufeinander abgestimmt sein. Angenommen, Sie haben einen Stil, in dem
dass ein Teil einer Schaltfläche colorPrimary
und ein anderer Teil
colorSecondary
. Die tatsächlichen Definitionen dieser Farben finden Sie im Design. Wann?
das Gerät in den Nachtmodus wechselt, kann Ihre App vom das Design auf das „dunkle“ Thema,
und die Werte für all diese
Ressourcennamen ändern. Die Stile müssen nicht geändert werden, da die
Stile verwenden die semantischen Namen und keine spezifischen Farbdefinitionen.
Weitere Informationen zum Zusammenwirken von Designs und Stilen finden Sie in diesem Blogpost. Android-Stile: Designs und Stile
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. Diename
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. Ansicht ignoriert alle Attribute, die es nicht akzeptiert.
<ph type="x-smartling-placeholder">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
Erweitern Sie beim Erstellen Ihrer eigenen Stile immer einen vorhandenen Stil aus dem Framework oder Support
Bibliothek, damit die Kompatibilität mit Plattform-UI-Stilen gewährleistet ist. Um einen Stil zu erweitern, geben Sie den Parameter
Stil, den Sie mit dem Attribut parent
erweitern möchten. Sie können die übernommene
und fügen Sie neue hinzu.
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
Die Supportbibliothek bietet Kompatibilität, indem jeder Stil für die UI-Attribute optimiert wird, die in
für jede Version. Die Stile der Supportbibliothek haben oft einen Namen, der dem Stil der Plattform ähnelt.
aber mit enthalten: 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. Beispiel:
Im folgenden Beispiel werden Stile für die Textdarstellung aus der Support Library übernommen:
<style name="GreenText" parent="TextAppearance.AppCompat"> <item name="android:textColor">#00FF00</item> </style>
Sie können Stile auch übernehmen (außer denen der Plattform), indem Sie die
mit einem Punkt angeben, statt das Attribut parent
zu verwenden. Stellen Sie also den Parameter
Name des Designs durch den Namen des Designs, das 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. Beispiel:
Der folgende Stil übernimmt alle Stile aus der GreenText
im vorherigen Beispiel
und vergrößert dann den Text:
<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.
<ph type="x-smartling-placeholder">Welche Attribute Sie mit einem <item>
-Tag deklarieren können, erfahren Sie im Abschnitt „XML“
Attribute“ in den verschiedenen Klassenreferenzen. Alle Ansichten werden unterstützt
XML-Attribute aus der Basis
View
-Klasse und in vielen Ansichten gibt es eigene spezielle Attribute. Beispiel: Der Parameter
TextView
XML-Attribute
einschließlich der
android:inputType
Attribut, das Sie auf eine Textansicht anwenden können, bei der Eingaben erfolgen, z. B.
EditText
-Widget
Stil als Design anwenden
Designs werden auf die gleiche Weise erstellt 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 zum Beispiel das Material Design-Element der Android Support Library „dark“ (dunkel) an: Thema zu die gesamte App:
<manifest ... > <application android:theme="@style/Theme.AppCompat" ... > </application> </manifest>
Und so wenden wir das "Licht" auf nur eine Aktivität zu beschränken:
<manifest ... > <application ... > <activity android:theme="@style/Theme.AppCompat.Light" ... > </activity> </application> </manifest>
Auf jede Ansicht in der App oder Aktivität werden die von der App unterstützten Stile angewendet. Thema. Wenn eine Ansicht nur einige der im Stil deklarierten Attribute unterstützt, wird sie angewendet. nur diese Attribute und ignoriert die nicht unterstützten Attribute.
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.
Die vorherigen Beispiele zeigen, wie ein Design wie Theme.AppCompat
angewendet wird,
die aus der Android Support Library stammen. Üblicherweise möchten Sie das Design jedoch
die Marke Ihrer App. Erweitern Sie dazu am besten diese Stile aus der Support Library
einige Attribute überschreiben, wie im folgenden Abschnitt beschrieben.
Stilhierarchie
Android bietet eine Vielzahl von Möglichkeiten, Attribute in Ihrer Android-App festzulegen. Beispiel: Sie können Attribute direkt in einem Layout festlegen, einen Stil auf eine Ansicht anwenden, ein Design auf ein Layout anwenden und können sogar programmatisch Attribute festlegen.
Achten Sie bei der Gestaltung Ihrer App auf die Stilhierarchie von Android. Verwenden Sie im Allgemeinen Designs und Stile so weit wie möglich zu vereinheitlichen. 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
- Die Anwendung bestimmter ansichtsspezifischer Stile, z. B. durch Festlegen einer
TextAppearance
amTextView
.
![](https://developer.android.google.cn/static/guide/topics/ui/images/text-multiple-styles.png?authuser=9&hl=de)
Abbildung 2: Der Stil eines span
-Elements überschreibt den Stil einer anderen
textAppearance
.
Textdarstellung
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 einen textspezifischen Stil definieren, aber den Stil eines
View
für andere Zwecke verfügbar. Wenn Sie jedoch Textattribute definieren,
direkt am View
oder in einem Stil angeben, überschreiben diese Werte den
TextAppearance
-Werte.
TextAppearance
unterstützt eine Teilmenge von Stilattributen, die TextView
Angebote. 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 nicht unterstützt.
Standarddesign anpassen
Wenn du ein Projekt mit Android Studio erstellst, wird ein Material Design-Design auf deine App angewendet,
gemäß der Definition in der styles.xml
-Datei Ihres Projekts. Dieser AppTheme
-Stil
erweitert ein Design aus der Supportbibliothek und enthält Überschreibungen für die verwendeten Farbattribute
durch wichtige UI-Elemente wie die App-Leiste
Unverankerte Aktionsschaltfläche, falls verwendet. Sie
können Sie das Farbdesign Ihrer App 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 eigentlich Verweise auf andere
Farbressourcen, die in den
res/values/colors.xml
-Datei des Projekts. Das ist die Datei, die Sie bearbeiten, um die Farben zu ändern.
Weitere Informationen finden Sie in der
Farben in Material Design – Übersicht
, um die Nutzererfahrung 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
Beim Hinzufügen
Stile für die Ansichten in Ihrem Layout. Sie finden die Attribute auch in den XML-Attributen
in den Klassenreferenzen der Ansicht. Beispielsweise unterstützen alle Ansichten
XML-Attribute aus der Basis View
.
Die meisten Attribute werden auf bestimmte Arten von Ansichten angewendet, einige gelten auch für alle Ansichten. Sie können jedoch
einige Themenattribute, die unter
R.styleable.Theme
gelten für
Aktivitätsfensters und nicht die Ansichten im Layout. Beispielsweise ändert windowBackground
den Wert
Fensterhintergrund und windowEnterTransition
definieren eine Übergangsanimation, die verwendet wird, wenn
beginnt die Aktivität. 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. Diese sehen Sie am besten in der
Datei attrs.xml
der Bibliothek.
In der Support Library findest du auch verschiedene Designs, die du erweitern kannst
anstelle der im vorherigen Beispiel dargestellten Werte. Die verfügbaren Designs sehen Sie am besten
die
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 Ihrem Design hinzufügen.
und gleichzeitig mit älteren Versionen kompatibel sind. 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. Das bedeutet, dass Sie
zum Duplizieren von Stilen, indem Sie
mit einer „base“ beginnen und dann in Ihrem versionsspezifischen
Stile.
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 Basisdesign in res/values/styles.xml
kann also so aussehen:
dies:
<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>
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 Supportbibliothek verfügt über einen Standardstil. Wenn Sie zum Beispiel
gestalte deine App mit einem Design aus der Support Library, einer Instanz von
Button
wird mit dem
Widget.AppCompat.Button
-Stil. Wenn Sie einen anderen Widget-Stil auf ein
können Sie das Attribut style
in Ihrer Layoutdatei verwenden. Beispiel: Der Parameter
wird der rahmenlose 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 im
buttonStyle
so:
<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:
Blogposts
- Android-Stile: Designs und Stile
- Android-Stile: allgemeine Designattribute
- Android-Stil: Designattribute bevorzugen