Material Design: konsep utama, Material You dan Material 3

Apa itu Material Design?

Material Design (nama kode Project Quantum) — sistem desain Google, pertama kali diumumkan di Google I/O 2014 dan pertama kali diimplementasikan di Android 5.0 Lollipop. Tujuan Material Design adalah menciptakan bahasa visual yang seragam untuk semua produk Google dan aplikasi Android, berdasarkan sifat fisik kertas dan tinta — “material”. Berbeda dengan desain datar (Flat Design), Material Design menambahkan kedalaman fisik, bayangan, lapisan, dan animasi realistis.

Sejak 2014, Material Design telah melalui tiga versi utama: Material 1 (2014) — panduan asli dengan kartu dan Floating Action Button; Material 2 (2018) — penyederhanaan bahasa visual, jarak yang lebih besar, penekanan pada tipografi; Material 3 / Material You (2021) — skema warna dinamis yang dihasilkan dari wallpaper perangkat, personalisasi. Menurut Google Play Console (2024), 78% dari 1000 aplikasi teratas Google Play menggunakan Material Components untuk Android.

Material Design bukan sekadar UI-kit, melainkan sistem desain yang lengkap: panduan aksesibilitas (a11y), animasi (Motion), tata letak adaptif (Responsive Layout), komponen (TopAppBar, BottomNavigation, Navigation Drawer), tipografi (Material Type Scale), dan ikonografi (Material Symbols). Di IT Sectr, kami menggunakan Material Design sebagai sistem desain dasar untuk proyek Android sejak 2014, menyesuaikannya dengan merek klien melalui Material Theme Builder.

Prinsip utama Material Design: materialitas, kedalaman, gerakan

Materialitas (Material as Metaphor) — prinsip kunci Material Design yang meminjam sifat fisik kertas: material memiliki permukaan, ketebalan (1dp), menghasilkan bayangan (Elevation), dan menempati ruang (Bounds). Elemen antarmuka — kartu, tombol, panel — berperilaku seperti objek fisik: mereka terangkat saat ditekan (efek ripple), saling tumpang tindih (sumbu Z), dan dianimasikan saat muncul (motion).

Kedalaman (Depth) diciptakan melalui Elevation — properti material yang menentukan posisinya pada sumbu Z. Semakin tinggi Elevation (8dp, 16dp), semakin besar bayangan yang dihasilkan elemen. Kartu memiliki Elevation 1–2dp, FAB — 6dp, Modal BottomSheet — 16dp. Kedalaman digunakan untuk menyampaikan hierarki: jendela modal dan dialog selalu berada di atas konten, Navigation Drawer — di atas Action Bar. Kedalaman menggantikan perspektif tiga dimensi dengan lapisan Z datar, menjaga kinerja rendering.

Gerakan (Motion) — animasi dalam Material Design tidak bersifat dekoratif, melainkan fungsional. Animasi harus: 1) mengarahkan perhatian pengguna (membuka kartu dengan detail), 2) menjelaskan hubungan spasial (AppBar berubah menjadi TopAppBar saat di-scroll), 3) memastikan kelancaran transisi (shared element transition antar layar). Menurut Google Material Guidelines (2024), animasi tidak boleh melebihi 300ms untuk interaksi mikro dan 500ms untuk transisi antar layar — animasi yang lebih lama dianggap sebagai penundaan.

Material You (Material Design 3): warna dinamis dan personalisasi

Material You (Material Design 3) — pembaruan terbesar sistem desain, diperkenalkan pada tahun 2021 bersama Android 12. Inovasi utama — warna dinamis (Monet): sistem secara otomatis mengekstrak 5 warna kunci dari wallpaper perangkat dan menghasilkan palet warna lengkap dari 15 nada (primary, secondary, tertiary, error dengan varian light/dark mereka) dengan rasio kontras WCAG AA yang dihitung.

Model warna Material You dibangun di atas HCT (Hue, Chroma, Tone) — ruang warna yang dikembangkan oleh Google, yang menggabungkan persepsi manusia (Hue) dengan saturasi (Chroma) dan kecerahan (Tone). Berbeda dengan HSL/HSV, HCT menjamin bahwa semua nada yang dihasilkan memiliki kontras yang ditentukan pada latar belakang putih dan hitam. Google Material Guidelines (2024) merekomendasikan penggunaan hanya varian tonal dari palet utama untuk teks, nada surface untuk latar belakang, dan primary-container untuk permukaan aksen.

Pengguna dapat memilih salah satu dari 4 skema personalisasi: TonalSpot (warna utama dari wallpaper), Vibrant (warna paling jenuh), Expressive (warna cerah tambahan), Neutral (gamma monokrom). Material Theme Builder (material-foundation.github.io) memungkinkan ekspor tema Material 3 ke XML, Compose Theme, CSS, dan bahkan plugin Figma.

Material Components untuk Android: implementasi melalui XML dan Compose

Material Components untuk Android (MDC-Android) — pustaka resmi Google yang menyediakan komponen View siap pakai yang sesuai dengan panduan Material Design. Untuk tata letak XML, pustaka tersedia melalui dependensi com.google.android.material:material, versi saat ini per Juni 2026 — 1.12.0.

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/topAppBar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:title="@string/app_name"
        app:menu="@menu/main_menu" />

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

        <LinearLayout android:orientation="vertical" ...>
            <com.google.android.material.textfield.TextInputLayout
                style="@style/Widget.Material3.TextInputLayout.OutlinedBox"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:endIconMode="clear_text">
                <com.google.android.material.textfield.MaterialAutoCompleteTextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="@string/city_hint" />
            </com.google.android.material.textfield.TextInputLayout>

            <com.google.android.material.button.MaterialButton
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                style="@style/Widget.Material3.Button.MaterialYou"
                android:text="@string/submit" />
        </LinearLayout>
    </com.google.android.material.card.MaterialCardView>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_add"
        app:layout_anchor="@id/topAppBar"
        app:layout_anchorGravity="bottom|end" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Contoh menunjukkan layar Material dengan MaterialToolbar (TopAppBar), MaterialCardView dengan jarak dan garis tepi khusus, TextInputLayout dengan daftar drop-down, dan MaterialButton dalam gaya Material3. FAB terikat ke Toolbar sebagai jangkar — skema standar untuk antarmuka master-detail.

@Composable
fun MaterialYouScreen() {
    val colorScheme = MaterialTheme.colorScheme

    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("Material You") },
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = colorScheme.primaryContainer,
                    titleContentColor = colorScheme.onPrimaryContainer
                )
            )
        },
        floatingActionButton = {
            FloatingActionButton(
                onClick = { },
                containerColor = colorScheme.tertiaryContainer
            ) {
                Icon(
                    imageVector = Icons.Default.Add,
                    contentDescription = "Add"
                )
            }
        }
    ) { paddingValues ->
        Column(
            modifier = Modifier.padding(paddingValues)
        ) {
            OutlinedTextField(
                value = "",
                onValueChange = { },
                label = { Text("Kota") },
                colors = OutlinedTextFieldDefaults.colors(
                    focusedBorderColor = colorScheme.primary,
                    unfocusedBorderColor = colorScheme.outline
                )
            )
            Button(
                onClick = { },
                modifier = Modifier.fillMaxWidth()
            ) {
                Text("Kirim")
            }
        }
    }
}

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MaterialTheme(
                colorScheme = dynamicLightColorScheme(this),
                typography = MaterialTheme.typography
            ) {
                MaterialYouScreen()
            }
        }
    }
}

Kode mendemonstrasikan tema Material You di Compose: dynamicLightColorScheme() secara otomatis menghasilkan skema warna berdasarkan wallpaper perangkat. Scaffold menyediakan kerangka standar dengan TopAppBar dan FAB. OutlinedTextField dan Button adalah komponen Material 3 yang warnanya berasal dari colorScheme dinamis. Saat wallpaper diubah, semua warna aplikasi diperbarui secara otomatis — personalisasi tanpa perubahan kode.

Material Design di iOS: Material Components untuk iOS

Material Components untuk iOS (MDC-iOS) — pustaka yang menyediakan komponen UIKit asli yang mengimplementasikan Material Design di iOS. Karena iOS memiliki sistem desainnya sendiri (Human Interface Guidelines), komponen Material di iOS lebih jarang digunakan, tetapi diperlukan dalam aplikasi lintas platform yang membutuhkan gaya visual seragam antara Android dan iOS.

MDC-iOS mencakup AppBar, BottomNavigation, Cards, Chips, Dialogs, Snackbar, Tabs, dan TextFields yang ditata dalam gaya Material Design. Pustaka tersedia melalui CocoaPods (pod 'MaterialComponents') dan Swift Package Manager. Apple Human Interface Guidelines (2024) tidak merekomendasikan penggantian lengkap komponen UIKit asli dengan padanan Material, tetapi mengizinkan penggunaan komponen Material untuk antarmuka kustom dengan syarat mempertahankan navigasi asli (NavigationStack, UITabBarController).

Di IT Sectr, kami menggunakan Material Components di iOS hanya untuk aplikasi yang dipindahkan dari Android (proyek lintas platform dengan Flutter atau Kotlin Multiplatform). Untuk aplikasi iOS asli, kami mengikuti HIG dan menggunakan UIKit/SwiftUI dengan gaya kustom di bawah merek klien. Menurut survei Swift Community (2024), 8% pengembang menggunakan Material Components untuk iOS, terutama dalam proyek hibrida.

Material Design dibandingkan dengan sistem desain lainnya

Material Design — bukan satu-satunya sistem desain di pasar. Pesaing terbesar: Apple Human Interface Guidelines (iOS/macOS), Fluent Design (Microsoft), Carbon (IBM), Polaris (Shopify), Lightning (Salesforce). Setiap sistem dioptimalkan untuk platformnya: Material Design — untuk Android, HIG — untuk iOS, Fluent — untuk Windows. Pemilihan sistem desain ditentukan oleh platform target dan ekosistem.

Keunggulan utama Material Design adalah keterbukaan dan dukungan lintas platform. Panduan, komponen, dan alat (Material Theme Builder) tersedia secara gratis, membuat sistem ini populer di kalangan startup dan pengembang independen. Apple HIG terikat erat dengan ekosistem Apple, tetapi memberikan kesesuaian terbaik dengan ekspektasi platform pengguna. Untuk proyek lintas platform, Material Design adalah pilihan optimal berkat Flutter dan Jetpack Compose Multiplatform.