Lebih dari 300 juta perangkat Android layar besar, termasuk tablet, perangkat foldable, Googlebook, perangkat ChromeOS, layar mobil, dan TV, sedang digunakan saat ini, dan jumlahnya terus bertambah. Untuk memberikan pengalaman pengguna yang optimal di berbagai perangkat layar besar yang jumlah dan jenisnya terus bertambah—serta di 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, serta perubahan kepadatan layar dan ukuran font.
Alih-alih hanya meregangkan atau menyusutkan elemen UI sebagai respons terhadap berbagai ukuran jendela, aplikasi adaptif 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, aplikasi tersebut menampilkan kolom samping navigasi. Di perangkat layar besar, aplikasi adaptif menampilkan lebih banyak konten, seperti tata letak daftar-detail dua panel; di perangkat layar kecil, lebih sedikit konten, baik daftar maupun detail.
Sebelumnya, aplikasi biasanya berjalan dalam 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, bahkan 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 lebih baik dan peningkatan produktivitas.
Aplikasi yang terbatas pada single-tasking di ponsel standar akan kehilangan basis pengguna yang terus 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 memberi peringkat lebih tinggi untuk aplikasi dan game yang dioptimalkan untuk perangkat layar besar daripada aplikasi yang tidak dioptimalkan. Play mendasarkan peringkat pada pedoman kualitas aplikasi perangkat layar besar. Peringkat yang lebih tinggi meningkatkan visibilitas dengan memungkinkan pengguna multiperangkat melihat rating dan ulasan khusus layar besar di ponsel mereka.
Aplikasi yang tidak memenuhi standar kualitas perangkat layar besar Google 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.
Bangun 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. Menginformasikan desain adaptif kepada desainer grafis. Desain aplikasi Anda agar adaptif, dan Anda akan membangun aplikasi yang mudah dikelola, dapat diperluas, dan siap untuk faktor bentuk dan mode jendela di masa mendatang.
Untuk membuat aplikasi adaptif yang mendukung semua ukuran dan konfigurasi layar, lakukan hal berikut:
- Menggunakan class ukuran jendela untuk membuat keputusan tata letak
- Membangun dengan library Compose Material 3 Adaptive
- Mendukung input selain sentuhan
- Menguji di semua jenis perangkat
Keterampilan Android
Lihat di GitHubMembuat aplikasi Anda adaptif
adaptive untuk mengupdate UI aplikasi Anda agar dapat beradaptasi dengan berbagai perangkat dan layar Android.android skills add adaptiveClass ukuran jendela
Dimensi jendela aplikasi dapat berbeda di berbagai perangkat—atau di perangkat yang sama dalam kasus perangkat foldable—meskipun aplikasi dalam mode layar penuh. Orientasi perangkat yang berbeda menghasilkan rasio aspek yang berbeda. Dalam mode multi-aplikasi, ukuran, rasio aspek, dan orientasi jendela aplikasi dapat berbeda dari layar perangkat.
Aplikasi adaptif menyederhanakan dan menggeneralisasi masalah penentuan dan pengelolaan ukuran, rasio aspek, dan orientasi jendela dengan hanya mempertimbangkan jendela aplikasi saat merender tata letak, yang juga berfungsi saat jendela aplikasi dalam mode 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 atas currentWindowAdaptiveInfo() dari library Adaptif Compose
Material 3. Fungsi ini menampilkan instance
WindowAdaptiveInfo, yang berisi windowSizeClass. Aplikasi Anda
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 setiap aktivitas.
Class ukuran jendela memungkinkan Anda menentukan jumlah panel konten yang akan ditampilkan dalam tata letak multi-panel, 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, tujuan navigasi, baik daftar maupun detail.
|
|
|
Compose Material 3 Adaptive
Jetpack Compose adalah pendekatan deklaratif modern untuk membangun aplikasi adaptif tanpa beban duplikasi dan pemeliharaan beberapa file tata letak.
Library Compose Material 3 Adaptive berisi composable yang mengelola class ukuran jendela, komponen navigasi, tata letak multi-panel, dan postur perangkat foldable serta 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. 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: Menerapkan tata letak kanonis panel pendukung.Menampilkan panel konten utama dan panel pendukung di class ukuran jendela yang diperluas, tetapi hanya panel konten utama di class ukuran jendela rapat dan sedang.
Library Compose Material 3 Adaptive adalah dependensi utama 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 di atas meja dan postur buku.
Antarmuka WindowInfoTracker di Jetpack WindowManager memungkinkan Anda
mendapatkan daftar objek DisplayFeature untuk perangkat. Di antara fitur
tampilan adalah FoldingFeature.State, yang menunjukkan apakah perangkat
terbuka sepenuhnya atau setengah.
Library Compose Material 3 Adaptive menyediakan
fungsi tingkat atas currentWindowAdaptiveInfo(), yang menampilkan
instance WindowAdaptiveInfo yang berisi windowPosture.
Input selain sentuhan
Pengguna sering kali 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 framework Android melakukan sebagian besar pekerjaan untuk Anda:
Jetpack Compose 1.7 dan yang lebih baru: Navigasi tab keyboard serta klik, pilih, dan scroll mouse atau trackpad didukung secara default.
Library
androidx.compose.material3Jetpack: Memungkinkan pengguna menulis ke komponenTextFieldapa pun menggunakan stilus.Bantuan Pintasan Keyboard: 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 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 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
Pedoman kualitas aplikasi perangkat layar besar membantu Anda memverifikasi bahwa aplikasi adaptif 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 tinggi
memungkinkan Anda mengganti berbagai aspek konfigurasi perangkat. API
ini menyimulasikan berbagai konfigurasi perangkat secara lokal untuk konten composable
apa pun yang ingin Anda uji. Misalnya, Anda dapat menguji beberapa
ukuran UI arbitrer dalam satu operasi suite 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, sekaligus.
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 untuk menguji UI Anda untuk berbagai ukuran layar.
Untuk mengetahui 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 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 antaranya dengan cepat
- Emulator Pixel Fold: Mengemulasi ponsel foldable layar besar Pixel Fold
- Emulator Pixel Tablet: Mengemulasi perangkat layar besar Pixel Tablet
- Emulator desktop: Memungkinkan Anda menguji jendela bentuk bebas, pengarahan kursor mouse, dan pintasan keyboard
Streaming perangkat jarak jauh
Hubungkan 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 memverifikasi bahwa 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: Membangun aplikasi Android adaptif