Membuat UI Modern dengan Material 3

Material Design 3 (Material You) adalah standar desain terbaru dari Google untuk aplikasi Android. Material 3 membawa elemen UI modern, warna dinamis, card elegan, dan typografi yang lebih hidup. Artikel ini membahas cara membuat tampilan Android yang modern menggunakan Material 3.

1. Tambahkan Dependency Material 3

implementation "com.google.android.material:material:1.11.0"

2. Mengaktifkan Material 3 di Theme

// themes.xml
<style name="Theme.MyApp" parent="Theme.Material3.DayNight.NoActionBar">
    <item name="colorPrimary">@color/teal_700</item>
</style>

3. Contoh Penggunaan MaterialButton

<com.google.android.material.button.MaterialButton
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Mulai"
    style="@style/Widget.Material3.Button.Filled" />

4. CardView Modern (MaterialCardView)

<com.google.android.material.card.MaterialCardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="20dp"
    app:strokeColor="@color/teal_700"
    app:strokeWidth="1dp">

    <TextView
        android:padding="20dp"
        android:text="Ini Card Material 3"
        android:textSize="16sp" />

</com.google.android.material.card.MaterialCardView>

5. TextField Modern Material 3

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    style="@style/Widget.Material3.TextInputLayout.Outlined">

    <com.google.android.material.textfield.TextInputEditText
        android:hint="Nama"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</com.google.android.material.textfield.TextInputLayout>

6. Menggunakan Material 3 dengan Jetpack Compose

Material 3 sangat optimal jika digunakan di Jetpack Compose.

@Composable
fun MyButton() {
    Button(
        onClick = {},
        colors = ButtonDefaults.buttonColors(MaterialTheme.colorScheme.primary)
    ) {
        Text("Klik Saya")
    }
}

7. Dynamic Color (Android 12+)

Material 3 mendukung dynamic color mengikuti wallpaper pengguna.

// MainActivity.kt
setContent {
    MyTheme(useDynamicColor = true) {
        AppNavigation()
    }
}

8. Best Practice Material 3 UI

• Gunakan corner radius besar (16dp–28dp) untuk modern look.
• Gunakan spacing luas (padding 16dp–24dp).
• Typography lebih besar & readable (TextSize 16–20sp).
• Gunakan warna lembut (pastel) atau dynamic color.
• Hindari shadow berlebihan, gunakan elevation ringan.

Dengan Material 3, aplikasi Android Anda akan terlihat lebih modern, profesional, dan mengikuti standard UI terbaru dari Google.