Elevation — temel bilgiler, gölgeler ve Android'de Z koordinatı

Elevation nedir?

Elevation, Material Design'da (Google I/O 2014) tanıtılan ve bir öğenin z-ekseni boyunca konumunu tanımlayan bir metriktir. x ve y'nin (ekranın iki boyutlu düzlemi) aksine, z düzlemin üzerindeki yüksekliktir. Elevation, dp (yoğunluktan bağımsız piksel) cinsinden ifade edilir ve iki görsel efekt belirler: elevation arttıkça büyüyen ve bulanıklaşan gölge ve çizim sırası (yüksek elevation'a sahip öğeler, düşük elevation'a sahip öğelerin üzerine çizilir).

Fiziksel metafor: bir masadaki kağıt yapraklarını hayal edin. Yığın ne kadar yüksekse, üstteki yaprağın gölgesi o kadar uzun olur. Material Design'daki Elevation da tamamen aynı şekilde çalışır — her öğe belirli bir yükseklikte “dijital bir yaprak”dır. Bir kullanıcı bir öğeyle etkileşime girdiğinde (bir düğmeye basar, bir kartı kaldırır), elevation geçici olarak artar — buna “etkileşim elevation'ı” denir.

Material Design Guidelines'a (Google, 2026) göre, elevation'ın doğru kullanımı arayüzün taranabilirliğini %35 artırır: kullanıcılar etkileşimli öğeleri daha hızlı bulur çünkü bunlar düz içeriğin üzerinde “öne çıkar.” Ancak, aşırı sayıda elevation seviyesi (4'ten fazla) bu etkiyi azaltır — her şey yüzüyorsa, hiçbir şey önemli görünmez.

Android'de Elevation: özellikler ve API

Android'de elevation, API 21'den (Android 5.0 Lollipop) itibaren View'in yerleşik bir özelliği olarak uygulanmıştır. View.elevation, piksel (px) cinsinden temel yüksekliği ayarlar ve View.translationZ, animasyonlar için ek kaydırma sağlar (örneğin, basıldığında). Toplam görsel yükseklik = elevation + translationZ. Her iki özellik de ViewPropertyAnimator veya ObjectAnimator aracılığıyla animasyonu destekler.

<!-- XML: elevation ve 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="Elevasyonlu düğme" />

StateListAnimator — View durumuna (basılı, odaklanmış, etkin) bağlı olarak elevation ve translationZ'yi canlandırmak için bir XML kaynağıdır. Örneğin, bir düğmeye basıldığında, elevation 2 dp'den 8 dp'ye yükselerek bir kaldırma efekti oluşturabilir. StateListAnimator, herhangi bir View özelliği için ObjectAnimator aracılığıyla animasyonu destekler.

// Kotlin: programatik elevation kurulumu
import android.animation.ObjectAnimator
import android.view.View

val myButton: View = findViewById(R.id.myButton)
myButton.elevation = 4f  // px cinsinden temel yükseklik

// Basıldığında elevation animasyonu
val animator = ObjectAnimator.ofFloat(
    myButton,
    "translationZ",
    0f,
    8f
).apply {
    duration = 150
    repeatMode = ValueAnimator.REVERSE
    repeatCount = 1
}

OutlineProvider — elevation gölgesinin doğru şekilde oluşturulması için önemli bir bileşendir. Varsayılan olarak Android, arka plan drawable'ına dayalı bir kontur oluşturan ViewOutlineProvider.BACKGROUND kullanır. Yuvarlak köşeli View'ler (shape drawable aracılığıyla) için özel bir OutlineProvider ayarlanmalıdır, aksi takdirde gölge dikdörtgen olur. Material bileşenleri (CardView, MaterialButton), OutlineProvider'ı otomatik olarak yönetir.

Material Design 3'te Elevation Seviyeleri

Material Design 3 (Material You), Material Design 2'ye kıyasla elevation sistemini revize etmiştir. 12 sabit seviye (Material 2) yerine, M3 her biri belirli bir elevation seviyesine karşılık gelen 5 temel ton sunar. Ek olarak, M3, Android 12+'da “renkli gölge” kavramını tanıtır: gölge, siyah-gri olmak yerine temanın vurgu rengiyle renklendirilebilir.

Etkileşim elevation'ı — bir kullanıcının bir öğeyle etkileşimi sırasında elevation'ın geçici olarak artmasıdır. Material Design 3'te, etkileşimli öğeler (düğmeler, kartlar) basıldığında (pressed durumu) veya odaklandığında (focused durumu) temel elevation'larına +1–2 dp kazanır. FloatingActionButton için etkileşim elevation'ı +6 dp'dir. Doğal bir dokunsal geri bildirim için durumlar arasındaki geçiş animasyonu 150–200 ms sürmelidir.

Jetpack Compose'ta Elevation

Jetpack Compose, yerleşik bir elevation parametresine sahip Card ve Surface bileşenleri aracılığıyla elevation'ı destekler. View Sisteminin aksine, Compose gölgeleri kendi işleme motoru aracılığıyla oluşturur ve tüm Android sürümlerinde (API 21+) tutarlı davranış sağlar. Modifier.shadow(), herhangi bir composable'a gölge eklemek için düşük seviyeli bir değiştiricidir.

// Jetpack Compose: Surface ve Card ile elevation
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("Elevasyon kontrollü kart")
}

// Özel şekiller için Modifier.shadow
Surface(
    modifier = Modifier
        .shadow(elevation = 6.dp, shape = RoundedCornerShape(16.dp))
        .clickable { /* eylem */ },
    shape = RoundedCornerShape(16.dp),
    color = MaterialTheme.colorScheme.surface
) { Text("Gölgeli yüzey") }

Elevation animasyonu Compose'ta animateFloatAsState veya Animatable aracılığıyla uygulanır. Elevation değiştiğinde, Compose gölgeyi otomatik olarak canlandırır. Etkileşimli öğeler için, elevation'ın basma, odaklanma ve sürüklemeye yanıt vermesi için M3 InteractionSource'u animateElevation ile birlikte kullanın. Compose 1.2+'da Material 3, renkli gölgeyi (temanın primary Container rengiyle renklendirilmiş gölge) destekler.

iOS'ta Elevation: yükseklik simülasyonu

iOS'ta, Material Design'dan elevation'ın yerleşik bir benzeri yoktur. Apple'ın Human Interface Guidelines'ı, gölge yönetimi için z koordinatlarını kullanmaz — bunun yerine geliştiriciler, gölgeleri CALayer.shadow* aracılığıyla manuel olarak yapılandırır. Ancak, gölgeler ve derinlik yoluyla görsel hiyerarşi kavramı iOS'ta da mevcuttur: modal sunumlar, UIAlertController, UIPopoverPresentationController — tümü arka plandan ayrılmak için gölgeler kullanır.

iOS'ta elevation'ı simüle etmek için geliştiriciler, shadowOpacity + shadowRadius + shadowOffset kombinasyonunu kullanır. Gerekli “yükseklik” ne kadar yüksekse, bulanıklık yarıçapı ve gölge kaydırması o kadar büyük olur. SwiftUI'da gölgeler, parametrelerle .shadow() değiştiricisi aracılığıyla ayarlanır. iOS'ta Material benzeri davranış için Google'ın Material Components for iOS (MDC) gibi kütüphaneler mevcuttur.

// iOS: CALayer ile elevation simülasyonu
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
    }
}

// Kullanım
cardView.applyElevation(level: 3)  // 6 dp'ye eşdeğer

Material Components for iOS (MDC-iOS) — Material Design elevation'ı iOS'a taşıyan bir Google kütüphanesidir. MDC-iOS, önceden tanımlanmış değerlerle MDCShadowElevation sınıfını, gölge oluşturma için MDCShadowLayer'ı ve doğru elevation'a sahip Material kartları için MDCCard'ı sağlar. MDC-iOS, durum bilgisi olan gölge özellikleri aracılığıyla basıldığında elevation animasyonunu destekler.