Elevation — मूल बातें, छायाएँ और Android में z-निर्देशांक

Elevation क्या है?

Elevation एक मीट्रिक है जिसे Material Design (Google I/O 2014) में पेश किया गया था और यह z-अक्ष के साथ तत्व की स्थिति का वर्णन करता है। x और y (स्क्रीन का द्वि-आयामी तल) के विपरीत, z तल के ऊपर की ऊँचाई है। Elevation को dp (डेंसिटी-इंडिपेंडेंट पिक्सेल) में व्यक्त किया जाता है और यह दो दृश्य प्रभाव निर्धारित करता है: छाया, जो elevation बढ़ने पर बड़ी और अधिक धुंधली हो जाती है, और ड्राइंग क्रम (अधिक elevation वाले तत्व कम elevation वाले तत्वों के ऊपर खींचे जाते हैं)।

भौतिक रूपक: एक मेज पर कागज की शीट की कल्पना करें। स्टैक जितना ऊँचा होगा, ऊपरी शीट की छाया उतनी ही लंबी होगी। Elevation Material Design में बिल्कुल उसी तरह काम करता है — प्रत्येक तत्व एक निश्चित ऊँचाई पर एक “डिजिटल शीट” है। जब उपयोगकर्ता किसी तत्व के साथ इंटरैक्ट करता है (बटन दबाता है, कार्ड उठाता है), तो elevation अस्थायी रूप से बढ़ जाता है — इसे “इंटरैक्शन elevation” कहा जाता है।

Material Design Guidelines (Google, 2026) के अनुसार, elevation का सही उपयोग इंटरफ़ेस की स्कैनेबिलिटी में 35% सुधार करता है: उपयोगकर्ता इंटरैक्टिव तत्वों को तेज़ी से ढूँढ़ते हैं क्योंकि वे फ्लैट सामग्री के ऊपर “उभरते” हैं। हालाँकि, elevation स्तरों की अत्यधिक संख्या (4 से अधिक) इस प्रभाव को कम कर देती है — यदि सब कुछ तैर रहा है, तो कुछ भी महत्वपूर्ण नहीं लगता।

Android में Elevation: गुण और API

Android में, elevation को API 21 (Android 5.0 Lollipop) से View की अंतर्निहित प्रॉपर्टी के रूप में लागू किया गया है। View.elevation पिक्सेल (px) में आधार ऊँचाई निर्धारित करता है, और View.translationZ एनिमेशन के लिए अतिरिक्त ऑफ़सेट प्रदान करता है (उदाहरण के लिए, दबाने पर)। कुल दृश्य ऊँचाई = elevation + translationZ। दोनों प्रॉपर्टी ViewPropertyAnimator या ObjectAnimator के माध्यम से एनिमेशन का समर्थन करती हैं।

<!-- XML: elevation और 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="Elevation वाला बटन" />

StateListAnimator — View की स्थिति (दबाया गया, फ़ोकस किया गया, सक्षम) के आधार पर elevation और translationZ को एनिमेट करने के लिए एक XML संसाधन। उदाहरण के लिए, बटन दबाने पर, elevation 2 dp से 8 dp तक बढ़ सकता है, जिससे उठाने का प्रभाव पैदा होता है। StateListAnimator किसी भी View प्रॉपर्टी के लिए ObjectAnimator के माध्यम से एनिमेशन का समर्थन करता है।

// Kotlin: प्रोग्रामेटिक elevation सेटअप
import android.animation.ObjectAnimator
import android.view.View

val myButton: View = findViewById(R.id.myButton)
myButton.elevation = 4f  // px में आधार ऊँचाई

// दबाने पर elevation एनिमेशन
val animator = ObjectAnimator.ofFloat(
    myButton,
    "translationZ",
    0f,
    8f
).apply {
    duration = 150
    repeatMode = ValueAnimator.REVERSE
    repeatCount = 1
}

OutlineProvider — elevation छाया के सही प्रस्तुतीकरण के लिए एक महत्वपूर्ण घटक। डिफ़ॉल्ट रूप से, Android ViewOutlineProvider.BACKGROUND का उपयोग करता है, जो पृष्ठभूमि drawable के आधार पर एक रूपरेखा बनाता है। गोल कोनों वाले Views (shape drawable के माध्यम से) के लिए, एक कस्टम OutlineProvider सेट किया जाना चाहिए, अन्यथा छाया आयताकार होगी। Material घटक (CardView, MaterialButton) OutlineProvider को स्वचालित रूप से प्रबंधित करते हैं।

Material Design 3 में Elevation स्तर

Material Design 3 (Material You) ने Material Design 2 की तुलना में elevation सिस्टम में संशोधन किया। 12 निश्चित स्तरों (Material 2) के बजाय, M3 5 बुनियादी टोन प्रदान करता है, जिनमें से प्रत्येक एक विशिष्ट elevation स्तर से मेल खाता है। इसके अतिरिक्त, M3 Android 12+ पर “रंगीन छाया” की अवधारणा पेश करता है: छाया को काले-ग्रे होने के बजाय थीम के एक्सेंट रंग से रंगा जा सकता है।

इंटरैक्शन elevation — किसी तत्व के साथ उपयोगकर्ता इंटरैक्शन के दौरान elevation में अस्थायी वृद्धि। Material Design 3 में, इंटरैक्टिव तत्व (बटन, कार्ड) दबाने (pressed state) या फ़ोकस (focused state) करने पर अपने आधार elevation में +1–2 dp प्राप्त करते हैं। FloatingActionButton के लिए, इंटरैक्शन elevation +6 dp है। प्राकृतिक स्पर्श प्रतिक्रिया के लिए राज्यों के बीच संक्रमण एनिमेशन 150–200 ms तक चलना चाहिए।

Jetpack Compose में Elevation

Jetpack Compose Card और Surface घटकों के माध्यम से elevation का समर्थन करता है, जिनमें एक अंतर्निहित elevation पैरामीटर होता है। View सिस्टम के विपरीत, Compose अपने स्वयं के रेंडर इंजन के माध्यम से छाया प्रस्तुत करता है, जो Android के सभी संस्करणों (API 21+) में सुसंगत व्यवहार सुनिश्चित करता है। Modifier.shadow() किसी भी composable में छाया जोड़ने के लिए एक निम्न-स्तरीय मॉडिफ़ायर है।

// Jetpack Compose: Surface और Card के माध्यम से 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("Elevation-नियंत्रित कार्ड")
}

// कस्टम आकृतियों के लिए Modifier.shadow
Surface(
    modifier = Modifier
        .shadow(elevation = 6.dp, shape = RoundedCornerShape(16.dp))
        .clickable { /* क्रिया */ },
    shape = RoundedCornerShape(16.dp),
    color = MaterialTheme.colorScheme.surface
) { Text("छाया वाली सतह") }

Elevation एनिमेशन Compose में animateFloatAsState या Animatable के माध्यम से कार्यान्वित किया जाता है। जब elevation बदलता है, Compose स्वचालित रूप से छाया को एनिमेट करता है। इंटरैक्टिव तत्वों के लिए, M3 InteractionSource का उपयोग animateElevation के साथ करें ताकि elevation दबाव, फ़ोकस और ड्रैग पर प्रतिक्रिया करे। Compose 1.2+ में Material 3 रंगीन छाया का समर्थन करता है — थीम के primary Container रंग से रंगी हुई छाया।

iOS में Elevation: ऊँचाई अनुकरण

iOS में, Material Design से elevation का कोई अंतर्निहित एनालॉग नहीं है। Apple के Human Interface Guidelines छाया प्रबंधन के लिए z-निर्देशांक का उपयोग नहीं करते हैं — इसके बजाय, डेवलपर CALayer.shadow* के माध्यम से मैन्युअल रूप से छाया कॉन्फ़िगर करते हैं। हालाँकि, छाया और गहराई के माध्यम से दृश्य पदानुक्रम की अवधारणा iOS में भी मौजूद है: मॉडल प्रेजेंटेशन, UIAlertController, UIPopoverPresentationController — सभी पृष्ठभूमि से अलग दिखने के लिए छाया का उपयोग करते हैं।

iOS पर elevation अनुकरण करने के लिए, डेवलपर shadowOpacity + shadowRadius + shadowOffset के संयोजन का उपयोग करते हैं। आवश्यक “ऊँचाई” जितनी अधिक होगी, धुंधलापन त्रिज्या और छाया ऑफ़सेट उतना ही बड़ा होगा। SwiftUI में, छाया पैरामीटर के साथ .shadow() मॉडिफ़ायर के माध्यम से सेट की जाती है। iOS पर Material-जैसे व्यवहार के लिए, Google द्वारा Material Components for iOS (MDC) जैसी लाइब्रेरी मौजूद हैं।

// iOS: CALayer के माध्यम से elevation अनुकरण
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
    }
}

// उपयोग
cardView.applyElevation(level: 3)  // 6 dp के समतुल्य

Material Components for iOS (MDC-iOS) — Google की एक लाइब्रेरी जो Material Design elevation को iOS पर पोर्ट करती है। MDC-iOS पूर्वनिर्धारित मानों के साथ MDCShadowElevation क्लास, छाया प्रस्तुतीकरण के लिए MDCShadowLayer और उचित elevation के साथ Material कार्ड के लिए MDCCard प्रदान करता है। MDC-iOS स्टेटफुल छाया गुणों के माध्यम से दबाने पर elevation एनिमेशन का समर्थन करता है।