Materialdesign

Artikel
07/13/2023

Material Theme ist ein Benutzeroberflächenstil, der das Aussehen und Verhalten von Ansichten und Aktivitäten ab Android 5.0 (Lollipop) bestimmt. Das Materialdesign ist in Android 5.0 integriert und wird daher sowohl von der Systemoberfläche als auch von Anwendungen verwendet. MaterialDesign ist kein "Design" im Sinne einer systemweiten Darstellungsoption, die ein Benutzer dynamisch aus einem Einstellungsmenü auswählen kann. Stattdessen kann material theme als eine Reihe verwandter integrierter Basisstile betrachtet werden, mit denen Sie das Aussehen und Verhalten Ihrer App anpassen können.

Android bietet drei MaterialDesign-Varianten:

Theme.Material – Dunkle Version des Materialdesigns; Dies ist die Standardvariante in Android 5.0.
Theme.Material.Light – Leichte Version des Materialdesigns.
Theme.Material.Light.DarkActionBar – Helle Version des Materialdesigns, aber mit einer dunklen Aktionsleiste.

Beispiele für diese Varianten des Materialdesigns werden hier angezeigt:

Sie können vom Materialdesign ableiten, um ein eigenes Design zu erstellen, wobei einige oder alle Farbattribute außer Kraft gesetzt werden. Sie können z. B. ein Design erstellen, das von Theme.Material.Lightabgeleitet ist, aber die App-Leistenfarbe so überschreibt, dass sie der Farbe Ihrer Marke entspricht. Sie können auch einzelne Ansichten formatieren. Sie können beispielsweise einen Stil für CardView erstellen, der abgerundete Ecken aufweist und eine dunklere Hintergrundfarbe verwendet.

Sie können ein einzelnes Design für eine gesamte App oder verschiedene Designs für verschiedene Bildschirme (Aktivitäten) in einer App verwenden. In den obigen Screenshots verwendet beispielsweise eine einzelne App ein anderes Design für jede Aktivität, um die integrierten Farbschemas zu veranschaulichen. Optionsfelder schalten die App auf unterschiedliche Aktivitäten um und zeigen daher verschiedene Designs an.

Da material theme nur unter Android 5.0 und höher unterstützt wird, können Sie es nicht verwenden (oder ein benutzerdefiniertes Design, das von Materialdesign abgeleitet wurde), um Ihre App für die Ausführung unter früheren Android-Versionen zu entwerfen. Sie können Ihre App jedoch für die Verwendung des Materialdesigns auf Android 5.0-Geräten konfigurieren und ordnungsgemäß auf ein früheres Design zurückgreifen, wenn es unter älteren Android-Versionen ausgeführt wird (ausführliche Informationen finden Sie im Abschnitt Kompatibilität dieses Artikels).

Anforderungen

Für die Verwendung der neuen Android 5.0-Materialdesignfeatures in Xamarin-basierten Apps ist Folgendes erforderlich:

Xamarin.Android – Xamarin.Android 4.20 oder höher muss mit Visual Studio oder Visual Studio für Mac installiert und konfiguriert werden.
Android SDK – Android 5.0 (API 21) oder höher muss über den Android SDK Manager installiert werden.
Java JDK 1.8 – JDK 1.7 kann verwendet werden, wenn Sie speziell die API-Ebene 23 und früher als Ziel verwenden. JDK 1.8 ist bei Oracle verfügbar.

Informationen zum Konfigurieren eines Android 5.0-App-Projekts finden Sie unter Einrichten eines Android 5.0-Projekts.

Verwenden der integrierten Designs

Die einfachste Möglichkeit zur Verwendung des Materialdesigns besteht darin, Ihre App so zu konfigurieren, dass sie ein integriertes Design ohne Anpassung verwendet. Wenn Sie ein Design nicht explizit konfigurieren möchten, wird Ihre App standardmäßig auf Theme.Material (das dunkle Design) festgelegt. Wenn Ihre App nur über eine Aktivität verfügt, können Sie ein Design auf Aktivitätsebene konfigurieren. Wenn Ihre App über mehrere Aktivitäten verfügt, können Sie ein Design auf Anwendungsebene so konfigurieren, dass für alle Aktivitäten dasselbe Design verwendet wird, oder Sie können verschiedenen Aktivitäten unterschiedliche Designs zuweisen. In den folgenden Abschnitten wird erläutert, wie Designs auf App- und Aktivitätsebene konfiguriert werden.

Design einer Anwendung

Um eine gesamte Anwendung für die Verwendung eines Materialdesigns zu konfigurieren, legen Sie das android:theme Attribut des Anwendungsknotens in AndroidManifest.xml auf eine der folgenden Optionen fest:

@android:style/Theme.Material – Dunkles Design.
@android:style/Theme.Material.Light – Helles Design.
@android:style/Theme.Material.Light.DarkActionBar – Helles Design mit dunkler Aktionsleiste.

Im folgenden Beispiel wird die Anwendung MyApp für die Verwendung des hellen Designs konfiguriert:

<application android:label="MyApp" 
             android:theme="@android:style/Theme.Material.Light">
</application>

Alternativ können Sie das Anwendungsattribute Theme in AssemblyInfo.cs (oder Properties.cs) festlegen. Beispiel:

[assembly: Application(Theme="@android:style/Theme.Material.Light")]

Wenn das Anwendungsdesign auf @android:style/Theme.Material.Lightfestgelegt ist, wird jede Aktivität in MyApp mithilfe Theme.Material.Lightvon angezeigt.

Gestalten einer Aktivität

Um eine Aktivität zu designen, fügen Sie dem [Activity] Attribut über Ihrer Aktivitätsdeklaration eine Theme Einstellung hinzu und weisen Theme sie der Gewünschten Materialdesign-Variante zu. Im folgenden Beispiel wird eine Aktivität mit designt Theme.Material.Light:

[Activity(Theme = "@android:style/Theme.Material.Light",
          Label = "MyApp", MainLauncher = true, Icon = "@drawable/icon")]

Andere Aktivitäten in dieser App verwenden das standardmäßige Theme.Material dunkle Farbschema (oder, falls konfiguriert, die Anwendungsdesigneinstellung).

Verwenden von benutzerdefinierten Designs

Sie können Ihre Marke verbessern, indem Sie ein benutzerdefiniertes Design erstellen, das Ihre App mit den Farben Ihrer Marke formatiert. Um ein benutzerdefiniertes Design zu erstellen, definieren Sie eine neue Formatvorlage, die von einer integrierten Variante des Materialdesigns abgeleitet ist und die farblichen Attribute überschreiben, die Sie ändern möchten. Sie können beispielsweise ein benutzerdefiniertes Design definieren, das von Theme.Material.Light.DarkActionBar abgeleitet wird und die Hintergrundfarbe des Bildschirms in Beige statt weiß ändert.

Das Materialdesign macht die folgenden Layoutattribute zur Anpassung verfügbar:

colorPrimary – Die Farbe der App-Leiste.
colorPrimaryDark– Die Farbe der status-Leiste und kontextbezogener App-Balken; dies ist normalerweise eine dunkle Version von colorPrimary.
colorAccent – Die Farbe von Ui-Steuerelementen wie Kontrollkästchen, Optionsfeldern und Bearbeitungstextfeldern.
windowBackground – Die Farbe des Bildschirmhintergrunds.
textColorPrimary – Die Farbe des Ui-Texts in der App-Leiste.
statusBarColor– Die Farbe des status Balkens.
navigationBarColor – Die Farbe der Navigationsleiste.

Diese Bildschirmbereiche sind im folgenden Diagramm beschriftet:

Standardmäßig statusBarColor ist auf den Wert von colorPrimaryDarkfestgelegt. Sie können auf eine Volltonfarbe oder auf @android:color/transparent festlegenstatusBarColor, um den status Balken transparent zu machen. Die Navigationsleiste kann auch transparent gemacht werden, indem Sie auf @android:color/transparentfestlegennavigationBarColor.

Erstellen eines benutzerdefinierten App-Designs

Sie können ein benutzerdefiniertes App-Design erstellen, indem Sie Dateien im Ordner Ressourcen Ihres App-Projekts erstellen und ändern. Führen Sie die folgenden Schritte aus, um Ihre App mit einem benutzerdefinierten Design zu formatieren:

Erstellen Sie eine colors.xml-Datei unter Ressourcen/Werte . Verwenden Sie diese Datei, um Ihre benutzerdefinierten Designfarben zu definieren. Sie können beispielsweise den folgenden Code in colors.xml einfügen, um Ihnen den Einstieg zu erleichtern:

<?xml version="1.0" encoding="UTF-8" ?>
<resources>
    <color name="my_blue">#3498DB</color>
    <color name="my_green">#77D065</color>
    <color name="my_purple">#B455B6</color>
    <color name="my_gray">#738182</color>
</resources>

Ändern Sie diese Beispieldatei, um die Namen und Farbcodes für Farbressourcen zu definieren, die Sie in Ihrem benutzerdefinierten Design verwenden.
Erstellen Sie einen Ordner Resources/values-v21 . Erstellen Sie in diesem Ordner eine styles.xml-Datei :

Beachten Sie, dass Resources/values-v21 spezifisch für Android 5.0 ist. Ältere Android-Versionen lesen keine Dateien in diesem Ordner.
Fügen Sie einen resources Knoten styles.xml hinzu, und definieren Sie einen style Knoten mit dem Namen Ihres benutzerdefinierten Designs. Hier ist beispielsweise eine styles.xml-Datei , die MyCustomTheme definiert (abgeleitet vom integrierten Theme.Material.Light Designstil):

<?xml version="1.0" encoding="UTF-8" ?>
<resources>
    <!-- Inherit from the light Material Theme -->
    <style name="MyCustomTheme" parent="android:Theme.Material.Light">
        <!-- Customizations go here -->
    </style>
</resources>

An diesem Punkt zeigt eine App, die MyCustomTheme verwendet, das Aktiendesign Theme.Material.Light ohne Anpassungen an:
Fügen Sie farbanpassungen zustyles.xml hinzu, indem Sie die Farben der Layoutattribute definieren, die Sie ändern möchten. Wenn Sie beispielsweise die App-Leistenfarbe my_blue in und die Farbe von UI-Steuerelementen in ändern möchten my_purple, fügen Sie farbüberschreibungen zu styles.xml hinzu, die auf farbliche Ressourcen verweisen, die incolors.xmlkonfiguriert sind:

<?xml version="1.0" encoding="UTF-8" ?>
<resources>
    <!-- Inherit from the light Material Theme -->
    <style name="MyCustomTheme" parent="android:Theme.Material.Light">
        <!-- Override the app bar color -->
        <item name="android:colorPrimary">@color/my_blue</item>
        <!-- Override the color of UI controls -->
        <item name="android:colorAccent">@color/my_purple</item>
    </style>
</resources>

Nachdem diese Änderungen vorgenommen wurden, zeigt eine App, die MyCustomTheme verwendet, eine App-Leistenfarbe in my_blue und UI-Steuerelemente in my_purplean, verwendet das Theme.Material.Light Farbschema jedoch überall sonst:

In diesem Beispiel übernimmt MyCustomTheme Farben von Theme.Material.Light für die Hintergrundfarbe, status Balken und Textfarben, ändert jedoch die Farbe der App-Leiste in my_blue und legt die Farbe des Optionsfelds auf my_purplefest.

Erstellen eines benutzerdefinierten Ansichtsformats

Android 5.0 ermöglicht es Ihnen auch, eine individuelle Ansicht zu gestalten. Nachdem Sie colors.xml und styles.xml erstellt haben (wie im vorherigen Abschnitt beschrieben), können Sie styles.xmleinen Ansichtsstil hinzufügen. Führen Sie die folgenden Schritte aus, um eine einzelne Ansicht zu formatieren:

Bearbeiten Sie Resources/values-v21/styles.xml , und fügen Sie einen style Knoten mit dem Namen Ihres benutzerdefinierten Ansichtsstils hinzu. Legen Sie die benutzerdefinierten Farbattribute für Ihre Ansicht innerhalb dieses Knotens style fest. Um beispielsweise eine benutzerdefinierte CardView-Formatvorlage zu erstellen, die mehr abgerundete Ecken aufweist und als Karte Hintergrundfarbe verwendet, my_blue fügen Sie einen style Knoten zu styles.xml (innerhalb des resources Knotens) hinzu, und konfigurieren Sie die Hintergrundfarbe und den Eckenradius:

<!-- Theme an individual view: -->
<style name="CardView.MyBlue">

    <!-- Change the background color to Xamarin blue: -->
    <item name="cardBackgroundColor">@color/my_blue</item>

    <!-- Make the corners very round: -->
    <item name="cardCornerRadius">18dp</item>
</style>

Legen Sie in Ihrem Layout das style Attribut für diese Ansicht so fest, dass es dem namen der benutzerdefinierten Formatvorlage entspricht, den Sie im vorherigen Schritt ausgewählt haben. Beispiel:

<android.support.v7.widget.CardView
    style="@style/CardView.MyBlue"
    android:layout_width="200dp"
    android:layout_height="100dp"
    android:layout_gravity="center_horizontal">

Der folgende Screenshot enthält ein Beispiel für den Standardwert CardView (links dargestellt) im Vergleich zu einem CardView , das mit dem benutzerdefinierten CardView.MyBlue Design formatiert wurde (rechts dargestellt):

In diesem Beispiel wird die benutzerdefinierte CardView mit der Hintergrundfarbe my_blue und einem Eckradius von 18dp angezeigt.

Kompatibilität

Führen Sie die folgenden Schritte aus, um Ihre App so zu gestalten, dass sie unter Android 5.0 das Materialdesign verwendet, aber automatisch auf einen abwärtskompatiblen Stil zurückgesetzt wird:

Definieren Sie ein benutzerdefiniertes Design in Resources/values-v21/styles.xml , das von einem Material Design-Stil abgeleitet wird. Beispiel:

<resources>
    <style name="MyCustomTheme" parent="android:Theme.Material.Light">
        <!-- Your customizations go here -->
    </style>
</resources>

Definieren Sie in Resources/values/styles.xml ein benutzerdefiniertes Design, das von einem älteren Design abgeleitet ist, aber denselben Designnamen wie oben verwendet. Beispiel:

<resources>
    <style name="MyCustomTheme" parent="android:Theme.Holo.Light">
        <!-- Your customizations go here -->
    </style>
</resources>

Konfigurieren Sie ihre App inAndroidManifest.xmlmit dem Namen des benutzerdefinierten Designs. Beispiel:

<application android:label="MyApp" 
             android:theme="@style/MyCustomTheme">
</application>

Alternativ können Sie eine bestimmte Aktivität mithilfe Ihres benutzerdefinierten Designs formatieren:

[Activity(Label = "MyActivity", Theme = "@style/MyCustomTheme")]

Wenn Ihr Design Farben verwendet, die in einer colors.xml-Datei definiert sind, stellen Sie sicher, dass Sie diese Datei in Resources/values (anstelle von Resources/values-v21) platzieren, damit beide Versionen Ihres benutzerdefinierten Designs auf Ihre Farbdefinitionen zugreifen können.

Wenn Ihre App auf einem Android 5.0-Gerät ausgeführt wird, wird die Designdefinition verwendet, die unter Resources/values-v21/styles.xmlangegeben ist. Wenn diese App auf älteren Android-Geräten ausgeführt wird, wird automatisch auf die Designdefinition zurückfallen, die unter Resources/values/styles.xmlangegeben ist.

Weitere Informationen zur Designkompatibilität mit älteren Android-Versionen finden Sie unter Alternative Ressourcen.

Zusammenfassung

In diesem Artikel wurde die neue Benutzeroberfläche des Materialdesigns vorgestellt, die in Android 5.0 (Lollipop) enthalten ist. Es wurden die drei integrierten Materialdesign-Varianten beschrieben, die Sie zum Formatieren Ihrer App verwenden können, es wurde erläutert, wie Sie ein benutzerdefiniertes Design für das Branding Ihrer App erstellen, und es wurde ein Beispiel für das Design einer individuellen Ansicht bereitgestellt. Schließlich wurde in diesem Artikel erläutert, wie Sie das Materialdesign in Ihrer App verwenden und gleichzeitig die Abwärtskompatibilität mit älteren Android-Versionen beibehalten.