Elevation — grunder, skuggor och Z-koordinat i Android

Vad är elevation?

Elevation — är ett mått som introducerades i Material Design (Google I/O 2014) som beskriver positionen av ett element längs Z-axeln. Till skillnad från X och Y (skärmens tvådimensionella plan) är Z höjden ovanför planet. Elevation uttrycks i dp (density-independent pixels) och bestämmer två visuella effekter: skugga (shadow) som blir större och mer oskarp med ökande elevation, och ritordning (element med högre elevation ritas ovanför element med lägre elevation).

Fysisk metafor: föreställ dig pappersark på ett bord. Ju högre stapel, desto längre skugga från det översta arket. Elevation i Material Design fungerar på exakt samma sätt: varje element är ett „digitalt ark" på en viss höjd. När användaren interagerar med ett element (trycker på en knapp, lyfter ett kort) ökar elevation tillfälligt — detta kallas „interaktionselevation" (interaction elevation).

Enligt Material Design Guidelines (Google, 2026) förbättrar korrekt användning av elevation gränssnittets skannbarhet med 35%: användare hittar interaktiva element snabbare eftersom de „stickar ut" ovanför det platta innehållet. Ett överdrivet antal elevationsnivåer (mer än 4) minskar dock denna effekt: om alla element svävar, verkar inget viktigt.

Elevation i Android: egenskaper och API

I Android är elevation implementerad som en inbyggd View-egenskap från API 21 (Android 5.0 Lollipop). View.elevation ställer in bashöjden i pixlar (px), och View.translationZ — en extra förskjutning för animationer (t.ex. vid tryckning). Total visuell höjd = elevation + translationZ. Båda egenskaperna stöder animering via ViewPropertyAnimator eller ObjectAnimator.

<!-- XML: elevation och translationZ -->
<Button
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:elevation="4dp"
    android:translationZ="2dp"
    android:stateListAnimator="@anim/button_elevation"
    android:text="Knapp med elevation" />

StateListAnimator — en XML-resurs för att animera elevation och translationZ beroende på View-tillstånd (pressed, focused, enabled). Till exempel, när en knapp trycks in kan elevation öka från 2 dp till 8 dp, vilket skapar en lyfteffekt. StateListAnimator stöder animering via ObjectAnimator för alla View-egenskaper.

// Kotlin: programmatisk konfiguration av elevation
import android.animation.ObjectAnimator
import android.view.View

val myButton: View = findViewById(R.id.myButton)
myButton.elevation = 4f  // bashöjd i px

// Elevationsanimation vid tryckning
val animator = ObjectAnimator.ofFloat(
    myButton,
    "translationZ",
    0f,
    8f
).apply {
    duration = 150
    repeatMode = ValueAnimator.REVERSE
    repeatCount = 1
}

OutlineProvider — nyckelkomponenten för korrekt ritning av skuggan från elevation. Som standard använder Android ViewOutlineProvider.BACKGROUND, som skapar en kontur baserat på bakgrunds-drawablen. För View med rundade hörn (via shape drawable) måste en anpassad OutlineProvider ställas in, annars blir skuggan rektangulär. Materialkomponenter (CardView, MaterialButton) hanterar OutlineProvider automatiskt.

Elevationsnivåer i Material Design 3

Material Design 3 (Material You) har reviderat elevationssystemet jämfört med Material Design 2. Istället för 12 fasta nivåer (Material 2) erbjuder M3 5 grundtoner (tones), som var och en motsvarar en specifik elevationsnivå. Dessutom introducerar M3 konceptet „färgad skugga" (color shadow) på Android 12+: skuggan kan färgas i temats accentfärg, istället för att vara svart-grå.

Interaction elevation — tillfällig ökning av elevation vid användarens interaktion med elementet. I Material Design 3 får interaktiva element (knappar, kort) +1–2 dp till bas-elevation vid tryckning (pressed state) eller fokus (focused state). För FloatingActionButton är interaction elevation +6 dp. Övergångsanimationen mellan tillstånd bör vara 150–200 ms för naturlig taktil respons.

Elevation i Jetpack Compose

Jetpack Compose stöder elevation via komponenterna Card och Surface, som har en inbyggd elevation-parameter. Till skillnad från View System ritar Compose skuggor via sin egen renderingsmotor, vilket säkerställer samma beteende på alla Android-versioner (API 21+). Modifier.shadow() — en lågnivåmodifierare för att lägga till skugga till valfri composable.

// Jetpack Compose: elevation via Surface och Card
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.Surface

Card(
    elevation = CardDefaults.cardElevation(
        defaultElevation = 4.dp,
        pressedElevation = 8.dp,
        focusedElevation = 6.dp
    ),
    colors = CardDefaults.cardColors(
        containerColor = MaterialTheme.colorScheme.surface
    )
) {
    Text("Elevationsstyrt kort")
}

// Modifier.shadow för anpassade former
Surface(
    modifier = Modifier
        .shadow(elevation = 6.dp, shape = RoundedCornerShape(16.dp))
        .clickable { /* åtgärd */ },
    shape = RoundedCornerShape(16.dp),
    color = MaterialTheme.colorScheme.surface
) { Text("Yta med skugga") }

Elevationsanimation i Compose implementeras via animateFloatAsState eller Animatable. När elevation ändras animerar Compose automatiskt skuggan. För interaktiva element, använd M3 InteractionSource i kombination med animateElevation så att elevation reagerar på tryck, fokus och dragning. Material 3 i Compose 1.2+ stöder color shadow — skugga färgad i temats primära Container-färg.

Elevation på iOS: simulering av höjd

På iOS finns ingen inbyggd motsvarighet till elevation från Material Design. Apples Human Interface Guidelines använder inte Z-koordinat för att hantera skuggor — istället konfigurerar utvecklare skuggor manuellt via CALayer.shadow*. Konceptet med visuell hierarki genom skuggor och djup finns dock även på iOS: modala presentationer, UIAlertController, UIPopoverPresentationController — alla använder skuggor för att separeras från bakgrunden.

För simulering av elevation på iOS använder utvecklare en kombination av shadowOpacity + shadowRadius + shadowOffset. Ju högre erforderlig „höjd", desto större oskärperadie och förskjutning av skuggan. I SwiftUI ställs skuggor in via modifieraren .shadow() med parametrar. För Material-liknande beteende på iOS finns bibliotek Material Components for iOS (MDC) från Google.

// iOS: simulering av elevation via CALayer
import UIKit

extension UIView {
    func applyElevation(level: Int) {
        let elevationMap: [Int: (CGFloat, CGFloat, CGFloat)] = [
            1: (0.05, 1, 2),
            2: (0.08, 2, 4),
            3: (0.11, 4, 8),
            4: (0.12, 6, 12),
            5: (0.14, 8, 16),
            6: (0.15, 12, 24)
        ]
        let (opacity, offset, radius) = elevationMap[level] ?? (0.08, 2, 4)
        layer.shadowColor = UIColor.black.cgColor
        layer.shadowOpacity = Float(opacity)
        layer.shadowOffset = CGSize(width: 0, height: offset)
        layer.shadowRadius = radius
        layer.shouldRasterize = true
        layer.rasterizationScale = UIScreen.main.scale
    }
}

// Användning
cardView.applyElevation(level: 3)  // motsvarande 6 dp

Material Components for iOS (MDC-iOS) — Googles bibliotek som portar Material Design elevation till iOS. MDC-iOS tillhandahåller klassen MDCShadowElevation med fördefinierade värden, MDCShadowLayer för att rita skugga och MDCCard för Material-kort med korrekt elevation. MDC-iOS stöder elevationsanimation vid tryckning via stateful shadow properties.