Memigrasikan tema XML ke Material 3 di Compose

Saat memperkenalkan Compose di aplikasi yang ada, Anda perlu memigrasikan tema XML Material untuk menggunakan MaterialTheme bagi komponen Compose. Artinya, penerapan tema aplikasi Anda akan memiliki dua sumber tepercaya: tema berbasis View dan tema Compose. Setiap perubahan pada gaya visual Anda harus dilakukan di beberapa tempat. Setelah aplikasi Anda dimigrasikan sepenuhnya ke Compose, hapus tema XML Anda.

Anda dapat menggunakan alat Material Theme Builder untuk memigrasikan warna.

Saat Anda memulai migrasi dari XML ke Compose, migrasikan tema ke tema Compose Material 3.

Glosarium

Istilah Definisi
MaterialTheme Fungsi composable yang menyediakan tema (warna, tipografi, bentuk) ke komponen Compose UI.
Shape Objek Compose yang digunakan untuk menentukan bentuk komponen kustom untuk MaterialTheme.
Typography Objek Compose yang digunakan untuk menentukan gaya teks kustom (keluarga font, ukuran, ketebalan) untuk MaterialTheme.
Color Objek Compose yang digunakan untuk menentukan skema warna kustom untuk MaterialTheme.
Tema XML Sistem tema Android yang ditentukan dalam file XML, yang digunakan oleh sistem View.

Batasan

Sebelum bermigrasi, perhatikan batasan berikut:

  • Panduan ini hanya berfokus pada migrasi ke Material 3. Untuk bermigrasi dari sistem desain alternatif, lihat Material 2 atau Sistem desain kustom di Compose.
  • Tujuan utamanya adalah migrasi lengkap ke Compose, yang memungkinkan penghapusan tema XML. Panduan ini menjelaskan cara melakukan migrasi, tetapi tidak menjelaskan cara menghapus tema XML sepenuhnya.

Langkah 1: Evaluasi sistem desain

Identifikasi sistem desain mana yang digunakan dalam project XML View. Analisis jalur migrasi dan langkah-langkah yang diperlukan untuk memigrasikan sistem desain yang ada ke Material 3 di Compose.

Langkah 2: Identifikasi file sumber tema

Identifikasi dan temukan semua file dan resource XML yang diperlukan untuk penerapan tema: skema warna terang dan gelap, tema, bentuk, dimensi, tipografi, gaya dan file relevan lainnya.

Resource seperti string dapat digunakan kembali apa adanya dan tidak perlu dimigrasikan.

Langkah 3: Migrasikan warna

Migrasikan skema warna gelap dan terang dari XML ke skema warna yang setara di Material 3 Compose.

Langkah 4: Migrasikan bentuk dan tipografi kustom

  • Jika aplikasi Anda menggunakan bentuk kustom:

    1. Dalam kode Compose, tentukan objek Shape untuk mereplikasi definisi bentuk XML Anda.

    2. Berikan objek Shape ini ke MaterialTheme Anda.

      Untuk mengetahui detail selengkapnya, lihat bentuk.

  • Jika aplikasi Anda menggunakan tipografi kustom:

    1. Dalam kode Compose, tentukan objek Typography dalam kode Compose untuk mereplikasi gaya teks dan definisi font XML Anda.

    2. Berikan objek Typography ini ke MaterialTheme Anda.

      Untuk mengetahui detail selengkapnya, lihat tipografi.

Langkah 5: Validasi migrasi tema

Selalu gunakan nilai tema yang ada dari tema XML asli sebagai sumber kebenaran untuk Tema Material baru di Compose Jangan pernah membuat nilai tema baru selama migrasi, untuk mempertahankan konsistensi merek dan menghindari regresi visual.

Pastikan semua nilai tema Compose baru cocok dengan nilai XML yang ada. Jangan meng-hardcode nilai yang dimigrasikan.