Material Design: кључни појмови, Material You и Material 3

Шта је Material Design?

Material Design (кодно име Project Quantum) — Google дизајн систем, први пут најављен на Google I/O 2014 и први пут имплементиран у Android 5.0 Lollipop-у. Циљ Material Design-а је стварање јединственог визуелног језика за све Google производе и Android апликације, заснованог на физичким својствима папира и мастила — „материјалу”. За разлику од равног дизајна (Flat Design), Material Design додаје физичку дубину, сенке, слојеве и реалистичну анимацију.

Од 2014. године, Material Design је прошао кроз три велике верзије: Material 1 (2014) — оригиналне смернице са картицама и Floating Action Button; Material 2 (2018) — поједностављење визуелног језика, повећани размаци, акценат на типографију; Material 3 / Material You (2021) — динамичка шема боја генерисана на основу позадине уређаја, персонализација. Према Google Play Console (2024), 78% од топ 1000 апликација Google Play-а користи Material Components за Android.

Material Design није само UI-kit, већ потпун дизајн систем: смернице за приступачност (a11y), анимацију (Motion), прилагодљиве распореде (Responsive Layout), компоненте (TopAppBar, BottomNavigation, Navigation Drawer), типографију (Material Type Scale) и иконографију (Material Symbols). У IT Sectr-у користимо Material Design као основни дизајн систем за Android пројекте од 2014. године, прилагођавајући га бренду клијента кроз Material Theme Builder.

Основни принципи Material Design-а: материјалност, дубина, покрет

Материјалност (Material as Metaphor) — кључни принцип Material Design-а, који позајмљује физичка својства папира: материјал има површину, дебљину (1dp), баца сенку (Elevation) и заузима простор (Bounds). Елементи интерфејса — картице, дугмад, панели — понашају се као физички објекти: подижу се при притиску (ripple ефекат), преклапају се (Z-оса) и анимирају се при појављивању (motion).

Дубина (Depth) се ствара кроз Elevation — својство материјала које одређује његов положај на Z-оси. Што је Elevation веће (8dp, 16dp), то је већа сенка коју елемент баца. Картица има Elevation 1–2dp, FAB — 6dp, Modal BottomSheet — 16dp. Дубина се користи за преношење хијерархије: модални прозори и дијалози су увек изнад садржаја, Navigation Drawer — изнад Action Bar-а. Дубина замењује тродимензионалну перспективу равним Z-слојем, чувајући перформансе рендеровања.

Покрет (Motion) — анимација у Material Design-у није декоративна, већ функционална. Анимација треба: 1) да усмери пажњу корисника (отварање картице са детаљима), 2) да објасни просторне односе (AppBar се претвара у TopAppBar при скроловању), 3) да обезбеди глаткоћу прелаза (shared element transition између екрана). Према Google Material Guidelines (2024), анимација не треба да прелази 300ms за микроинтеракције и 500ms за прелазе између екрана — дуже анимације се доживљавају као кашњење.

Material You (Material Design 3): динамичке боје и персонализација

Material You (Material Design 3) — највеће ажурирање дизајн система, представљено 2021. године заједно са Android 12. Главна иновација — динамичке боје (Monet): систем аутоматски издваја 5 кључних боја из позадине уређаја и генерише комплетну палету боја од 15 тонова (primary, secondary, tertiary, error са њиховим light/dark варијантама) са израчунатим односима контраста WCAG AA.

Модел боја Material You је изграђен на бази HCT (Hue, Chroma, Tone) — простор боја који је развио Google, а који комбинује људску перцепцију (Hue) са засићењем (Chroma) и осветљеношћу (Tone). За разлику од HSL/HSV, HCT гарантује да сви генерисани тонови имају одређени контраст на белој и црној позадини. Google Material Guidelines (2024) препоручује коришћење само тоналних варијанти главне палете за текст, surface тонова за позадину и primary-container за акцентне површине.

Корисник може изабрати једну од 4 шеме персонализације: TonalSpot (главна боја из позадине), Vibrant (најзасићенија боја), Expressive (додатне живе боје), Neutral (монохроматска гама). Material Theme Builder (material-foundation.github.io) омогућава извоз Material 3 теме у XML, Compose Theme, CSS, па чак и Figma додатак.

Material Components за Android: имплементација кроз XML и Compose

Material Components за Android (MDC-Android) — званична Google библиотека која пружа готове View компоненте усклађене са смерницама Material Design-а. За XML распоред, библиотека је доступна кроз зависност com.google.android.material:material, тренутна верзија за јун 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>

Пример приказује Material екран са MaterialToolbar (TopAppBar), MaterialCardView са прилагођеним размацима и ивицом, TextInputLayout са падајућом листом и MaterialButton у Material3 стилу. FAB је причвршћен за Toolbar као сидро — стандардна шема за 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("Град") },
                colors = OutlinedTextFieldDefaults.colors(
                    focusedBorderColor = colorScheme.primary,
                    unfocusedBorderColor = colorScheme.outline
                )
            )
            Button(
                onClick = { },
                modifier = Modifier.fillMaxWidth()
            ) {
                Text("Пошаљи")
            }
        }
    }
}

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

Код демонстрира Material You тему у Compose-у: dynamicLightColorScheme() аутоматски генерише шему боја на основу позадине уређаја. Scaffold пружа стандардни оквир са TopAppBar и FAB. OutlinedTextField и Button су Material 3 компоненте чије боје долазе из динамичког colorScheme-а. При промени позадине, све боје апликације се аутоматски ажурирају — персонализација без измене кода.

Material Design на iOS-у: Material Components за iOS

Material Components за iOS (MDC-iOS) — библиотека која пружа изворне UIKit компоненте које имплементирају Material Design на iOS-у. Пошто iOS има сопствени дизајн систем (Human Interface Guidelines), Material компоненте на iOS-у се ређе користе, али су потребне у вишеплатформским апликацијама где се захтева јединствени визуелни стил између Android-а и iOS-а.

MDC-iOS укључује AppBar, BottomNavigation, Cards, Chips, Dialogs, Snackbar, Tabs и TextFields стилизоване по Material Design-у. Библиотека је доступна кроз CocoaPods (pod 'MaterialComponents') и Swift Package Manager. Apple Human Interface Guidelines (2024) не препоручује потпуну замену изворних UIKit компоненти Material аналогима, али дозвољава коришћење Material компоненти за прилагођене интерфејсе под условом очувања изворне навигације (NavigationStack, UITabBarController).

У IT Sectr-у користимо Material Components на iOS-у само за апликације које се преносе са Android-а (вишеплатформски пројекти са Flutter-ом или Kotlin Multiplatform-ом). За изворне iOS апликације следимо HIG и користимо UIKit/SwiftUI са прилагођеном стилизацијом под бренд клијента. Према анкети Swift Community (2024), Material Components за iOS користи 8% програмера, углавном у хибридним пројектима.

Material Design наспрам других дизајн система

Material Design — није једини дизајн систем на тржишту. Највећи конкуренти: Apple Human Interface Guidelines (iOS/macOS), Fluent Design (Microsoft), Carbon (IBM), Polaris (Shopify), Lightning (Salesforce). Сваки систем је оптимизован за своју платформу: Material Design — за Android, HIG — за iOS, Fluent — за Windows. Избор дизајн система одређен је циљном платформом и екосистемом.

Главна предност Material Design-а — отвореност и вишеплатформска подршка. Смернице, компоненте и алати (Material Theme Builder) доступни су бесплатно, што систем чини популарним међу стартапима и независним програмерима. Apple HIG је чврсто везан за Apple екосистем, али обезбеђује најбољу усклађеност са платформским очекивањима корисника. За вишеплатформске пројекте, Material Design је оптималан избор захваљујући Flutter-у и Jetpack Compose Multiplatform-у.