Material Design: kulcsfogalmak, Material You és Material 3

Mi a Material Design?

Material Design (kódnév: Project Quantum) — a Google tervezési rendszere, amelyet először a Google I/O 2014-en jelentettek be, és elsőként az Android 5.0 Lollipop-ban valósították meg. A Material Design célja, hogy egységes vizuális nyelvet hozzon létre az összes Google-termék és Android-alkalmazás számára, a papír és tinta fizikai tulajdonságain alapulva — a „material”-on. A lapos tervezéssel (Flat Design) ellentétben a Material Design fizikai mélységet, árnyékokat, rétegeket és realisztikus animációt ad hozzá.

2014 óta a Material Design három nagy verziót élt meg: Material 1 (2014) — az eredeti útmutatók kártyákkal és Floating Action Button-nel; Material 2 (2018) — a vizuális nyelv egyszerűsítése, nagyobb térközök, hangsúly a tipográfián; Material 3 / Material You (2021) — az eszköz háttérképe alapján generált dinamikus színséma, személyre szabás. A Google Play Console (2024) szerint a Google Play legjobb 1000 alkalmazásának 78%-a használja a Material Components for Android-ot.

A Material Design nem csupán egy UI-kit, hanem egy teljes tervezési rendszer: útmutatók az akadálymentességhez (a11y), animációhoz (Motion), adaptív elrendezésekhez (Responsive Layout), komponensekhez (TopAppBar, BottomNavigation, Navigation Drawer), tipográfiához (Material Type Scale) és ikonográfiához (Material Symbols). Az IT Sectr-nél 2014 óta használjuk a Material Design-t alapvető tervezési rendszerként Android-projektekhez, és a Material Theme Builder segítségével igazítjuk az ügyfél márkájához.

A Material Design fő elvei: anyagszerűség, mélység, mozgás

Anyagszerűség (Material as Metaphor) — a Material Design kulcsfontosságú elve, amely a papír fizikai tulajdonságait kölcsönzi: az anyagnak felülete, vastagsága (1dp) van, árnyékot vet (Elevation), és helyet foglal (Bounds). Az interfész elemek — kártyák, gombok, panelek — fizikai tárgyakként viselkednek: megemelkednek nyomáskor (ripple effektus), átfedik egymást (Z-tengely), és animálódnak megjelenéskor (motion).

Mélység (Depth) az Elevation segítségével jön létre — az anyag Z-tengely menti pozícióját meghatározó tulajdonság. Minél magasabb az Elevation (8dp, 16dp), annál nagyobb árnyékot vet az elem. Egy kártya Elevation-je 1–2dp, a FAB-é — 6dp, a Modal BottomSheet-é — 16dp. A mélység a hierarchia közvetítésére szolgál: a modális ablakok és párbeszédek mindig a tartalom felett vannak, a Navigation Drawer — az Action Bar felett. A mélység a háromdimenziós perspektívát egy lapos Z-réteggel helyettesíti, megőrizve a renderelési teljesítményt.

Mozgás (Motion) — az animáció a Material Design-ben nem dekoratív, hanem funkcionális. Az animációnak: 1) irányítania kell a felhasználó figyelmét (kártya kinyitása részletekkel), 2) meg kell magyaráznia a térbeli kapcsolatokat (AppBar TopAppBar-rá alakul görgetéskor), 3) biztosítania kell az átmenetek simaságát (shared element transition képernyők között). A Google Material Guidelines (2024) szerint az animáció nem haladhatja meg a 300ms-ot a mikro-interakciókhoz és az 500ms-ot a képernyők közötti átmenetekhez — a hosszabb animációk késleltetésként érzékelhetők.

Material You (Material Design 3): dinamikus színek és személyre szabás

Material You (Material Design 3) — a tervezési rendszer legnagyobb frissítése, amelyet 2021-ben mutattak be az Android 12-vel együtt. A fő újítás — dinamikus színek (Monet): a rendszer automatikusan kivon 5 kulcsszínt az eszköz háttérképéből, és egy teljes színpalettát generál 15 tónusból (primary, secondary, tertiary, error a hozzájuk tartozó light/dark variánsokkal) kiszámított WCAG AA kontrasztarányokkal.

A Material You színmodell a HCT (Hue, Chroma, Tone) alapján épül fel — a Google által fejlesztett színtér, amely az emberi érzékelést (Hue) kombinálja a telítettséggel (Chroma) és fényességgel (Tone). A HSL/HSV-vel ellentétben a HCT garantálja, hogy az összes generált tónus rendelkezik a meghatározott kontraszttal fehér és fekete háttéren. A Google Material Guidelines (2024) csak a fő paletta tonális variánsainak használatát javasolja szöveghez, a surface tónusokat háttérhez, és a primary-container-t akcentus felületekhez.

A felhasználó 4 személyre szabási séma közül választhat: TonalSpot (fő szín a háttérképből), Vibrant (legtöbb telített szín), Expressive (további élénk színek), Neutral (monokróm gamma). A Material Theme Builder (material-foundation.github.io) lehetővé teszi a Material 3 téma exportálását XML-be, Compose Theme-be, CSS-be és akár Figma bővítménybe is.

Material Components Androidhoz: megvalósítás XML és Compose segítségével

A Material Components for Android (MDC-Android) — a Google hivatalos könyvtára, amely kész View-komponenseket biztosít a Material Design útmutatóknak megfelelően. Az XML elrendezéshez a könyvtár a com.google.android.material:material függőségen keresztül érhető el, a 2026 júniusi aktuális verzió — 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>

A példa egy Material képernyőt mutat MaterialToolbar (TopAppBar), MaterialCardView egyedi térközökkel és szegéllyel, TextInputLayout legördülő listával és MaterialButton Material3 stílusban. A FAB a Toolbar-hoz van rögzítve horgonyként — ez a szabványos séma a master-detail interfészekhez.

@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("Város") },
                colors = OutlinedTextFieldDefaults.colors(
                    focusedBorderColor = colorScheme.primary,
                    unfocusedBorderColor = colorScheme.outline
                )
            )
            Button(
                onClick = { },
                modifier = Modifier.fillMaxWidth()
            ) {
                Text("Beküldés")
            }
        }
    }
}

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

A kód a Material You témát mutatja be Compose-ban: a dynamicLightColorScheme() automatikusan színsémát generál az eszköz háttérképe alapján. A Scaffold szabványos keretet biztosít TopAppBar és FAB elemekkel. Az OutlinedTextField és a Button Material 3 komponensek, amelyek színei a dinamikus colorScheme-ből származnak. A háttérkép megváltoztatásakor az alkalmazás összes színe automatikusan frissül — személyre szabás kódmódosítás nélkül.

Material Design iOS-en: Material Components iOS-hez

A Material Components for iOS (MDC-iOS) — egy könyvtár, amely natív UIKit-komponenseket biztosít a Material Design iOS-en történő megvalósításához. Mivel az iOS saját tervezési rendszerrel (Human Interface Guidelines) rendelkezik, a Material komponenseket iOS-en ritkábban használják, de szükségesek a többplatformos alkalmazásokban, ahol egységes vizuális stílusra van szükség Android és iOS között.

Az MDC-iOS magában foglalja az AppBar, BottomNavigation, Cards, Chips, Dialogs, Snackbar, Tabs és TextFields elemeket Material Design stílusban. A könyvtár a CocoaPods (pod 'MaterialComponents') és a Swift Package Manager segítségével érhető el. Az Apple Human Interface Guidelines (2024) nem javasolja a natív UIKit-komponensek teljes lecserélését Material megfelelőkre, de engedélyezi a Material komponensek használatát egyedi interfészekhez, feltéve, hogy a natív navigáció (NavigationStack, UITabBarController) megmarad.

Az IT Sectr-nél iOS-en csak az Androidról áthozott alkalmazásokhoz használjuk a Material Components-ot (többplatformos projektek Flutter vagy Kotlin Multiplatform segítségével). Natív iOS-alkalmazásokhoz a HIG-t követjük, és UIKit/SwiftUI-t használunk egyedi stílusosítással az ügyfél márkája alatt. A Swift Community (2024) felmérése szerint a fejlesztők 8%-a használja a Material Components for iOS-t, főként hibrid projektekben.

Material Design más tervezési rendszerekkel összehasonlítva

Material Design — nem az egyetlen tervezési rendszer a piacon. A legnagyobb versenytársak: Apple Human Interface Guidelines (iOS/macOS), Fluent Design (Microsoft), Carbon (IBM), Polaris (Shopify), Lightning (Salesforce). Minden rendszer a saját platformjára van optimalizálva: a Material Design — Androidra, a HIG — iOS-re, a Fluent — Windowsra. A tervezési rendszer kiválasztását a célplatform és az ökoszisztéma határozza meg.

A Material Design fő előnye — a nyitottság és a többplatformos támogatás. Az útmutatók, komponensek és eszközök (Material Theme Builder) ingyenesen elérhetők, ami népszerűvé teszi a rendszert a startupok és független fejlesztők körében. Az Apple HIG szorosan kötődik az Apple ökoszisztémához, de biztosítja a legjobb megfelelést a felhasználók platform elvárásaihoz. Többplatformos projektekhez a Material Design az optimális választás a Flutter és a Jetpack Compose Multiplatform jóvoltából.