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 স্বয়ংক্রিয়ভাবে ছায়াটিকে অ্যানিমেট করে। ইন্টারেক্টিভ উপাদানগুলির জন্য, animateElevation-এর সাথে M3 InteractionSource ব্যবহার করুন যাতে 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 অ্যানিমেশন সমর্থন করে।