Safe Area — apa itu, jarak dari notch dan StatusBar

Apa itu Safe Area?

Safe Area — adalah area layar persegi panjang di mana konten dijamin tidak tertutup oleh elemen sistem perangkat keras dan perangkat lunak: potongan kamera (notch), Dynamic Island, bilah status (StatusBar), indikator navigasi gerakan (Home Indicator), sudut layar membulat, dan panel navigasi. Batas Safe Area berubah secara dinamis saat perangkat diputar, keyboard dipanggil, atau Split View dijalankan. Menurut Apple Human Interface Guidelines (2025), mengabaikan Safe Area dianggap sebagai kesalahan desain dan dapat menyebabkan penolakan aplikasi saat ditinjau.

Mengapa Safe Area diperlukan

Safe Area memecahkan masalah fragmentasi layar di ekosistem seluler. Sebelum iPhone X, semua iPhone memiliki layar persegi panjang dengan proporsi yang sama. Dengan munculnya notch, jumlah varian layar meningkat menjadi 20+ — berbagai ukuran potongan, Dynamic Island, pembulatan, indikator. Safe Area mengabstraksi pengembang dari perbedaan ini, menyediakan API tunggal untuk jarak adaptif. Menurut Apple Developer (2025), iOS secara otomatis menerapkan Safe Area untuk root view, tetapi untuk UICollectionView dan UIScrollView diperlukan konfigurasi manual.

Safe Area di iOS: SafeAreaLayoutGuide dan SwiftUI

Di iOS Safe Area diimplementasikan melalui SafeAreaLayoutGuide di UIKit dan pengubah safeAreaInset di SwiftUI. SafeAreaLayoutGuide adalah panduan tata letak yang ditambahkan ke setiap UIView dan menentukan persegi panjang bebas dari elemen sistem. Di Interface Builder Safe Area ditampilkan sebagai area biru. SwiftUI menerapkan Safe Area secara otomatis untuk sebagian besar wadah, tetapi memungkinkan untuk mengabaikannya melalui .ignoresSafeArea().

// UIKit: SafeAreaLayoutGuide
let safeGuide = view.safeAreaLayoutGuide
button.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
    button.topAnchor.constraint(
        equalTo: safeGuide.topAnchor),
    button.leadingAnchor.constraint(
        equalTo: safeGuide.leadingAnchor),
    button.trailingAnchor.constraint(
        equalTo: safeGuide.trailingAnchor),
])

SafeAreaLayoutGuide di UIKit mendefinisikan empat anchor — top, bottom, leading, trailing — yang secara otomatis memperhitungkan notch, StatusBar, dan Home Indicator. Pendekatan ini berfungsi di semua perangkat iOS, mulai dari iOS 11. Di SwiftUI efek yang sama dicapai melalui pengubah konten di dalam NavigationStack atau VStack — SwiftUI secara otomatis menerapkan Safe Area Insets.

// SwiftUI: safeAreaInset dan ignoresSafeArea
ZStack {
    Color.blue
        .ignoresSafeArea()
    VStack {
        Text("Konten di Safe Area")
            .foregroundColor(.white)
        Spacer()
    }
}
.safeAreaInset(edge: .bottom) {
    Text("Bilah bawah layar")
        .padding()
        .background(.thinMaterial)
}

Di SwiftUI .ignoresSafeArea() memungkinkan latar belakang meluas melampaui Safe Area, dan .safeAreaInset(edge:) menambahkan panel kustom yang mengurangi Safe Area dari sisi yang ditentukan. Ini adalah pola standar untuk panel navigasi, bilah alat, dan spanduk iklan.

Safe Area di Android: WindowInsets dan System Bars

Di Android Safe Area diimplementasikan melalui WindowInsets (API 30+) dan WindowInsetsCompat(pustaka AndroidX). WindowInsets menyediakan jarak untuk Status Bar, Navigation Bar, IME (keyboard), dan gerakan sistem. Mulai dari Android 10 (API 29), Google merekomendasikan penggunaan WindowInsetsCompat.getInsets() dengan tipe WindowInsetsCompat.Type.systemBars() untuk mendapatkan satu set jarak yang seragam untuk semua elemen sistem.

// Android: WindowInsets (Kotlin)
class MainActivity : AppCompatActivity() {
    override fun onCreate(
        savedInstanceState: Bundle?
    ) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        ViewCompat.setOnApplyWindowInsetsListener(
            findViewById(R.id.main_content)
        ) { view, insets ->
            val systemBars = insets.getInsets(
                WindowInsetsCompat.Type.systemBars()
            )
            view.setPadding(
                systemBars.left,
                systemBars.top,
                systemBars.right,
                systemBars.bottom
            )
            ViewCompat.ON_APPLY_WINDOW_INSETS_LISTENER
        }
    }
}

Dalam contoh ini WindowInsets mengembalikan jarak untuk semua bilah sistem — Status Bar di atas, Navigation Bar di bawah. setOnApplyWindowInsetsListener dipanggil setiap kali insets berubah (rotasi, panggilan keyboard). Metode systemBars() menggabungkan bilah status, bilah navigasi, dan bilah kustomisasi menjadi satu set, menyederhanakan kode.

Edge-to-Edge di Android

Mulai dari Android 15, Google mewajibkan tampilan edge-to-edge untuk semua aplikasi yang menargetkan API baru. Ini berarti aplikasi digambar di bawah bilah sistem, dan Safe Area diterapkan melalui handleWindowInsets atau WindowInsetController. Menurut Android Developer Blog (2025), 68% aplikasi telah beralih ke edge-to-edge, yang meningkatkan persepsi visual pada perangkat dengan layar besar.

Safe Area, Padding dan Insets: apa perbedaannya

Safe Area, Padding dan Insets — konsep yang terkait namun berbeda. Safe Area adalah area layar yang dijamin bebas dari elemen sistem. Padding adalah jarak dalam suatu elemen dari batasnya. Insets adalah nilai numerik spesifik dari jarak yang dikembalikan oleh API Safe Area. Menurut Apple Tech Notes (2025), kebingungan antara Safe Area dan Padding menyebabkan 40% masalah adaptabilitas di toko aplikasi.

Contoh implementasi Safe Area dengan kode

Mari kita bahas skenario umum: Safe Area di UIKit untuk orientasi horizontal dengan notch, Safe Area di SwiftUI dengan panel kustom, Safe Area di Android Compose. Contoh untuk iOS UIKit — menempatkan koleksi di dalam Safe Area di iPhone dengan Dynamic Island. Contoh untuk Jetpack Compose — penggunaan WindowInsets di Material 3.

// Jetpack Compose: jarak dari Safe Area
@OptIn(ExperimentalMaterial3Api::class)
fun SafeAreaScreen() {
    val systemBars = with(
        LocalDensity.current
    ) {
        val insets = WindowInsets
            .systemBars
            .getAsPaddingValues()
        PaddingValues(
            top = insets.calculateTopPadding(),
            bottom = insets.calculateBottomPadding()
        )
    }
    Scaffold(
        contentWindowInsets = WindowInsets(
            top = systemBars.computeTopPadding(),
            bottom = systemBars.computeBottomPadding()
        )
    ) { innerPadding ->
        Column(
            modifier = Modifier
                .padding(innerPadding)
        ) {
            Text("Konten di Safe Area")
        }
    }
}

Di Jetpack Compose Scaffold secara otomatis memperhitungkan WindowInsets melalui parameter contentWindowInsets. InnerPadding diteruskan ke content dan diterapkan ke elemen internal. Column dengan pengubah padding(innerPadding) menjamin bahwa teks tidak akan masuk di bawah bilah sistem.

Kesalahan umum saat bekerja dengan Safe Area

Menurut analisis App Store Review oleh Apple (2025), lima kesalahan paling umum: mengabaikan Safe Area dalam orientasi horizontal, menggunakan jarak hardcoded alih-alih SafeAreaLayoutGuide, pemrosesan Safe Area yang salah di UIScrollView, jarak yang terlupakan dalam presentasi modal, dan kurangnya adaptasi untuk Dynamic Island. Jarak hardcoded (hardcoded 20px di atas) — kesalahan paling umum: di iPhone 14 Pro, 20px ini berubah menjadi 59px, dan konten terpotong.

• Mengabaikan orientasi horizontal — dalam orientasi horizontal Safe Area memiliki jarak yang berbeda: Home Indicator bergeser ke sisi kanan, dan jarak atas berkurang.
• Jarak hardcoded — nilai 20px atau 44px hanya cocok untuk iPhone lama tanpa potongan. Pada perangkat modern, jarak berbeda 2-3 kali lipat.
• ScrollView dan Safe Area — contentInsetAdjustmentBehavior di UIScrollView harus diatur ke .always, jika tidak konten akan tersembunyi di bawah bilah sistem.