Material Design 2 versus Material Design 3

Material Design 1.9.0 als aktuelle Version

Derzeit befindet sich Material Design in der Version 1.9.0 (stand 17.05.2023). In dieser Version wurden neue Arten zur Navigation und Interaktion mobiler Android Anwendungen vorgestellt – insbesondere in Bezug auf Listen (https://material.io/blog/android-stable-release-1-9-0).

Material Design an sich ist ein Designsystem von Google, welches mit Hilfe der Google Designer und Entwickler:innen entworfen wurde. Für ausführliche UX-Anleitungen und UI-Implementierungen für bspw. Android, Flutter oder auch das Web steht material.io zur Verfügung.

Nun, mit Material Design 3, sollen laut Google persönliche, anpassungsfähige und ausdrucksstarte Erlebnisse geschaffen werden. Damit ist der Umfang von dynamischen Farben und verbesserter Zugänglichkeit bis hin zu Grundlagen für große Bildschirmlayouts und Design-Tokens gemeint. Wie sich einige Layoutkomponenten verändert haben und wie eine potenzielle Migration von Material Design 2 zu 3 aussehen könnte, wird im Folgenden beschrieben.

Theme aktualisieren

Material Design 3 beinhaltet ein erweitertes Farbensystem, welches bspw. dynamische Farben unterstützt. Um das Theme dementsprechend zu nutzen bzw. auch zu aktualisieren, muss das vorherige Theme ersetzt werden. Hierbei muss:

  • MaterialComponents.* mit Theme.Material3.*

für Themes, und

  • MaterialComponents.* mit Widget.Material3.*

für Widgetstyles ersetzt werden.

Farben und Themes

Einige Farben wurden in Material Design 3 entfernt, andere erweitert. Eine vollständige Auflistung sieht man hier:

MDC 1.4.0 (Material Design 2) Material 3
android:backgroundColor android:backgroundColor
colorPrimary colorPrimary
colorOnPrimary colorOnPrimary
colorPrimaryContainer
colorOnPrimaryContainer
colorPrimaryInverse
colorPrimaryVariant DEPRECATED
colorPrimarySurface colorSurface
colorOnPrimarySurface colorOnSurface
colorSecondary colorSecondary
colorOnSecondary colorOnSecondary
colorSecondaryContainer
colorOnSecondaryContainer
colorSecondaryVariant DEPRECATED
colorTertiary
colorOnTertiary
colorTertiaryContainer
colorOnTertiaryContainer
colorError colorError
colorOnError colorOnError
colorErrorContainer
colorOnErrorContainer
colorSurface colorSurface
colorOnSurface colorOnSurface
colorSurfaceVariant
colorOnSurfaceVariant
colorSurfaceInverse
colorOnSurfaceInverse
colorOutline

Diese neuen Farbattribute ermöglichen unter anderem das Verwenden von dynamischen Farben. Um die dynamischen Farben zu visualisieren, kann der sogenannte Material Theme Builder im Web und Figma verwendet werden. Um dieses Feature in einer Android Anwendung zu benutzen, muss lediglich eine Zeile in der Application-Klasse hinzugefügt werden:

DynamicColors.applyToActivitiesIfAvailable(this)

Komponenten-Aktualisierungen

Einige der Layoutkomponenten haben sich in Aussehen und Verwendung geändert. Welche das sind und worauf man hierbei achten muss, wird im Folgenden näher betrachtet.

Floating Action Button und Top App Bar

Material Design | Floating Action Button
Material Design | Floating Action Button

Die beiden Abbildungen zeigen die Unterschiede des Floating Action Buttons und der Top App Bar (oder auch Toolbar) zwischen M2 und M3. Wie man sieht, ist der Floating Action Button eckiger geworden und die Schriftart hat sich in der Top App Bar geändert. Um die Änderung herbeizuführen, muss im App Theme folgendes geändert werden:

<style name=“Theme.MaterialDesignTest“ parent=“Theme.MaterialComponents.Light“>
(Material Design 2)

<style name=“Theme.MaterialDesignTest“ parent=“Theme.Material3.Light“>
(Material Design 3)

Durch das Anpassen des App Themes wird automatisch die „neue“ Bottom Navigation View aus dem Material Design 3 verwendet. Es wird keine weitere Konfiguration oder Anpassen eines style-Attributs benötigt.

Buttons

Material Design | Buttons - grau
Material Design | Buttons - blau

Bei der Buttonimplementierung muss das style-Attribut angepasst werden. Dadurch wird aus

<Button

            style=“@style/Widget.AppCompat.Button“

(Material Design 2)

<Button

            style=“@style/Widget.Material3.Button“

(Material Design 3)

In der neusten Version von Material Design 3 (stand 03.07.2023) wurde die Carousel-Implementierung vorgestellt. Damit soll es möglich sein, auf neue Art und Weise in und mit Apps zu interagieren (https://material.io/blog/android-stable-release-1-9-0). An sich besteht die Implementierung hauptsächlich aus einer standardmäßigen RecyclerView-Implementierung. Also wird zunächst im Layout wie üblich eine RecylclerView eingebunden:

Material Design | Implementierung des neusten Features

Natürlich müssen auch entsprechende Daten angezeigt werden. Hier wird der Einfachheit halber eine Stringliste verwendet:

Material Design | Implementierung des neusten Features - Liste

Anschließend, wie bei einer RecyclerView üblich, müssen LayoutManager und Adapter definiert und zugewiesen werden.

Material Design | Implementierung des neusten Features - Layoutmanager

Hier ist allerdings ein kleines Detail „anders“. Als LayoutManager wird nicht bspw. ein LinearLayoutManager verwendet, sondern der mit Material Design 3 dazukommende CarouselLayoutManager. Dieser übernimmt die ganze Arbeit und zeigt die RecyclerView entsprechend als Carousel an:

Fazit

Material Design 3 bietet eine verbesserte Benutzeroberfläche und Funktionen, welche die Benutzerfreundlichkeit und Interaktivität von Apps erhöhen. Es ist wichtig, dass Entwickler:innen die Neuerungen und Änderungen, die mit Material Design 3 einhergehen, verstehen, um sie effektiv in ihren Projekten umsetzen zu können.

Eine der bemerkenswertesten Änderungen in Material Design 3 ist die Einführung dynamischer Farben. Material Design 3 bietet aber auch verbesserte Komponenten wie aktualisierte Schaltflächen, Eingabefelder und Navigationselemente, die eine reibungslosere Interaktion ermöglichen. Entwickler:innen müssen die Attribute dieser Komponenten in ihren Anwendungen anpassen, um von den Verbesserungen zu profitieren.

Darüber hinaus hat Material Design 3 seine typografischen Optionen erweitert. Es gibt nun mehr Auswahlmöglichkeiten für Schriftarten und Schriftgrößen, was Developern mehr Flexibilität bei der Gestaltung ihrer Apps bietet.

Der Migrationsleitfaden auf der offiziellen Website bietet eine detaillierte Anleitung zur Implementierung von Material Design 3 und hilft dabei, mögliche Stolpersteine zu vermeiden. Es ist auch wichtig, auf dem Laufenden zu bleiben und die neuesten Ankündigungen und Updates zu Material Design zu verfolgen, um von den besten Praktiken zu lernen und die neuesten Designtrends zu nutzen.

Zusammenfassend lässt sich sagen, dass die Migration von Material Design 2 zu Material Design 3 eine Reihe verbesserter Funktionen und Möglichkeiten bietet. Dabei ist die Migration von Material Design 2 zu Material Design 3 recht einfach. Durch ein Update der Material Design Bibliothek und die Anpassung einiger Style-Attribute und Themes kann Material Design 3 verwendet werden.  Auf https://m3.material.io/develop/android/mdc-android sind weitere Informationen zu diesem Thema verfügbar – beispielsweise ein hilfreicher Migrationsleitfaden sowie Ankündigungen neuer Material Design Versionen, die spannende neue Features und Anpassungen der Designkomponenten beinhalten.

Erfahren Sie mehr über unseren Bereich Android-App-Entwicklung

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Fill out this field
Fill out this field
Bitte gib eine gültige E-Mail-Adresse ein.
You need to agree with the terms to proceed

×
Telefon

Sie sind auf der Suche nach einem Experten im Bereich App-Entwicklung? Wir freuen uns auf Ihre Nachricht!

+49 231 99953850
×