Elevation — βασικές αρχές, σκιές και συντεταγμένη Z στο Android

Τι είναι το elevation;

Elevation — είναι μια μετρική που εισήχθη στο Material Design (Google I/O 2014) και περιγράφει τη θέση ενός στοιχείου κατά μήκος του άξονα Z. Σε αντίθεση με τα X και Y (το δισδιάστατο επίπεδο της οθόνης), το Z είναι το ύψος πάνω από το επίπεδο. Το elevation εκφράζεται σε dp (density-independent pixels) και καθορίζει δύο οπτικά εφέ: τη σκιά (shadow) που γίνεται μεγαλύτερη και πιο θαμπή με την αύξηση του elevation, και τη σειρά σχεδίασης (τα στοιχεία με υψηλότερο elevation σχεδιάζονται πάνω από στοιχεία με χαμηλότερο elevation).

Φυσική μεταφορά: φανταστείτε φύλλα χαρτιού σε ένα τραπέζι. Όσο υψηλότερη είναι η στοίβα, τόσο μεγαλύτερη είναι η σκιά από το πάνω φύλλο. Elevation στο Material Design λειτουργεί ακριβώς με τον ίδιο τρόπο: κάθε στοιχείο είναι ένα «ψηφιακό φύλλο» σε συγκεκριμένο ύψος. Όταν ο χρήστης αλληλεπιδρά με ένα στοιχείο (πατάει ένα κουμπί, σηκώνει μια κάρτα), το elevation αυξάνεται προσωρινά — αυτό ονομάζεται «εξύψωση αλληλεπίδρασης» (interaction elevation).

Σύμφωνα με το Material Design Guidelines (Google, 2026), η σωστή χρήση του elevation βελτιώνει τη δυνατότητα σάρωσης της διεπαφής κατά 35%: οι χρήστες βρίσκουν τα διαδραστικά στοιχεία πιο γρήγορα επειδή «ξεχωρίζουν» πάνω από το επίπεδο περιεχόμενο. Ωστόσο, ο υπερβολικός αριθμός επιπέδων elevation (περισσότερα από 4) μειώνει αυτό το αποτέλεσμα: αν όλα τα στοιχεία αιωρούνται, κανένα δεν φαίνεται σημαντικό.

Elevation στο Android: ιδιότητες και API

Στο Android το elevation έχει υλοποιηθεί ως ενσωματωμένη ιδιότητα View από το API 21 (Android 5.0 Lollipop). Το View.elevation ορίζει το βασικό ύψος σε pixels (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 — ένας πόρος XML για την κίνηση του elevation και του translationZ ανάλογα με την κατάσταση View (pressed, focused, enabled). Για παράδειγμα, όταν πατιέται ένα κουμπί, το elevation μπορεί να αυξηθεί από 2 dp σε 8 dp, δημιουργώντας ένα εφέ ανύψωσης. Το StateListAnimator υποστηρίζει κίνηση μέσω ObjectAnimator για οποιεσδήποτε ιδιότητες View.

// 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 φόντου. Για View με στρογγυλεμένες γωνίες (μέσω shape drawable) πρέπει να οριστεί ένα προσαρμοσμένο OutlineProvider, διαφορετικά η σκιά θα είναι ορθογώνια. Τα στοιχεία Material (CardView, MaterialButton) διαχειρίζονται το OutlineProvider αυτόματα.

Επίπεδα elevation στο Material Design 3

Material Design 3 (Material You) αναθεώρησε το σύστημα elevation σε σύγκριση με το Material Design 2. Αντί για 12 σταθερά επίπεδα (Material 2) το M3 προσφέρει 5 βασικούς τόνους (tones), καθένας από τους οποίους αντιστοιχεί σε ένα συγκεκριμένο επίπεδο elevation. Επιπλέον, το M3 εισάγει την έννοια της «χρωματιστής σκιάς» (color shadow) στο Android 12+: η σκιά μπορεί να χρωματιστεί στο χρώμα έμφασης του θέματος, αντί να είναι μαύρο-γκρι.

Interaction elevation — προσωρινή αύξηση του elevation κατά την αλληλεπίδραση του χρήστη με το στοιχείο. Στο Material Design 3, τα διαδραστικά στοιχεία (κουμπιά, κάρτες) λαμβάνουν +1–2 dp στο βασικό elevation όταν πατιούνται (pressed state) ή εστιάζονται (focused state). Για το FloatingActionButton, το interaction elevation είναι +6 dp. Η κίνηση μετάβασης μεταξύ καταστάσεων πρέπει να διαρκεί 150–200 ms για φυσική απτική απόκριση.

Elevation στο Jetpack Compose

Jetpack Compose υποστηρίζει elevation μέσω των στοιχείων Card και Surface, τα οποία διαθέτουν ενσωματωμένη παράμετρο elevation. Σε αντίθεση με το View System, το Compose σχεδιάζει σκιές μέσω της δικής του μηχανής απόδοσης, εξασφαλίζοντας την ίδια συμπεριφορά σε όλες τις εκδόσεις Android (API 21+). Το Modifier.shadow() — ένας τροποποιητής χαμηλού επιπέδου για προσθήκη σκιάς σε οποιοδήποτε composable.

// Jetpack Compose: elevation μέσω Surface και 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("Κάρτα που ελέγχεται από 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 να αντιδρά σε πατήματα, εστίαση και σύρσιμο. Το Material 3 στο Compose 1.2+ υποστηρίζει color shadow — σκιά χρωματισμένη στο χρώμα primary Container του θέματος.

Elevation στο iOS: προσομοίωση ύψους

Στο iOS δεν υπάρχει ενσωματωμένο ανάλογο του elevation από το Material Design. Οι Human Interface Guidelines της Apple δεν χρησιμοποιούν συντεταγμένη Z για τη διαχείριση σκιών — αντίθετα, οι προγραμματιστές ρυθμίζουν χειροκίνητα τις σκιές μέσω CALayer.shadow*. Ωστόσο, η έννοια της οπτικής ιεραρχίας μέσω σκιών και βάθους υπάρχει και στο iOS: οι τροπικές παρουσιάσεις, το UIAlertController, το UIPopoverPresentationController — όλα χρησιμοποιούν σκιές για διαχωρισμό από το φόντο.

Για προσομοίωση elevation στο iOS, οι προγραμματιστές χρησιμοποιούν έναν συνδυασμό shadowOpacity + shadowRadius + shadowOffset. Όσο υψηλότερο είναι το απαιτούμενο «ύψος», τόσο μεγαλύτερη είναι η ακτίνα θολώματος και η μετατόπιση της σκιάς. Στο SwiftUI, οι σκιές ορίζονται μέσω του τροποποιητή .shadow() με παραμέτρους. Για συμπεριφορά παρόμοια με Material στο iOS, υπάρχουν βιβλιοθήκες Material Components for iOS (MDC) από την Google.

// iOS: προσομοίωση elevation μέσω 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
    }
}

// Χρήση
cardView.applyElevation(level: 3)  // ισοδύναμο 6 dp

Material Components for iOS (MDC-iOS) — η βιβλιοθήκη της Google που μεταφέρει το Material Design elevation στο iOS. Το MDC-iOS παρέχει την κλάση MDCShadowElevation με προκαθορισμένες τιμές, το MDCShadowLayer για σχεδίαση σκιάς και το MDCCard για κάρτες Material με σωστό elevation. Το MDC-iOS υποστηρίζει κίνηση elevation κατά το πάτημα μέσω stateful shadow properties.