XML-Designs in Compose zu Material 3 migrieren

Wenn Sie Compose in einer vorhandenen App einführen, müssen Sie Ihre Material-XML-Themes migrieren, damit MaterialTheme für Compose-Komponenten verwendet wird. Das bedeutet, dass das Theming Ihrer App zwei „Sources of Truth“ hat: das View-basierte Theme und das Compose-Theme. Änderungen am Styling müssen an mehreren Stellen vorgenommen werden. Sobald Ihre App vollständig zu Compose migriert wurde, entfernen Sie das XML-Theming.

Sie können das Tool Material Theme Builder verwenden, um Farben zu migrieren.

Wenn Sie die Migration von XML zu Compose starten, migrieren Sie das Theming zu Material 3-Compose-Theming.

Glossar

Begriff	Definition
MaterialTheme	Die zusammensetzbare Funktion, die Compose-UI-Komponenten mit Theming-Informationen (Farben, Typografie, Formen) versieht.
Shape	Ein Compose-Objekt, mit dem benutzerdefinierte Komponentenformen für ein MaterialTheme definiert werden.
Typography	Ein Compose-Objekt, mit dem benutzerdefinierte Textstile (Schriftfamilien, Größen, Stärken) für ein MaterialTheme definiert werden.
Color	Ein Compose-Objekt, mit dem benutzerdefinierte Farbschemas für MaterialTheme definiert werden.
XML-Design	Das in XML-Dateien definierte Android-Theming-System, das vom View-System verwendet wird.

Beschränkungen

Beachten Sie vor der Migration die folgenden Einschränkungen:

• In diesem Leitfaden geht es nur um die Migration zu Material 3. Informationen zur Migration von alternativen Designsystemen finden Sie unter Material 2 oder Benutzerdefinierte Designsysteme in Compose.
• Das ultimative Ziel ist eine vollständige Migration zu Compose, die das Entfernen von XML-Theming ermöglicht. In diesem Leitfaden wird beschrieben, wie Sie migrieren, aber nicht, wie Sie das XML-Theming endgültig entfernen.

Schritt 1: Designsystem bewerten

Ermitteln Sie, welches Designsystem im XML-Ansichtsprojekt verwendet wird. Analysieren Sie den Migrationspfad und die erforderlichen Schritte, um das vorhandene Designsystem in Compose zu Material 3 zu migrieren.

Schritt 2: Quellcode-Dateien des Themes ermitteln

Suchen Sie alle XML-Ressourcen und -Dateien, die für das Theming erforderlich sind: helle und dunkle Farbschemas, Designs, Formen, Dimensionen, Typografie, Stile und andere relevante Dateien.

Ressourcen wie Strings können unverändert wiederverwendet werden und müssen nicht migriert werden.

Schritt 3: Farben migrieren

Migrieren Sie die dunklen und hellen Farbschemas von XML zu den entsprechenden Material 3-Compose-Elementen.

Hinweis :Die Benennung von Material 3 unterscheidet sich von der Benennung von Material 2.

Schritt 4: Benutzerdefinierte Formen und Typografie migrieren

• Wenn Ihre App benutzerdefinierte Formen verwendet:

  1. Definieren Sie in Ihrem Compose-Code ein Shape-Objekt, um Ihre XML-Formdefinitionen zu replizieren.

  2. Stellen Sie dieses Shape-Objekt für Ihre MaterialTheme bereit.

     Weitere Informationen finden Sie unter Formen.

• Wenn Ihre App benutzerdefinierte Typografie verwendet:

  1. Definieren Sie in Ihrem Compose-Code ein Typography-Objekt, um Ihre XML-Textstile und Schriftartdefinitionen zu replizieren.

  2. Stellen Sie dieses Typography-Objekt für Ihre MaterialTheme bereit.

     Weitere Informationen finden Sie unter Typografie.

Schritt 5: Migration des Designs validieren

Verwenden Sie immer die vorhandenen Designwerte aus dem ursprünglichen XML-Design als Quelle für das neue Material Design in Compose. Erfinden Sie während der Migration niemals neue Designwerte, um die Markenkonsistenz aufrechtzuerhalten und visuelle Regressionen zu vermeiden.

Prüfen Sie, ob alle neuen Compose-Themenwerte mit den vorhandenen XML-Werten übereinstimmen. Migrierte Werte dürfen nicht fest codiert werden.