Material Design: nyckelbegrepp, Material You och Material 3

Vad är Material Design?

Material Design (kodnamn Project Quantum) — Googles designsystem, först tillkännagivet på Google I/O 2014 och först implementerat i Android 5.0 Lollipop. Målet med Material Design är att skapa ett enhetligt visuellt språk för alla Google-produkter och Android-appar, baserat på papperets och bläckets fysiska egenskaper — “materialet”. Till skillnad från platt design (Flat Design) lägger Material Design till fysiskt djup, skuggor, lager och realistisk animering.

Sedan 2014 har Material Design genomgått tre stora versioner: Material 1 (2014) — originalriktlinjerna med kort och Floating Action Button; Material 2 (2018) — förenkling av det visuella språket, större mellanrum, betoning på typografi; Material 3 / Material You (2021) — dynamiskt färgschema genererat från enhetens bakgrundsbild, personalisering. Enligt Google Play Console (2024) använder 78% av de 1000 främsta Google Play-apparna Material Components för Android.

Material Design är inte bara ett UI-kit, utan ett komplett designsystem: riktlinjer för tillgänglighet (a11y), animering (Motion), adaptiva layouter (Responsive Layout), komponenter (TopAppBar, BottomNavigation, Navigation Drawer), typografi (Material Type Scale) och ikonografi (Material Symbols). På IT Sectr har vi använt Material Design som grundläggande designsystem för Android-projekt sedan 2014 och anpassar det till kundens varumärke via Material Theme Builder.

Huvudprinciper för Material Design: materialitet, djup, rörelse

Materialitet (Material as Metaphor) — nyckelprincipen i Material Design, som lånar papperets fysiska egenskaper: materialet har en yta, tjocklek (1dp), kastar skugga (Elevation) och upptar utrymme (Bounds). Gränssnittselement — kort, knappar, paneler — beter sig som fysiska objekt: de höjs vid tryck (ripple-effekt), överlappar varandra (Z-axeln) och animeras vid uppkomst (motion).

Djup (Depth) skapas genom Elevation — materialets egenskap som bestämmer dess position på Z-axeln. Ju högre Elevation (8dp, 16dp), desto större skugga kastar elementet. Ett kort har Elevation 1–2dp, FAB — 6dp, Modal BottomSheet — 16dp. Djup används för att förmedla hierarki: modala fönster och dialoger är alltid ovanför innehållet, Navigation Drawer — ovanför Action Bar. Djup ersätter det tredimensionella perspektivet med ett platt Z-lager, vilket bevarar renderingsprestanda.

Rörelse (Motion) — animering i Material Design är inte dekorativ utan funktionell. Animering bör: 1) styra användarens uppmärksamhet (öppning av ett kort med detaljer), 2) förklara rumsliga relationer (AppBar omvandlas till TopAppBar vid scrollning), 3) säkerställa smidiga övergångar (shared element transition mellan skärmar). Enligt Google Material Guidelines (2024) bör animering inte överstiga 300ms för mikrointeraktioner och 500ms för övergångar mellan skärmar — längre animeringar uppfattas som fördröjningar.

Material You (Material Design 3): dynamiska färger och personalisering

Material You (Material Design 3) — den största uppdateringen av designsystemet, introducerad 2021 tillsammans med Android 12. Huvudinnovationen — dynamiska färger (Monet): systemet extraherar automatiskt 5 nyckelfärger från enhetens bakgrundsbild och genererar en komplett färgpalett med 15 toner (primary, secondary, tertiary, error med deras light/dark-varianter) med beräknade WCAG AA-kontrastförhållanden.

Material Yous färgmodell är byggd på HCT (Hue, Chroma, Tone) — ett färgrum utvecklat av Google som kombinerar mänsklig perception (Hue) med mättnad (Chroma) och ljusstyrka (Tone). Till skillnad från HSL/HSV garanterar HCT att alla genererade toner har specificerad kontrast på vit och svart bakgrund. Google Material Guidelines (2024) rekommenderar att endast använda tonala varianter av huvudpaletten för text, surface-toner för bakgrunder och primary-container för accentytor.

Användaren kan välja mellan 4 personaliseringsscheman: TonalSpot (huvudfärg från bakgrundsbilden), Vibrant (mest mättad färg), Expressive (ytterligare levande färger), Neutral (monokrom gamma). Material Theme Builder (material-foundation.github.io) gör det möjligt att exportera ett Material 3-tema till XML, Compose Theme, CSS och till och med Figma-plugin.

Material Components för Android: implementering via XML och Compose

Material Components för Android (MDC-Android) — Googles officiella bibliotek som tillhandahåller färdiga View-komponenter som följer Material Design-riktlinjerna. För XML-layouter är biblioteket tillgängligt via beroendet com.google.android.material:material, aktuell version 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>

Exemplet visar en Material-skärm med MaterialToolbar (TopAppBar), MaterialCardView med anpassade mellanrum och kantlinje, TextInputLayout med rullgardinslista och MaterialButton i Material3-stil. FAB är förankrad i Toolbar som ett ankare — standardschemat för master-detail-gränssnitt.

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

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

Koden demonstrerar Material You-temat i Compose: dynamicLightColorScheme() genererar automatiskt ett färgschema baserat på enhetens bakgrundsbild. Scaffold tillhandahåller en standardram med TopAppBar och FAB. OutlinedTextField och Button är Material 3-komponenter vars färger kommer från den dynamiska colorScheme. När bakgrundsbilden ändras uppdateras alla appens färger automatiskt — personalisering utan kodändringar.

Material Design på iOS: Material Components för iOS

Material Components för iOS (MDC-iOS) — ett bibliotek som tillhandahåller inbyggda UIKit-komponenter som implementerar Material Design på iOS. Eftersom iOS har sitt eget designsystem (Human Interface Guidelines) används Material-komponenter på iOS mer sällan, men de behövs i cross-platform-appar där en enhetlig visuell stil krävs mellan Android och iOS.

MDC-iOS inkluderar AppBar, BottomNavigation, Cards, Chips, Dialogs, Snackbar, Tabs och TextFields i Material Design-stil. Biblioteket är tillgängligt via CocoaPods (pod 'MaterialComponents') och Swift Package Manager. Apple Human Interface Guidelines (2024) rekommenderar inte att helt ersätta inbyggda UIKit-komponenter med Material-motsvarigheter, men tillåter användning av Material-komponenter för anpassade gränssnitt förutsatt att inbyggd navigering (NavigationStack, UITabBarController) bibehålls.

På IT Sectr använder vi Material Components på iOS endast för appar som portas från Android (cross-platform-projekt med Flutter eller Kotlin Multiplatform). För inbyggda iOS-appar följer vi HIG och använder UIKit/SwiftUI med anpassad styling under kundens varumärke. Enligt en undersökning från Swift Community (2024) använder 8% av utvecklarna Material Components för iOS, främst i hybridprojekt.

Material Design jämfört med andra designsystem

Material Design — är inte det enda designsystemet på marknaden. De största konkurrenterna: Apple Human Interface Guidelines (iOS/macOS), Fluent Design (Microsoft), Carbon (IBM), Polaris (Shopify), Lightning (Salesforce). Varje system är optimerat för sin plattform: Material Design — för Android, HIG — för iOS, Fluent — för Windows. Valet av designsystem bestäms av målplattformen och ekosystemet.

Den främsta fördelen med Material Design är öppenheten och cross-platform-stödet. Riktlinjer, komponenter och verktyg (Material Theme Builder) är tillgängliga gratis, vilket gör systemet populärt bland startups och oberoende utvecklare. Apple HIG är nära knutet till Apples ekosystem men ger bäst överensstämmelse med användarnas plattformsförväntningar. För cross-platform-projekt är Material Design det optimala valet tack vare Flutter och Jetpack Compose Multiplatform.