Material Design: concepte cheie, Material You și Material 3

Ce este Material Design?

Material Design (numele de cod Project Quantum) — sistemul de design Google, anunțat pentru prima dată la Google I/O 2014 și implementat pentru prima dată în Android 5.0 Lollipop. Scopul Material Design este de a crea un limbaj vizual unificat pentru toate produsele Google și aplicațiile Android, bazat pe proprietățile fizice ale hârtiei și cernelei — „materialul”. Spre deosebire de designul plat (Flat Design), Material Design adaugă profunzime fizică, umbre, straturi și animație realistă.

Din 2014, Material Design a trecut prin trei versiuni majore: Material 1 (2014) — ghidurile originale cu carduri și Floating Action Button; Material 2 (2018) — simplificarea limbajului vizual, spațieri mărite, accent pe tipografie; Material 3 / Material You (2021) — schemă dinamică de culori generată pe baza fundalului de ecran al dispozitivului, personalizare. Conform Google Play Console (2024), 78% din top 1000 de aplicații Google Play folosesc Material Components pentru Android.

Material Design nu este doar un UI-kit, ci un sistem de design complet: ghiduri pentru accesibilitate (a11y), animație (Motion), aranjamente adaptive (Responsive Layout), componente (TopAppBar, BottomNavigation, Navigation Drawer), tipografie (Material Type Scale) și iconografie (Material Symbols). În IT Sectr, folosim Material Design ca sistem de design de bază pentru proiectele Android din 2014, personalizându-l în funcție de brandul clientului prin Material Theme Builder.

Principiile principale ale Material Design: materialitate, profunzime, mișcare

Materialitatea (Material as Metaphor) — principiul cheie al Material Design, care împrumută proprietățile fizice ale hârtiei: materialul are suprafață, grosime (1dp), aruncă umbră (Elevation) și ocupă spațiu (Bounds). Elementele interfeței — carduri, butoane, panouri — se comportă ca obiecte fizice: se ridică la apăsare (efect ripple), se suprapun (axa Z) și se animează la apariție (motion).

Profunzimea (Depth) este creată prin Elevation — proprietatea materialului care determină poziția sa pe axa Z. Cu cât Elevation este mai mare (8dp, 16dp), cu atât umbra aruncată de element este mai mare. Un card are Elevation 1–2dp, FAB — 6dp, Modal BottomSheet — 16dp. Profunzimea este folosită pentru a transmite ierarhia: ferestrele modale și dialogurile sunt întotdeauna deasupra conținutului, Navigation Drawer — deasupra Action Bar. Profunzimea înlocuiește perspectiva tridimensională cu un strat Z plat, păstrând performanța randării.

Mișcarea (Motion) — animația în Material Design nu este decorativă, ci funcțională. Animația trebuie: 1) să direcționeze atenția utilizatorului (deschiderea unui card cu detalii), 2) să explice relațiile spațiale (AppBar se transformă în TopAppBar la derulare), 3) să asigure fluiditatea tranzițiilor (shared element transition între ecrane). Conform Google Material Guidelines (2024), animația nu trebuie să depășească 300ms pentru micro-interacțiuni și 500ms pentru tranziții între ecrane — animațiile mai lungi sunt percepute ca întârzieri.

Material You (Material Design 3): culori dinamice și personalizare

Material You (Material Design 3) — cea mai mare actualizare a sistemului de design, prezentată în 2021 împreună cu Android 12. Inovația principală — culorile dinamice (Monet): sistemul extrage automat 5 culori cheie din fundalul de ecran al dispozitivului și generează o paletă completă de culori din 15 tonuri (primary, secondary, tertiary, error cu variantele lor light/dark) cu rapoarte de contrast WCAG AA calculate.

Modelul de culoare Material You este construit pe baza HCT (Hue, Chroma, Tone) — un spațiu de culoare dezvoltat de Google, care combină percepția umană (Hue) cu saturația (Chroma) și luminozitatea (Tone). Spre deosebire de HSL/HSV, HCT garantează că toate tonurile generate au un contrast specificat pe fond alb și negru. Google Material Guidelines (2024) recomandă utilizarea doar a variantelor tonale ale paletei principale pentru text, a tonurilor surface pentru fundaluri și a primary-container pentru suprafețele de accent.

Utilizatorul poate alege una dintre cele 4 scheme de personalizare: TonalSpot (culoarea principală din fundalul de ecran), Vibrant (culoarea cea mai saturată), Expressive (culori vii suplimentare), Neutral (gamă monocromă). Material Theme Builder (material-foundation.github.io) permite exportarea temei Material 3 în XML, Compose Theme, CSS și chiar plugin Figma.

Material Components pentru Android: implementare prin XML și Compose

Material Components pentru Android (MDC-Android) — biblioteca oficială Google care oferă componente View gata făcute conforme cu ghidurile Material Design. Pentru aranjarea XML, biblioteca este disponibilă prin dependența com.google.android.material:material, versiunea actuală în iunie 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>

Exemplul arată un ecran Material cu MaterialToolbar (TopAppBar), MaterialCardView cu spațieri personalizate și contur, TextInputLayout cu listă derulantă și MaterialButton în stil Material3. FAB este ancorat de Toolbar — schema standard pentru interfețe 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("Oraș") },
                colors = OutlinedTextFieldDefaults.colors(
                    focusedBorderColor = colorScheme.primary,
                    unfocusedBorderColor = colorScheme.outline
                )
            )
            Button(
                onClick = { },
                modifier = Modifier.fillMaxWidth()
            ) {
                Text("Trimite")
            }
        }
    }
}

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

Codul demonstrează tema Material You în Compose: dynamicLightColorScheme() generează automat schema de culori pe baza fundalului de ecran al dispozitivului. Scaffold oferă un cadru standard cu TopAppBar și FAB. OutlinedTextField și Button sunt componente Material 3 ale căror culori provin din colorScheme-ul dinamic. La schimbarea fundalului de ecran, toate culorile aplicației se actualizează automat — personalizare fără modificarea codului.

Material Design pe iOS: Material Components pentru iOS

Material Components pentru iOS (MDC-iOS) — o bibliotecă care oferă componente UIKit native ce implementează Material Design pe iOS. Deoarece iOS are propriul său sistem de design (Human Interface Guidelines), componentele Material pe iOS sunt utilizate mai rar, dar sunt necesare în aplicațiile cross-platform unde se dorește un stil vizual unitar între Android și iOS.

MDC-iOS include AppBar, BottomNavigation, Cards, Chips, Dialogs, Snackbar, Tabs și TextFields stilizate conform Material Design. Biblioteca este disponibilă prin CocoaPods (pod 'MaterialComponents') și Swift Package Manager. Apple Human Interface Guidelines (2024) nu recomandă înlocuirea completă a componentelor native UIKit cu echivalente Material, dar permite utilizarea componentelor Material pentru interfețe personalizate cu condiția păstrării navigației native (NavigationStack, UITabBarController).

În IT Sectr, folosim Material Components pe iOS doar pentru aplicațiile portate de pe Android (proiecte cross-platform cu Flutter sau Kotlin Multiplatform). Pentru aplicațiile iOS native, urmăm HIG și folosim UIKit/SwiftUI cu stilizare personalizată sub brandul clientului. Conform sondajului Swift Community (2024), Material Components pentru iOS este folosit de 8% dintre dezvoltatori, în principal în proiecte hibride.

Material Design comparat cu alte sisteme de design

Material Design — nu este singurul sistem de design pe piață. Cei mai mari concurenți: Apple Human Interface Guidelines (iOS/macOS), Fluent Design (Microsoft), Carbon (IBM), Polaris (Shopify), Lightning (Salesforce). Fiecare sistem este optimizat pentru platforma sa: Material Design — pentru Android, HIG — pentru iOS, Fluent — pentru Windows. Alegerea sistemului de design este determinată de platforma țintă și ecosistem.

Principalul avantaj al Material Design este deschiderea și compatibilitatea cross-platform. Ghidurile, componentele și instrumentele (Material Theme Builder) sunt disponibile gratuit, ceea ce face sistemul popular printre startup-uri și dezvoltatorii independenți. Apple HIG este strict legat de ecosistemul Apple, dar asigură cea mai bună conformitate cu așteptările platformei utilizatorilor. Pentru proiecte cross-platform, Material Design este alegerea optimă datorită Flutter și Jetpack Compose Multiplatform.