Mulai menggunakan aplikasi adaptif

Lebih dari 300 juta perangkat Android layar besar, termasuk tablet, perangkat foldable, perangkat ChromeOS, layar mobil, dan TV, digunakan saat ini, dan jumlahnya terus bertambah. Untuk memberikan pengalaman pengguna yang optimal pada perangkat layar besar yang jumlah dan keragamannya terus bertambah —serta 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 mode di atas meja atau postur buku, serta perubahan kepadatan layar dan ukuran font.

Aplikasi adaptif tidak hanya meregangkan atau mengecilkan elemen UI sebagai respons terhadap ukuran jendela yang berbeda, 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, aplikasi adaptif mungkin menampilkan kolom samping navigasi. Di perangkat layar besar, aplikasi adaptif menampilkan lebih banyak konten, seperti tata letak dua panel, daftar-detail; di layar kecil, aplikasi adaptif menampilkan lebih sedikit konten, baik daftar maupun detail.

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

Dahulu, aplikasi biasanya berjalan dalam mode layar penuh. Saat ini, aplikasi berjalan dalam mode multi-aplikasi di jendela berukuran arbitrer yang independen 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 mana pun dalam konfigurasi apa pun.

Mengapa harus membuat UI adaptif?

Pengguna mengharapkan aplikasi Anda berfungsi dengan lancar 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 peningkatan produktivitas.

Aplikasi yang terbatas pada satu tugas di ponsel standar akan kehilangan basis pengguna yang terus bertambah 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 aplikasi dan game yang dioptimalkan untuk perangkat layar besar lebih tinggi daripada aplikasi yang tidak dioptimalkan. Play mendasarkan peringkat pada pedoman kualitas aplikasi perangkat layar besar. Peringkat yang lebih tinggi meningkatkan kemampuan penemuan dengan memungkinkan pengguna multi-perangkat melihat rating dan ulasan khusus perangkat layar besar di ponsel mereka.

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

Listingan Play Store untuk aplikasi dengan peringatan yang bertuliskan 'Mungkin tidak dioptimalkan untuk perangkat Anda'.
Gambar 2. Peringatan kualitas teknis di halaman detail aplikasi.

Buat aplikasi adaptif untuk memperluas kemampuan penemuan 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. Beri tahu desainer grafis tentang desain adaptif. Desain aplikasi Anda agar adaptif, dan Anda akan membuat 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:

  • Gunakan class ukuran jendela untuk membuat keputusan tata letak
  • Buat dengan library Compose Material 3 Adaptive
  • Dukung input selain sentuhan
  • Uji 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 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 ukuran 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 compact (rapat), medium (sedang), atau expanded (diperluas) berdasarkan lebar atau tinggi jendela.

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

Hitung WindowSizeClass aplikasi Anda menggunakan fungsi tingkat atas currentWindowAdaptiveInfo() dari library Compose Material 3 Adaptive. 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 aktivitas individual.

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

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

Panel dapat dinavigasi. 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, 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.

Compose Material 3 Adaptive

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

Library Compose Material 3 Adaptive berisi composable yang mengelola class ukuran jendela, komponen navigasi, tata letak multi-panel, serta postur dan lokasi engsel perangkat foldable, 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 dalam 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 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 aktivitas onSaveInstanceState() atau dalam ViewModel.

Postur

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

Ponsel foldable dalam mode di atas meja, dengan bagian bawah layar berada di permukaan dan bagian atas layar tegak.
Gambar 7. Perangkat foldable dalam postur mode di atas meja.

Antarmuka WindowInfoTracker di Jetpack WindowManager memungkinkan Anda untuk 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. Perangkat 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 tinggi: Navigasi tab keyboard dan klik mouse atau trackpad, pilih, dan scroll didukung secara default.

  • Library Jetpack androidx.compose.material3: Memungkinkan pengguna menulis ke komponen TextField mana pun 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 onProvideKeyboardShortcuts() callback jendela.

Untuk mendukung sepenuhnya faktor bentuk semua ukuran, aplikasi adaptif mendukung input 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 Anda berfungsi dengan baik di tablet, perangkat foldable, dan perangkat ChromeOS. Pedoman ini mencakup pengujian yang memungkinkan Anda memverifikasi fungsi aplikasi untuk perjalanan pengguna yang penting. Meskipun pedoman ini 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 konfigurasi perangkat yang berbeda secara lokal untuk konten composable apa pun yang ingin Anda uji. Misalnya, Anda dapat menguji beberapa ukuran UI arbitrer dalam satu kali menjalankan 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 cepat dan dapat diskalakan 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: Mengemulasi ponsel, tablet, atau perangkat foldable dan memungkinkan Anda beralih di antara perangkat tersebut 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, kursor mouse, dan pintasan keyboard

Streaming perangkat jarak jauh

Hubungkan secara 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 sebenarnya.

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

Referensi lainnya