Window Size Class — apa itu, kelas ukuran dan pengembangan

Apa itu Window Size Class?

Window Size Class adalah API platform Android, bagian dari pustaka Jetpack WindowManager, yang mengklasifikasikan ruang jendela aplikasi yang tersedia menjadi tiga kategori. Berbeda dengan pendekatan tradisional dengan kuantifikasi sumber daya (small/large/xlarge), Window Size Class menyediakan serangkaian nilai diskrit yang dapat diandalkan pengembang saat merancang antarmuka.

API ini muncul di Android 7.0 Nougat sebagai bagian dari dukungan untuk mode multi-jendela, tetapi penerapan aktif dimulai dengan Jetpack WindowManager 1.1 (2022). Google merekomendasikan Window Size Class sebagai alat utama untuk membangun tata letak adaptif alih-alih memeriksa lebar layar melalui Display.getSize().

Klasifikasi didasarkan pada lebar jendela dalam dp, bukan ukuran fisik atau kerapatan piksel. Ini berarti dua perangkat dengan resolusi berbeda tetapi lebar dp yang sama akan mendapatkan kelas yang sama — antarmuka akan dapat diprediksi sama.

Tiga kelas ukuran jendela Android

Compact — kelas untuk jendela dengan lebar hingga 600 dp. Ponsel dalam mode potret, sebagian besar ponsel lipat (Galaxy Z Flip) dalam keadaan tertutup. Antarmuka dibangun dalam satu kolom, navigasi melalui Bottom Navigation.

Medium — kelas untuk jendela dengan lebar 600–840 dp. Tablet dalam potret, ponsel dalam lanskap, perangkat lipat dalam keadaan setengah terbuka. Antarmuka menggunakan dua kolom — misalnya daftar di kiri dan detail di kanan. Navigation Rail menggantikan Bottom Navigation.

Expanded — kelas untuk jendela dengan lebar dari 840 dp. Tablet dalam lanskap, jendela desktop, perangkat lipat dalam keadaan terbuka. Antarmuka dapat menggunakan tiga panel atau lebih, Permanent Navigation Drawer, panel alat.

Di Material Design 3 untuk setiap kelas ditentukan komponen adaptif: Navigation Rail untuk Medium, Navigation Drawer untuk Expanded, Bottom Navigation untuk Compact. Pengembang tidak perlu memilih breakpoints — mereka sudah ditentukan oleh API.

Cara kerja Window Size Class

Window Size Class dihitung berdasarkan lebar jendela aplikasi saat ini dalam dp dengan mempertimbangkan elemen sistem — bilah status, panel navigasi, pembagian layar di Split Screen. API bereaksi terhadap perubahan konfigurasi jendela: rotasi perangkat, masuk ke mode multi-jendela, membuka perangkat lipat.

Untuk mendapatkan kelas, digunakan kelas WindowSizeClass dari pustaka androidx.window. Pengembang berlangganan Flow (Kotlin) atau LiveData (Java), yang secara otomatis memperbarui kelas setiap kali ukuran jendela berubah — tanpa penanganan manual onConfigurationChanged.

Klasifikasi terjadi dalam tiga langkah. Pertama — pengukuran lebar jendela saat ini dalam piksel. Kedua — konversi ke dp melalui DisplayMetrics.density. Ketiga — perbandingan nilai yang diperoleh dengan ambang batas: kurang dari 600 dp — Compact, 600–840 — Medium, dari 840 — Expanded.

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass()

when (windowSizeClass.windowWidthSizeClass) {
    WindowWidthSizeClass.COMPACT -> // lebar kompak
    WindowWidthSizeClass.MEDIUM  -> // lebar sedang
    WindowWidthSizeClass.EXPANDED -> // lebar diperluas
}

Selain lebar (windowWidthSizeClass), API menyediakan kelas untuk tinggi jendela (windowHeightSizeClass) — berguna untuk orientasi lanskap dan jendela desktop.

Window Size Class di Jetpack Compose

Di Jetpack Compose Window Size Class digunakan melalui fungsi currentWindowAdaptiveInfo(), yang mengembalikan WindowAdaptiveInfo dengan kelas lebar dan tinggi. Fungsi ini tidak hanya mempertimbangkan ukuran jendela, tetapi juga jenis input (keyboard, mouse, sentuh) — melalui WindowPosture dan WindowLayoutInfo.

Skenario umum — beralih antar tata letak tergantung pada kelas. Misalnya, di Compact ditampilkan BottomSheet dengan pilihan, di Medium — panel samping, di Expanded — Navigation Drawer permanen.

@Composable
fun AdaptiveNavigation(windowSizeClass: WindowWidthSizeClass) {
    when (windowSizeClass) {
        WindowWidthSizeClass.COMPACT -> BottomNavigation()
        WindowWidthSizeClass.MEDIUM  -> NavigationRail()
        WindowWidthSizeClass.EXPANDED -> NavigationDrawer()
    }
}

Di Material Design 3 komponen NavigationSuiteScaffold secara otomatis menyesuaikan dengan Window Size Class — pengembang tidak perlu menulis logika kondisional.

Window Size Class dan Material Design 3

Material Design 3 (Material You) sepenuhnya terintegrasi dengan Window Size Class. Sistem adaptive layout di Material 3 menentukan komponen navigasi mana yang digunakan di setiap kelas: BottomNavigation untuk Compact, NavigationRail untuk Medium, NavigationDrawer untuk Expanded.

Integrasi ini bekerja di tingkat Adaptive API, yang menggabungkan Window Size Class dengan sinyal lain — FoldState (perangkat lipat) dan WindowPosture (posisi layar). Adaptive API tersedia melalui pustaka material3-adaptive.

Material 3 menyediakan empat komponen adaptif tingkat tinggi: ListDetailPaneScaffold, SupportingPaneScaffold, NavigationSuiteScaffold dan AdaptiveSheet. Masing-masing mengubah perilakunya tergantung pada Window Size Class tanpa konfigurasi tambahan.

Keuntungan tata letak adaptif

Penggunaan Window Size Class memberikan tiga keuntungan utama dalam pengembangan mobile. Pertama — prediktabilitas: alih-alih ratusan kombinasi ukuran layar, pengembang bekerja dengan tiga kelas. Ini secara drastis mengurangi jumlah skenario pengujian dan bug terkait tata letak.

Kedua — adaptasi otomatis ke mode multi-jendela. Saat pengguna masuk ke Split Screen, lebar jendela berubah — Window Size Class segera dihitung ulang, dan antarmuka menyesuaikan. Tanpa API ini, aplikasi di layar terbagi menampilkan versi antarmuka ponsel yang dipotong.

Ketiga — konsistensi dengan Material Design 3. Google telah menanamkan Window Size Class ke dalam sistem komponen adaptif, sehingga antarmuka yang dibangun di Material 3 secara otomatis mengikuti rekomendasi Google untuk desain layar besar tanpa pekerjaan tambahan.