Material Design: klíčové pojmy, Material You a Material 3

Co je Material Design?

Material Design (kódové označení Project Quantum) — návrhový systém Google, poprvé oznámený na Google I/O 2014 a poprvé implementovaný v Android 5.0 Lollipop. Cílem Material Design je vytvořit jednotný vizuální jazyk pro všechny produkty Google a aplikace pro Android, založený na fyzických vlastnostech papíru a inkoustu — „materiálu”. Na rozdíl od plochého designu (Flat Design) přidává Material Design fyzickou hloubku, stíny, vrstvy a realistickou animaci.

Od roku 2014 prošel Material Design třemi hlavními verzemi: Material 1 (2014) — původní průvodce s kartami a Floating Action Button; Material 2 (2018) — zjednodušení vizuálního jazyka, větší mezery, důraz na typografii; Material 3 / Material You (2021) — dynamické barevné schéma generované na základě tapety zařízení, personalizace. Podle Google Play Console (2024) používá 78% z top 1000 aplikací Google Play Material Components pro Android.

Material Design není jen UI-kit, ale kompletní návrhový systém: průvodce přístupností (a11y), animací (Motion), adaptivním rozvržením (Responsive Layout), komponenty (TopAppBar, BottomNavigation, Navigation Drawer), typografií (Material Type Scale) a ikonografií (Material Symbols). V IT Sectr používáme Material Design jako základní návrhový systém pro projekty na Androidu od roku 2014 a přizpůsobujeme ho značce klienta pomocí Material Theme Builder.

Hlavní principy Material Design: materiálnost, hloubka, pohyb

Materiálnost (Material as Metaphor) — klíčový princip Material Design, který si vypůjčuje fyzické vlastnosti papíru: materiál má povrch, tloušťku (1dp), vrhá stín (Elevation) a zabírá prostor (Bounds). Prvky rozhraní — karty, tlačítka, panely — se chovají jako fyzické objekty: při stisknutí se zvednou (efekt ripple), překrývají se (osa Z) a animují se při objevení (motion).

Hloubka (Depth) je vytvářena pomocí Elevation — vlastnosti materiálu určující jeho polohu na ose Z. Čím vyšší je Elevation (8dp, 16dp), tím větší stín prvek vrhá. Karta má Elevation 1–2dp, FAB — 6dp, Modal BottomSheet — 16dp. Hloubka se používá k předávání hierarchie: modální okna a dialogy jsou vždy nad obsahem, Navigation Drawer — nad Action Bare. Hloubka nahrazuje trojrozměrnou perspektivu plochou Z-vrstvou, čímž zachovává výkon vykreslování.

Pohyb (Motion) — animace v Material Design není dekorativní, ale funkční. Animace by měla: 1) směrovat pozornost uživatele (rozbalení karty s podrobnostmi), 2) vysvětlovat prostorové vztahy (AppBar se při rolování mění na TopAppBar), 3) zajišťovat plynulost přechodů (shared element transition mezi obrazovkami). Podle Google Material Guidelines (2024) by animace neměla přesáhnout 300ms pro mikrointerakce a 500ms pro přechody mezi obrazovkami — delší animace jsou vnímány jako zpoždění.

Material You (Material Design 3): dynamické barvy a personalizace

Material You (Material Design 3) — největší aktualizace návrhového systému, představená v roce 2021 spolu s Androidem 12. Hlavní inovace — dynamické barvy (Monet): systém automaticky extrahuje 5 klíčových barev z tapety zařízení a generuje kompletní barevnou paletu z 15 tónů (primary, secondary, tertiary, error s jejich light/dark variantami) s vypočtenými poměry kontrastu WCAG AA.

Barevný model Material You je postaven na HCT (Hue, Chroma, Tone) — barevném prostoru vyvinutém Googlem, který kombinuje lidské vnímání (Hue) se sytostí (Chroma) a jasem (Tone). Na rozdíl od HSL/HSV HCT zaručuje, že všechny generované tóny mají stanovený kontrast na bílém a černém pozadí. Google Material Guidelines (2024) doporučuje používat pouze tonální varianty hlavní palety pro text, tóny surface pro pozadí a primary-container pro akcentní plochy.

Uživatel si může vybrat jeden ze 4 personalizačních schémat: TonalSpot (hlavní barva z tapety), Vibrant (nejsytější barva), Expressive (další živé barvy), Neutral (monochromatická gama). Material Theme Builder (material-foundation.github.io) umožňuje exportovat téma Material 3 do XML, Compose Theme, CSS a dokonce i do pluginu Figma.

Material Components pro Android: implementace pomocí XML a Compose

Material Components pro Android (MDC-Android) — oficiální knihovna Google poskytující hotové View komponenty odpovídající průvodcům Material Design. Pro XML rozvržení je knihovna k dispozici prostřednictvím závislosti com.google.android.material:material, aktuální verze k červnu 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>

Příklad ukazuje Material obrazovku s MaterialToolbar (TopAppBar), MaterialCardView s vlastními mezerami a okrajem, TextInputLayout s rozevíracím seznamem a MaterialButton ve stylu Material3. FAB je připojen k Toolbaru jako kotva — standardní schéma pro master-detail rozhraní.

@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("Město") },
                colors = OutlinedTextFieldDefaults.colors(
                    focusedBorderColor = colorScheme.primary,
                    unfocusedBorderColor = colorScheme.outline
                )
            )
            Button(
                onClick = { },
                modifier = Modifier.fillMaxWidth()
            ) {
                Text("Odeslat")
            }
        }
    }
}

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

Kód demonstruje téma Material You v Compose: dynamicLightColorScheme() automaticky generuje barevné schéma na základě tapety zařízení. Scaffold poskytuje standardní kostru s TopAppBar a FAB. OutlinedTextField a Button jsou komponenty Material 3, jejichž barvy pocházejí z dynamického colorScheme. Při změně tapety se všechny barvy aplikace automaticky aktualizují — personalizace bez úpravy kódu.

Material Design na iOS: Material Components pro iOS

Material Components pro iOS (MDC-iOS) — knihovna poskytující nativní UIKit komponenty implementující Material Design na iOS. Vzhledem k tomu, že iOS má svůj vlastní návrhový systém (Human Interface Guidelines), Material komponenty se na iOS používají méně často, ale jsou nezbytné v cross-platform aplikacích, kde je vyžadován jednotný vizuální styl mezi Androidem a iOS.

MDC-iOS zahrnuje AppBar, BottomNavigation, Cards, Chips, Dialogs, Snackbar, Tabs a TextFields stylizované podle Material Design. Knihovna je k dispozici přes CocoaPods (pod 'MaterialComponents') a Swift Package Manager. Apple Human Interface Guidelines (2024) nedoporučuje úplné nahrazení nativních UIKit komponent Material ekvivalenty, ale povoluje použití Material komponent pro vlastní rozhraní za podmínky zachování nativní navigace (NavigationStack, UITabBarController).

V IT Sectr používáme Material Components na iOS pouze pro aplikace portované z Androidu (cross-platform projekty s Flutter nebo Kotlin Multiplatform). Pro nativní iOS aplikace se řídíme HIG a používáme UIKit/SwiftUI s vlastním stylováním pod značkou klienta. Podle průzkumu Swift Community (2024) používá Material Components pro iOS 8% vývojářů, převážně v hybridních projektech.

Material Design ve srovnání s jinými návrhovými systémy

Material Design — není jediným návrhovým systémem na trhu. Největší konkurenti: Apple Human Interface Guidelines (iOS/macOS), Fluent Design (Microsoft), Carbon (IBM), Polaris (Shopify), Lightning (Salesforce). Každý systém je optimalizován pro svou platformu: Material Design — pro Android, HIG — pro iOS, Fluent — pro Windows. Výběr návrhového systému je určen cílovou platformou a ekosystémem.

Hlavní výhoda Material Design je otevřenost a cross-platform podpora. Průvodci, komponenty a nástroje (Material Theme Builder) jsou k dispozici zdarma, což činí systém oblíbeným mezi startupy a nezávislými vývojáři. Apple HIG je pevně svázán s ekosystémem Apple, ale poskytuje nejlepší shodu s platformovými očekáváními uživatelů. Pro cross-platform projekty je Material Design optimální volbou díky Flutter a Jetpack Compose Multiplatform.