Elevation — dasar-dasar, bayangan dan koordinat Z di Android

Apa itu elevation?

Elevation — adalah metrik yang diperkenalkan di Material Design (Google I/O 2014) yang menggambarkan posisi elemen di sepanjang sumbu Z. Tidak seperti X dan Y (bidang dua dimensi layar), Z adalah ketinggian di atas bidang. Elevation dinyatakan dalam dp (density-independent pixels) dan menentukan dua efek visual: bayangan (shadow) yang menjadi lebih besar dan lebih buram seiring bertambahnya elevation, dan urutan gambar (elemen dengan elevation lebih tinggi digambar di atas elemen dengan elevation lebih rendah).

Metafora fisik: bayangkan lembaran kertas di atas meja. Semakin tinggi tumpukan, semakin panjang bayangan dari lembaran atas. Elevation di Material Design bekerja persis sama: setiap elemen adalah „lembaran digital" pada ketinggian tertentu. Ketika pengguna berinteraksi dengan elemen (menekan tombol, mengangkat kartu), elevation meningkat sementara — ini disebut „elevasi interaksi" (interaction elevation).

Menurut Material Design Guidelines (Google, 2026), penggunaan elevation yang benar meningkatkan kemampuan scan antarmuka sebesar 35%: pengguna lebih cepat menemukan elemen interaktif karena mereka „menonjol" di atas konten datar. Namun, jumlah level elevation yang berlebihan (lebih dari 4) mengurangi efek ini: jika semua elemen melayang, tidak ada yang terlihat penting.

Elevation di Android: properti dan API

Di Android elevation diimplementasikan sebagai properti bawaan View sejak API 21 (Android 5.0 Lollipop). View.elevation mengatur ketinggian dasar dalam piksel (px), dan View.translationZ — pergeseran tambahan untuk animasi (misalnya saat ditekan). Tinggi visual total = elevation + translationZ. Kedua properti mendukung animasi melalui ViewPropertyAnimator atau ObjectAnimator.

<!-- XML: elevation dan 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="Tombol dengan elevasi" />

StateListAnimator — sumber daya XML untuk menganimasi elevation dan translationZ tergantung pada status View (pressed, focused, enabled). Misalnya, saat tombol ditekan, elevation dapat meningkat dari 2 dp menjadi 8 dp, menciptakan efek terangkat. StateListAnimator mendukung animasi melalui ObjectAnimator untuk properti View apa pun.

// Kotlin: konfigurasi elevation secara terprogram
import android.animation.ObjectAnimator
import android.view.View

val myButton: View = findViewById(R.id.myButton)
myButton.elevation = 4f  // tinggi dasar dalam px

// Animasi elevation saat ditekan
val animator = ObjectAnimator.ofFloat(
    myButton,
    "translationZ",
    0f,
    8f
).apply {
    duration = 150
    repeatMode = ValueAnimator.REVERSE
    repeatCount = 1
}

OutlineProvider — komponen kunci untuk menggambar bayangan dari elevation dengan benar. Secara default Android menggunakan ViewOutlineProvider.BACKGROUND, yang membuat kontur berdasarkan drawable latar belakang. Untuk View dengan sudut membulat (melalui shape drawable) perlu mengatur OutlineProvider kustom, jika tidak bayangan akan berbentuk persegi panjang. Komponen Material (CardView, MaterialButton) mengelola OutlineProvider secara otomatis.

Level elevation di Material Design 3

Material Design 3 (Material You) merevisi sistem elevation dibandingkan dengan Material Design 2. Alih-alih 12 level tetap (Material 2) M3 menawarkan 5 ton dasar (tones), yang masing-masing sesuai dengan level elevation tertentu. Selain itu, M3 memperkenalkan konsep „bayangan berwarna" (color shadow) di Android 12+: bayangan dapat diwarnai dengan warna aksen tema, bukan hitam-abu-abu.

Interaction elevation — peningkatan sementara elevation saat pengguna berinteraksi dengan elemen. Di Material Design 3, elemen interaktif (tombol, kartu) mendapatkan +1–2 dp ke elevation dasar saat ditekan (pressed state) atau fokus (focused state). Untuk FloatingActionButton, interaction elevation adalah +6 dp. Animasi transisi antar status harus berlangsung 150–200 ms untuk respons taktil alami.

Elevation di Jetpack Compose

Jetpack Compose mendukung elevation melalui komponen Card dan Surface, yang memiliki parameter elevation bawaan. Tidak seperti View System, Compose menggambar bayangan melalui mesin render sendiri, yang memastikan perilaku yang sama di semua versi Android (API 21+). Modifier.shadow() — pengubah level rendah untuk menambahkan bayangan ke composable apa pun.

// Jetpack Compose: elevation melalui Surface dan 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("Kartu yang dikelola elevation")
}

// Modifier.shadow untuk bentuk kustom
Surface(
    modifier = Modifier
        .shadow(elevation = 6.dp, shape = RoundedCornerShape(16.dp))
        .clickable { /* aksi */ },
    shape = RoundedCornerShape(16.dp),
    color = MaterialTheme.colorScheme.surface
) { Text("Permukaan dengan bayangan") }

Animasi elevation di Compose diimplementasikan melalui animateFloatAsState atau Animatable. Saat elevation berubah, Compose secara otomatis menganimasi bayangan. Untuk elemen interaktif, gunakan M3 InteractionSource dalam kombinasi dengan animateElevation agar elevation merespons tekanan, fokus, dan geseran. Material 3 di Compose 1.2+ mendukung color shadow — bayangan yang diwarnai dengan warna primary Container tema.

Elevation di iOS: simulasi tinggi

Di iOS tidak ada analog bawaan elevation dari Material Design. Human Interface Guidelines Apple tidak menggunakan koordinat Z untuk mengelola bayangan — sebaliknya, pengembang mengonfigurasi bayangan secara manual melalui CALayer.shadow*. Namun, konsep hierarki visual melalui bayangan dan kedalaman juga ada di iOS: presentasi modal, UIAlertController, UIPopoverPresentationController — semuanya menggunakan bayangan untuk memisahkan dari latar belakang.

Untuk simulasi elevation di iOS, pengembang menggunakan kombinasi shadowOpacity + shadowRadius + shadowOffset. Semakin tinggi „ketinggian" yang diperlukan, semakin besar radius keburaman dan pergeseran bayangan. Di SwiftUI, bayangan diatur melalui pengubah .shadow() dengan parameter. Untuk perilaku mirip Material di iOS, ada pustaka Material Components for iOS (MDC) dari Google.

// iOS: simulasi elevation melalui 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
    }
}

// Penggunaan
cardView.applyElevation(level: 3)  // setara 6 dp

Material Components for iOS (MDC-iOS) — pustaka Google yang mem-porting Material Design elevation ke iOS. MDC-iOS menyediakan kelas MDCShadowElevation dengan nilai yang telah ditentukan, MDCShadowLayer untuk menggambar bayangan, dan MDCCard untuk kartu Material dengan elevation yang benar. MDC-iOS mendukung animasi elevation saat ditekan melalui stateful shadow properties.