Membangun aplikasi adaptif

Lebih dari 300 juta perangkat layar besar Android, termasuk tablet, perangkat foldable, perangkat ChromeOS, layar mobil, dan TV, digunakan saat ini, dengan perangkat lainnya yang terus bermunculan. Untuk memberikan pengalaman pengguna yang optimal pada perangkat layar besar yang semakin banyak dan beragam—seperti juga pada ponsel standar—buat aplikasi adaptif.

Apa itu aplikasi adaptif?

Aplikasi adaptif mengubah tata letak berdasarkan perubahan pada tampilan aplikasi, terutama ukuran jendela aplikasi. Namun, aplikasi adaptif juga mengakomodasi perubahan postur perangkat foldable, seperti postur di atas meja atau buku, dan perubahan kepadatan layar dan ukuran font.

Aplikasi adaptif tidak hanya meregangkan atau menciutkan elemen UI sebagai respons terhadap berbagai ukuran jendela, tetapi juga mengganti komponen tata letak dan menampilkan atau menyembunyikan konten. Misalnya, di ponsel standar, aplikasi adaptif mungkin menampilkan menu navigasi bawah, tetapi di perangkat layar besar, kolom samping navigasi. Pada layar besar, aplikasi adaptif menampilkan lebih banyak konten, seperti tata letak daftar detail dua panel; pada layar kecil, lebih sedikit konten, baik daftar maupun detail.

Gambar 1. Aplikasi adaptif mengoptimalkan tata letak untuk berbagai ukuran jendela.

Di masa lalu yang cepat memudar dan berfokus pada ponsel, aplikasi berjalan dalam mode layar penuh. Saat ini, aplikasi berjalan dalam mode multi-aplikasi di jendela berukuran arbitrer, terlepas dari ukuran layar perangkat. Pengguna dapat mengubah ukuran jendela kapan saja. Jadi, meskipun pada satu jenis perangkat, aplikasi harus adaptif.

Aplikasi adaptif terlihat bagus dan berfungsi dengan baik di perangkat apa pun dalam konfigurasi apa pun.

Mengapa perlu membuat UI adaptif?

Pengguna mengharapkan aplikasi Anda berfungsi dengan sempurna di semua perangkat mereka dan memberikan kemampuan yang ditingkatkan di perangkat layar besar. Pengguna melakukan multitasking dalam mode multi-aplikasi untuk mendapatkan pengalaman aplikasi yang lebih baik dan produktivitas yang lebih baik.

Aplikasi yang terbatas pada tugas tunggal pada ponsel standar kehilangan basis pengguna yang berkembang dengan beragam kemungkinan.

Google Play

Google Play menyediakan koleksi dan rekomendasi aplikasi khusus tablet dan perangkat foldable, yang memungkinkan pengguna menemukan aplikasi berkualitas tinggi.

Play mengurutkan aplikasi dan game yang dioptimalkan untuk perangkat layar besar lebih tinggi dari aplikasi yang tidak dioptimalkan. Peringkat didasarkan pada pedoman kualitas aplikasi perangkat layar besar. Peringkat yang lebih tinggi akan meningkatkan visibilitas dengan memungkinkan pengguna multi-perangkat melihat rating dan ulasan khusus layar besar di ponsel mereka.

Aplikasi yang tidak memenuhi standar kualitas perangkat layar besar Play Store akan menampilkan peringatan di halaman detail aplikasi. Peringatan ini memberi tahu pengguna bahwa aplikasi mungkin tidak berperforma baik di perangkat layar besar mereka.

Gambar 2. Peringatan kualitas teknis di halaman detail aplikasi.

Build aplikasi adaptif untuk memperluas visibilitas di Google Play dan memaksimalkan jumlah perangkat yang dapat mendownload aplikasi Anda.

Cara memulai

Pikirkan desain adaptif dalam semua fase pengembangan aplikasi mulai dari perencanaan hingga deployment. Memberikan informasi kepada desainer grafis tentang desain adaptif. Rancang aplikasi Anda agar adaptif, dan Anda akan mem-build aplikasi yang dapat dikelola, dapat diperluas, serta siap untuk faktor bentuk dan mode windowing di masa mendatang.

Untuk membuat aplikasi adaptif yang mendukung semua ukuran dan konfigurasi tampilan, lakukan hal berikut:

  • Menggunakan class ukuran jendela untuk membuat keputusan tata letak
  • Membangun dengan library Adaptif Compose Material 3
  • Mendukung input di luar sentuh
  • Menguji di semua jenis perangkat

Class ukuran jendela

Dimensi jendela aplikasi dapat berbeda di perangkat yang berbeda—atau di perangkat yang sama dalam kasus perangkat foldable—meskipun aplikasi dalam layar penuh. Orientasi perangkat yang berbeda menghasilkan rasio aspek yang berbeda. Dalam mode multi-aplikasi, ukuran jendela aplikasi, rasio aspek, dan orientasi dapat berbeda dengan layar perangkat.

Aplikasi adaptif menyederhanakan dan menyederhanakan masalah penentuan dan pengelolaan ukuran jendela, rasio aspek, dan orientasi dengan hanya mempertimbangkan jendela aplikasi saat merender tata letak, yang juga berfungsi saat jendela aplikasi adalah layar penuh.

Class ukuran jendela mengategorikan jendela aplikasi sebagai rapat, sedang, atau diperluas berdasarkan lebar atau tinggi jendela.

Penggambaran class ukuran jendela lebar rapat, sedang, dan diluaskan.
Gambar 3. Class ukuran jendela berdasarkan lebar tampilan.

Hitung WindowSizeClass aplikasi Anda menggunakan fungsi tingkat atas currentWindowAdaptiveInfo() dari library Adaptif Material 3 Compose. Fungsi ini menampilkan instance WindowAdaptiveInfo, yang berisi windowSizeClass. Aplikasi Anda akan menerima update setiap kali class ukuran jendela berubah:

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
AdaptiveLayoutSnippets.kt

Panel konten

Tata letak aktivitas terkadang disebut sebagai layar. Misalnya, aplikasi Anda mungkin memiliki layar utama, layar daftar, dan layar detail item. Terminologi menyiratkan bahwa setiap aktivitas mengisi layar perangkat.

Namun, pada layar perangkat yang cukup besar untuk mendukung class ukuran jendela lebar yang diperluas, beberapa layar aktivitas dapat ditampilkan di layar secara bersamaan. Panel adalah istilah yang lebih tepat untuk tampilan konten dari setiap aktivitas.

Class ukuran jendela memungkinkan Anda menentukan jumlah panel konten yang akan ditampilkan dalam tata letak multipanel, seperti yang ditentukan dalam Desain Material.

Layar perangkat dibagi menjadi panel: satu panel dalam class ukuran jendela rapat dan sedang, dua panel dalam class ukuran jendela yang diperluas.
Gambar 4. Jumlah panel konten per class ukuran jendela.

Panel dapat dijelajahi. Pada class ukuran jendela rapat dan sedang, aplikasi menampilkan satu panel; sehingga, navigasi ke tujuan mana pun akan menampilkan satu panel.

Pada class ukuran jendela yang diperluas, aplikasi dapat menampilkan konten terkait dalam beberapa panel, seperti tata letak daftar-detail. Navigasi ke salah satu panel akan menampilkan tata letak dua panel. Jika ukuran jendela berubah menjadi rapat atau sedang, aplikasi adaptif hanya menampilkan satu panel, yaitu tujuan navigasi, baik daftar maupun detail.

Gambar 5. Tata letak daftar-detail dengan panel daftar sebagai target navigasi.
Gambar 6. Tata letak daftar-detail dengan panel detail sebagai target navigasi.

Adaptif Compose Material 3

Jetpack Compose adalah pendekatan deklaratif modern untuk mem-build aplikasi adaptif tanpa beban duplikasi dan pemeliharaan beberapa file tata letak.

Library Adaptif Compose Material 3 berisi composable yang mengelola class ukuran jendela, komponen navigasi, tata letak multipanel, serta postur perangkat foldable dan lokasi engsel, misalnya:

  • NavigationSuiteScaffold: Otomatis beralih antara menu navigasi dan kolom samping navigasi, bergantung pada class ukuran jendela aplikasi dan postur perangkat.

  • ListDetailPaneScaffold: Mengimplementasikan tata letak kanonis daftar-detail.

    Menyesuaikan tata letak dengan ukuran jendela aplikasi. Menyajikan daftar dan detail item daftar di panel berdampingan pada class ukuran jendela yang diperluas, tetapi hanya daftar atau detail tentang class ukuran jendela rapat dan sedang.

  • SupportingPaneScaffold: Mengimplementasikan tata letak kanonis panel pendukung.

    Menampilkan panel konten utama dan panel pendukung pada class ukuran jendela yang diperluas, tetapi hanya panel konten utama pada class ukuran jendela rapat dan sedang.

Library Compose Material 3 Adaptive adalah dependensi yang harus dimiliki untuk mengembangkan aplikasi adaptif.

Konfigurasi dan kontinuitas

Aplikasi adaptif mempertahankan kontinuitas selama perubahan konfigurasi.

Perubahan konfigurasi terjadi saat ukuran jendela aplikasi diubah, postur perangkat foldable berubah, atau kepadatan layar atau font berubah.

Secara default, perubahan konfigurasi akan membuat ulang aktivitas aplikasi, dan semua status aktivitas akan hilang. Untuk mempertahankan kontinuitas, aplikasi adaptif menyimpan status dalam metode onSaveInstanceState() aktivitas atau dalam ViewModel.

Postur

Aplikasi adaptif merespons perubahan postur perangkat foldable. Postur mencakup postur mode di atas meja dan postur buku.

Gambar 7. Perangkat foldable dalam postur mode di atas meja.

Antarmuka WindowInfoTracker di Jetpack WindowManager memungkinkan Anda mendapatkan daftar objek DisplayFeature untuk perangkat. Di antara fitur layar adalah FoldingFeature.State, yang menunjukkan apakah perangkat terbuka sepenuhnya atau setengah terbuka.

Library Compose Material 3 Adaptive menyediakan fungsi tingkat atas currentWindowAdaptiveInfo(), yang menampilkan instance WindowAdaptiveInfo yang berisi windowPosture.

Input di luar sentuhan

Pengguna sering menghubungkan keyboard, trackpad, mouse, dan stilus eksternal ke perangkat layar besar. Periferal meningkatkan produktivitas pengguna, presisi input, ekspresi pribadi, dan aksesibilitas. Sebagian besar perangkat ChromeOS dilengkapi dengan keyboard dan trackpad bawaan.

Aplikasi adaptif mendukung perangkat input eksternal, tetapi sebagian besar pekerjaan dilakukan untuk Anda oleh framework Android:

  • Jetpack Compose 1.7 dan yang lebih baru: Navigasi tab keyboard dan klik, pilih, dan scroll mouse atau trackpad didukung secara default.

  • Library androidx.compose.material3 Jetpack: Memungkinkan pengguna menulis ke dalam komponen TextField menggunakan stilus.

  • Keyboard Shortcuts Helper: Membuat pintasan keyboard platform dan aplikasi Android dapat ditemukan oleh pengguna. Publikasikan pintasan keyboard aplikasi Anda di Keyboard Shortcuts Helper dengan mengganti callback jendela onProvideKeyboardShortcuts().

Untuk mendukung sepenuhnya faktor bentuk dari semua ukuran, aplikasi adaptif mendukung input dari semua jenis.

Cara menguji aplikasi adaptif

Uji berbagai ukuran layar dan jendela serta konfigurasi perangkat yang berbeda. Gunakan screenshot sisi host dan pratinjau Compose untuk memeriksa tata letak aplikasi Anda. Jalankan aplikasi Anda di emulator Android Studio dan perangkat Android jarak jauh yang dihosting di pusat data Google.

Pedoman kualitas aplikasi perangkat layar besar

Pedoman kualitas aplikasi perangkat layar besar memastikan aplikasi adaptif Anda berfungsi dengan baik di tablet, perangkat foldable, dan perangkat ChromeOS. Panduan ini mencakup pengujian yang memungkinkan Anda memverifikasi fungsi aplikasi untuk perjalanan penting pengguna. Meskipun berfokus pada perangkat layar besar, pedoman ini kompatibel dengan semua ukuran layar.

Beberapa konfigurasi

Antarmuka DeviceConfigurationOverride di Compose 1.7 dan yang lebih baru memungkinkan Anda mengganti berbagai aspek konfigurasi perangkat. API menyimulasikan berbagai konfigurasi perangkat dengan cara yang dilokalkan untuk konten composable apa pun yang ingin Anda uji. Misalnya, Anda dapat menguji beberapa ukuran UI arbitrer dalam satu operasi rangkaian pengujian di satu perangkat atau emulator.

Dengan fungsi ekstensi DeviceConfigurationOverride.then(), Anda dapat menguji beberapa parameter konfigurasi, seperti ukuran font, lokalitas, tema, dan ukuran tata letak, secara bersamaan.

Screenshot sisi host

Pengujian screenshot sisi host adalah cara yang cepat dan skalabel untuk memverifikasi tampilan visual tata letak aplikasi Anda. Gunakan screenshot sisi host guna menguji UI untuk berbagai ukuran layar.

Untuk informasi selengkapnya, lihat Pengujian Screenshot Pratinjau Compose.

Pratinjau Compose

Pratinjau Compose memungkinkan Anda memeriksa UI aplikasi di tampilan desain Android Studio. Pratinjau menggunakan anotasi, seperti @PreviewScreenSizes, @PreviewFontScale, dan @PreviewLightDark agar Anda dapat melihat konten composable dalam berbagai konfigurasi. Anda bahkan dapat berinteraksi dengan pratinjau.

Android Studio juga menandai masalah kegunaan umum dalam pratinjau, seperti tombol atau kolom teks yang terlalu lebar.

Untuk mengetahui informasi selengkapnya, lihat Melihat pratinjau UI dengan pratinjau composable.

Emulator

Android Studio menawarkan berbagai emulator untuk menguji berbagai ukuran tata letak:

  • Emulator yang dapat diubah ukurannya: Mengemulasikan ponsel, tablet, atau perangkat foldable dan memungkinkan Anda beralih di antara perangkat tersebut dengan cepat
  • Emulator Pixel Fold: Mengemulasikan ponsel foldable layar besar Pixel Fold
  • Emulator Pixel Tablet: Mengemulasikan perangkat layar besar Pixel Tablet
  • Emulator desktop: Memungkinkan pengujian jendela bentuk bebas, pengarahan kursor mouse, dan pintasan keyboard

Streaming perangkat jarak jauh

Terhubung dengan aman ke perangkat Android jarak jauh yang dihosting di pusat data Google dan jalankan aplikasi Anda di perangkat Pixel dan Samsung terbaru. Instal dan debug aplikasi, jalankan perintah ADB, serta putar dan lipat perangkat untuk memastikan aplikasi Anda berfungsi dengan baik di berbagai perangkat sungguhan.

Streaming perangkat jarak jauh terintegrasi ke dalam Android Studio. Untuk mengetahui informasi selengkapnya, lihat Streaming Perangkat Android, yang didukung oleh Firebase.

Referensi lainnya