Lebih dari 300 juta perangkat layar besar Android, termasuk tablet, perangkat foldable, perangkat ChromeOS, layar mobil, dan TV, digunakan saat ini, dan banyak lagi datang terus-menerus. Untuk memberikan pengalaman pengguna yang optimal pada jumlah yang terus bertambah dan keberagaman perangkat layar besar—sebagai serta di ponsel—build standar aplikasi adaptif.
Apa itu aplikasi adaptif?
Tata letak revisi aplikasi adaptif berdasarkan perubahan dalam tampilan aplikasi, terutama perubahan ukuran jendela aplikasi. Namun aplikasi adaptif juga mengakomodasi perubahan postur perangkat foldable, seperti postur mode di atas meja atau buku, dan perubahan kepadatan layar serta ukuran font.
Alih-alih hanya meregangkan atau menyusutkan elemen UI sebagai respons terhadap ukuran jendela, aplikasi adaptif mengganti komponen tata letak dan menampilkan atau menyembunyikan konten. Misalnya, pada ponsel standar, aplikasi adaptif mungkin menampilkan bagian bawah bilah navigasi, tetapi pada layar besar, kolom samping navigasi. Di perangkat layar besar, aplikasi adaptif menampilkan lebih banyak konten, seperti tata letak daftar-detail dua panel; nyala layar kecil, lebih sedikit konten, baik dalam daftar maupun detailnya.
Di masa lalu yang berfokus pada ponsel, aplikasi berjalan dengan layar penuh. Saat ini, aplikasi berjalan di mode multi-aplikasi di jendela dengan ukuran sembarang yang tidak bergantung pada layar perangkat ukuran. Pengguna dapat mengubah ukuran jendela kapan saja. Jadi, bahkan pada satu perangkat , aplikasi harus adaptif.
Aplikasi adaptif terlihat bagus dan berfungsi dengan baik di perangkat apa pun dalam konfigurasi apa pun.
Mengapa membangun UI adaptif?
Pengguna berharap aplikasi Anda berfungsi dengan baik pada semua perangkat mereka dan kemampuan yang lebih baik di perangkat layar besar. Pengguna melakukan multitasking dalam mode multi-aplikasi untuk pengalaman aplikasi yang lebih baik dan peningkatan produktivitas.
Aplikasi yang hanya memiliki satu tugas di ponsel standar akan kehilangan pengguna yang terus bertambah basis kemungkinan yang beragam.
Google Play
Google Play menyediakan koleksi aplikasi khusus tablet dan perangkat foldable serta rekomendasi, yang memungkinkan pengguna menemukan aplikasi berkualitas tinggi.
Play mengurutkan aplikasi dan game yang dioptimalkan untuk perangkat layar besar lebih tinggi dari yang tidak dioptimalkan aplikasi. Peringkat didasarkan pada pedoman kualitas aplikasi perangkat layar besar. Lebih tinggi peringkat meningkatkan visibilitas dengan memungkinkan pengguna multi-perangkat melihat rating dan ulasan khusus perangkat layar besar di ponsel mereka.
Aplikasi yang tidak memenuhi standar kualitas 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.
Bangun aplikasi adaptif untuk memperluas visibilitas di Google Play dan memaksimalkan jumlah perangkat yang dapat mendownload aplikasi Anda.
Cara memulai
Memikirkan desain adaptif di semua fase pengembangan aplikasi mulai dari perencanaan hingga deployment. Memberikan informasi kepada desainer grafis tentang desain adaptif. Desain aplikasi Anda untuk adaptif, dan Anda akan membangun aplikasi yang dapat 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 Adaptif Compose Material 3
- Mendukung input di luar sentuhan
- Menguji di semua jenis perangkat
Class ukuran jendela
Dimensi jendela aplikasi dapat berbeda pada perangkat yang berbeda, atau pada saat yang sama dalam kasus perangkat foldable—bahkan saat aplikasi dalam mode layar penuh. Orientasi perangkat yang berbeda menghasilkan rasio aspek yang berbeda. Di beberapa mode multi-aplikasi, ukuran jendela aplikasi, rasio aspek, dan orientasi dapat berbeda dari layar perangkat.
Aplikasi adaptif menyederhanakan dan menggeneralisasi 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 dalam mode layar penuh.
Class ukuran jendela mengategorikan jendela aplikasi sebagai ringkas, sedang, atau diperluas berdasarkan lebar atau tinggi jendela.
Hitung WindowSizeClass aplikasi Anda menggunakan
Fungsi tingkat atas currentWindowAdaptiveInfo() dari Compose
Library Adaptif Material 3. Fungsi itu mengembalikan
sebuah {i>instance <i}
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, mungkin memiliki layar beranda, layar daftar, dan layar detail item. Tujuan menyiratkan bahwa setiap aktivitas mengisi layar perangkat.
Namun, pada layar perangkat yang cukup besar untuk mendukung perluasan lebar class ukuran jendela, beberapa layar aktivitas dapat muncul di layar secara bersamaan. Panel adalah istilah yang lebih tepat untuk tampilan konten setiap aktivitas.
Class ukuran jendela memungkinkan Anda menentukan berapa banyak panel konten yang akan ditampilkan tata letak multi-panel, seperti yang ditentukan dalam Desain Material.
Panel dapat dinavigasi. Di class ukuran jendela rapat dan sedang, aplikasi menampilkan panel tunggal; sehingga, navigasi ke tujuan mana pun akan menampilkan satu panel.
Di class ukuran jendela yang diperluas, aplikasi dapat menampilkan konten terkait dalam beberapa panel, seperti tata letak daftar‐detail. Navigasi ke salah satu tampilan panel tata letak dua panel. Jika ukuran jendela berubah menjadi rapat atau sedang, aplikasi adaptif hanya menampilkan satu panel, tujuan navigasi, baik daftar maupun secara mendetail.
|
|
|
Adaptif Compose Material 3
Jetpack Compose adalah pendekatan deklaratif yang modern untuk membangun aplikasi adaptif tanpa beban duplikasi dan pemeliharaan pada beberapa file tata letak.
Library Adaptif Compose Material 3 berisi composable yang mengelola class ukuran jendela, komponen navigasi, tata letak multi-panel, dan postur dan lokasi engsel perangkat foldable, misalnya:
NavigationSuiteScaffold: Otomatis beralih di antara menu navigasi dan kolom samping navigasi bergantung pada class ukuran jendela aplikasi dan postur perangkat.ListDetailPaneScaffold: Menerapkan kanonikal daftar-detail tata letak.Menyesuaikan tata letak dengan ukuran jendela aplikasi. Menyajikan daftar dan detail item daftar di panel berdampingan pada ukuran jendela yang diperluas tetapi hanya daftar atau detail tentang ukuran jendela yang rapat dan sedang Google Cloud Platform.
SupportingPaneScaffold: Menerapkan kanonikal panel pendukung tata letak.Menampilkan panel konten utama dan panel pendukung di jendela yang diperluas class ukuran, tetapi hanya panel konten utama pada ukuran jendela rapat dan sedang Google Cloud Platform.
Library Adaptif Compose Material 3 adalah dependensi yang harus dimiliki untuk mengembangkan aplikasi adaptif.
Konfigurasi dan kontinuitas
Aplikasi adaptif akan mempertahankan kontinuitas selama perubahan konfigurasi.
Perubahan konfigurasi terjadi saat jendela aplikasi diubah ukurannya, yaitu postur perubahan perangkat foldable, atau kepadatan layar atau font berubah.
Secara default, perubahan konfigurasi akan membuat ulang aktivitas aplikasi, dan semua aktivitas
status hilang. Untuk mempertahankan kontinuitas, aplikasi adaptif menyimpan status di
metode onSaveInstanceState() aktivitas atau dalam ViewModel.
Postur
Aplikasi adaptif merespons perubahan postur perangkat foldable. Postur termasuk postur mode di atas meja dan postur buku.
Antarmuka WindowInfoTracker di Jetpack WindowManager memungkinkan Anda untuk
dapatkan daftar objek DisplayFeature untuk perangkat. Di antara layar
fiturnya adalah FoldingFeature.State, yang menunjukkan apakah perangkat
terbuka sepenuhnya atau
setengah terbuka.
Library Adaptif Compose Material 3 menyediakan
Fungsi tingkat atas currentWindowAdaptiveInfo(), yang menampilkan
instance WindowAdaptiveInfo yang berisi windowPosture.
Input di luar sentuhan
Pengguna sering kali menghubungkan keyboard eksternal, trackpad, mouse, dan stilus ke perangkat perangkat layar. Periferal meningkatkan produktivitas pengguna, presisi input, ekspresi pribadi, dan aksesibilitas. Sebagian besar perangkat ChromeOS dilengkapi dengan {i>keyboard<i} dan {i>trackpad<i} bawaan.
Aplikasi adaptif mendukung perangkat input eksternal, tetapi banyak pekerjaan dilakukan untuk Anda dengan framework Android:
Jetpack Compose 1.7 dan yang lebih tinggi: Navigasi tab keyboard dan mouse atau klik, pilih, dan scroll trackpad didukung secara default.
Library Jetpack
androidx.compose.material3: Memungkinkan pengguna menulis ke dalam komponenTextFieldmenggunakan stilus.Keyboard Shortcuts Helper: Menjadikan platform Android dan keyboard aplikasi pintasan yang dapat ditemukan oleh pengguna. Publikasikan pintasan keyboard aplikasi Anda di Bantuan Pintasan Keyboard dengan mengganti Callback jendela
onProvideKeyboardShortcuts().
Untuk mendukung sepenuhnya faktor bentuk dalam semua ukuran, aplikasi adaptif mendukung input semua jenis datanya.
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. Menjalankan aplikasi 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 panduan berfokus pada perangkat layar besar, mereka kompatibel dengan semua ukuran layar.
Beberapa konfigurasi
Antarmuka DeviceConfigurationOverride di Compose 1.7 dan yang lebih baru
memungkinkan Anda untuk mengganti berbagai
aspek konfigurasi perangkat. API
menyimulasikan konfigurasi perangkat yang berbeda dengan cara yang dilokalkan untuk apa pun
yang ingin Anda uji. Misalnya, Anda dapat menguji beberapa,
ukuran UI arbitrer dalam satu rangkaian pengujian di satu perangkat atau
emulator.
Dengan fungsi ekstensi DeviceConfigurationOverride.then(), Anda dapat
uji beberapa parameter konfigurasi, seperti
ukuran {i>font<i}, lokal, tema, dan
ukuran tata letak secara bersamaan.
Screenshot sisi host
Pengujian screenshot sisi host adalah cara yang cepat dan skalabel untuk memverifikasi visualisasi tampilan tata letak aplikasi Anda. Gunakan screenshot sisi host untuk menguji UI Anda bagi berbagai ukuran tampilan.
Untuk informasi selengkapnya, lihat Pengujian Screenshot Pratinjau Compose.
Pratinjau Compose
Pratinjau Compose memungkinkan Anda memeriksa UI aplikasi dalam tampilan desain Android
di Studio. Pratinjau menggunakan anotasi seperti @PreviewScreenSizes,
@PreviewFontScale, dan @PreviewLightDark untuk memungkinkan Anda melihat composable
dalam berbagai konfigurasi. Anda bahkan dapat berinteraksi dengan pratinjau.
Android Studio juga menyoroti masalah kegunaan umum dalam pratinjau, seperti atau bidang 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: Mengemulasi 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 pengujian windowing bentuk bebas, pengarahan mouse, dan pintasan keyboard
Streaming perangkat jarak jauh
Terhubung ke perangkat Android jarak jauh yang dihosting di pusat data Google dengan aman dan jalankan aplikasi Anda di perangkat Pixel dan Samsung terbaru. Menginstal dan men-debug aplikasi, menjalankan Perintah ADB, serta putar dan lipat perangkat untuk memastikan aplikasi Anda berfungsi dengan baik pada berbagai jenis perangkat nyata.
Streaming perangkat jarak jauh terintegrasi ke dalam Android Studio. Untuk informasi selengkapnya, lihat Streaming Perangkat Android, yang didukung oleh Firebase.
Referensi lainnya
- Presentasi I/O: Membangun aplikasi Android adaptif