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 yang dimaksud dengan 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 perangkat layar besar, aplikasi adaptif menampilkan lebih banyak konten, seperti tata letak detail daftar dua panel; pada layar kecil, lebih sedikit konten, baik daftar maupun detail.
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 pengalaman aplikasi yang ditingkatkan dan produktivitas yang lebih tinggi.
Aplikasi yang dibatasi untuk tugas tunggal di ponsel standar akan kehilangan basis pengguna yang berkembang dengan berbagai kemungkinan.
Google Play
Google Play menyediakan koleksi dan rekomendasi aplikasi khusus tablet dan perangkat foldable, yang memungkinkan pengguna menemukan aplikasi berkualitas tinggi.
Play memberi peringkat lebih tinggi pada aplikasi dan game yang dioptimalkan untuk layar besar daripada 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.
Build aplikasi adaptif untuk memperluas visibilitas di Google Play dan memaksimalkan jumlah perangkat yang dapat mendownload aplikasi Anda.
Cara memulai
Pikirkan desain adaptif di semua fase pengembangan aplikasi, mulai dari perencanaan hingga deployment. Memberi tahu desainer grafis tentang desain adaptif. Desain aplikasi Anda agar adaptif, dan Anda akan mem-build aplikasi yang dapat dikelola, diperluas, dan siap untuk faktor bentuk dan mode jendela mendatang.
Untuk membuat aplikasi adaptif yang mendukung semua ukuran dan konfigurasi tampilan, lakukan hal berikut:
- Menggunakan class ukuran jendela untuk membuat keputusan tata letak
- Mem-build 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 jika perangkat foldable—meskipun aplikasi dalam mode 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.
Hitung WindowSizeClass aplikasi Anda menggunakan
fungsi tingkat teratas currentWindowAdaptiveInfo() dari library Adaptive
Compose Material 3. Fungsi ini menampilkan instance
WindowAdaptiveInfo, yang berisi windowSizeClass. Aplikasi Anda
akan menerima update setiap kali class ukuran jendela berubah:
val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
Panel konten
Tata letak aktivitas terkadang disebut sebagai layar. Misalnya, aplikasi Anda mungkin memiliki layar utama, layar daftar, dan layar detail item. Terminologi ini menyiratkan bahwa setiap aktivitas mengisi layar perangkat.
Namun, di 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.
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 di 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.
|
|
|
Compose Material 3 Adaptif
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 detail daftar.Menyesuaikan tata letak dengan ukuran jendela aplikasi. Menampilkan daftar dan detail item daftar di panel berdampingan pada class ukuran jendela yang diperluas, tetapi hanya daftar atau detail pada 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.
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 sentuh
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.material3Jetpack: Memungkinkan pengguna menulis ke dalam komponenTextFieldmenggunakan stilus.Keyboard Shortcuts Helper: Membuat pintasan keyboard platform dan aplikasi Android dapat ditemukan oleh pengguna. Publikasikan pintasan keyboard aplikasi Anda di Bantuan Pintasan Keyboard dengan mengganti callback jendela
onProvideKeyboardShortcuts().
Untuk sepenuhnya mendukung faktor bentuk dari semua ukuran, aplikasi adaptif mendukung input dari semua jenis.
Cara menguji aplikasi adaptif
Uji berbagai ukuran layar dan jendela serta berbagai konfigurasi perangkat. 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
Panduan 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 panduan ini berfokus pada perangkat layar besar, panduan ini kompatibel dengan semua ukuran layar.
Beberapa konfigurasi
Antarmuka DeviceConfigurationOverride di Compose 1.7 dan yang lebih tinggi
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, semuanya secara bersamaan.
Screenshot sisi host
Pengujian screenshot sisi host adalah cara cepat dan skalabel untuk memverifikasi tampilan visual tata letak aplikasi Anda. Gunakan screenshot sisi host untuk menguji UI Anda pada 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 untuk memungkinkan Anda melihat konten
composable dalam berbagai konfigurasi. Anda bahkan dapat berinteraksi dengan pratinjau.
Android Studio juga menyoroti masalah kegunaan umum dalam pratinjau, seperti tombol atau kolom teks yang terlalu lebar.
Untuk 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
- Presentasi I/O: Mem-build aplikasi Android adaptif