Aplikasi Android harus mendukung ekosistem faktor bentuk perangkat yang terus berkembang. UI aplikasi harus responsif agar sesuai dengan berbagai ukuran layar serta bermacam orientasi dan status perangkat.
UI responsif berorientasi pada prinsip fleksibilitas dan kontinuitas.
Fleksibilitas mengacu pada tata letak yang mengoptimalkan penggunaan ruang yang tersedia dan menyesuaikan saat ruang yang tersedia berubah. Penyesuaian dapat terjadi dalam berbagai bentuk: seperti memperbesar ukuran tampilan tunggal, mengubah posisi tampilan agar berada di lokasi yang lebih mudah diakses, menampilkan atau menyembunyikan tampilan tambahan, atau kombinasi dari semua itu.
Kontinuitas mengacu pada pengalaman pengguna yang lancar saat melakukan transisi dari satu ukuran jendela ke ukuran lain. Pengalaman apa pun yang melibatkan pengguna harus berlanjut tanpa gangguan. Pengguna harus mengamankan tempat atau data mereka karena perubahan ukuran dapat diikuti penghancuran dan pembuatan ulang seluruh hierarki tampilan.
Hal yang perlu dihindari
Hindari penggunaan nilai fisik dan hardware untuk membuat keputusan tata letak. Anda mungkin ingin membuat keputusan berdasarkan nilai tetap, tetapi di banyak situasi, nilai ini tidak berguna dalam menentukan ruang kerja UI Anda.
Aplikasi mungkin mengalami perubahan ukuran jendela saat berjalan dalam mode multi-aplikasi, jendela picture-in-picture, atau jendela bentuk bebas seperti ChromeOS. Bahkan bisa ada lebih dari satu layar fisik, seperti dengan perangkat foldable atau perangkat yang memiliki beberapa layar. Dalam semua kasus ini, ukuran layar fisik tidak relevan untuk memutuskan cara menampilkan konten.
![Beberapa perangkat menampilkan jendela aplikasi dengan berbagai ukuran.](https://developer.android.google.cn/static/images/guide/topics/large-screens/responsive-layouts/multiple_window_sizes.png?authuser=0000&hl=id)
Untuk alasan yang sama, jangan mengunci aplikasi menggunakan orientasi atau rasio aspek tertentu. Meskipun perangkat tersebut mungkin menggunakan orientasi tertentu, aplikasi Anda mungkin menggunakan orientasi lain berdasarkan ukuran jendelanya. Misalnya, di tablet dalam mode lanskap saat menggunakan mode multi-aplikasi, aplikasi dapat berada dalam mode potret karena lebih tinggi daripada lebarnya.
Selain itu, jangan mencoba menentukan jenis perangkat itu, apakah ponsel atau tablet. Syarat suatu perangkat dapat digolongkan sebagai tablet agak subjektif karena hanya didasarkan pada ukuran, rasio aspek, atau kombinasi ukuran dan rasio aspek tertentu. Saat faktor bentuk baru muncul, asumsi tersebut dapat berubah, dan perbedaannya menjadi tidak ada artinya lagi.
Daripada harus mencoba salah satu strategi sebelumnya, gunakan class ukuran jendela dan titik henti sementara.
Class titik henti sementara dan ukuran jendela
Bagian layar sebenarnya yang diperuntukkan untuk aplikasi adalah jendela aplikasi. Jendela aplikasi ini mungkin memenuhi seluruh atau sebagian layar. Jadi, gunakan ukuran jendela saat membuat keputusan penting terkait tata letak aplikasi.
Saat mendesain untuk beberapa faktor bentuk, temukan standar minimum dengan keputusan penting ini berfungsi untuk tujuan yang berbeda-beda. Untuk mencapai tujuan ini, petak tata letak responsif Desain Material menyediakan titik henti lebar dan tinggi sementara, yang memungkinkan Anda memetakan ukuran mentah menjadi grup terpisah dan standar yang disebut ukuran jendela. Scroll vertikal yang ada di mana-mana mengakibatkan sebagian besar aplikasi memperhitungkan class ukuran lebar sehingga sebagian besar aplikasi dapat dioptimalkan untuk semua ukuran layar dengan menangani beberapa titik henti sementara. (Untuk informasi class ukuran jendela selengkapnya, lihat Class ukuran jendela.)
Elemen UI persisten
Pedoman tata letak Desain Material menentukan region untuk panel aplikasi, navigasi, dan konten. Biasanya, dua region pertama adalah elemen UI persisten pada (atau sangat dekat) root hierarki tampilan. Perlu diperhatikan bahwa "persisten" tidak selalu berarti tampilan akan terus terlihat, tetapi maksudnya adalah tampilan tersebut tetap berada di tempatnya, sementara tampilan konten lain mungkin berpindah atau berubah. Misalnya, elemen navigasi dapat berada dalam panel geser yang ada di luar layar, tetapi panel samping selalu ada di sana.
Elemen persisten dapat bersifat responsif, dan biasanya menempati lebar penuh atau tinggi penuh jendela. Jadi, sebaiknya Anda menggunakan class ukuran untuk memutuskan tempat meletakkannya. Class ukuran tersebut menandai ruang yang tersisa untuk konten. Dalam cuplikan berikut, aktivitas menggunakan panel bawah untuk layar rapat dan panel aplikasi atas untuk ukuran layar yang lebih besar. Tata letak yang memenuhi syarat menggunakan titik henti sementara lebar seperti yang dijelaskan sebelumnya.
<!-- res/layout/main_activity.xml -->
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- content view(s) -->
<com.google.android.material.bottomappbar.BottomAppBar
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
... />
</androidx.constraintlayout.widget.ConstraintLayout>
<!-- res/layout-w600dp/main_activity.xml -->
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
... />
<!-- content view(s) -->
</androidx.constraintlayout.widget.ConstraintLayout>
Konten
Setelah Anda menempatkan elemen UI persisten, gunakan ruang yang tersisa
untuk konten, seperti menggunakan NavHostFragment
dengan grafik navigasi
aplikasi. Lihat
Navigasi untuk UI yang responsif
sebagai pertimbangan tambahan.
Memastikan semua data tersedia untuk berbagai ukuran
Sebagian besar framework aplikasi saat ini menggunakan model data terpisah dari komponen Android yang berkontribusi pada UI (Activity, Fragment, dan View). Dengan Jetpack, peran ini biasanya dijalankan oleh ViewModel yang memiliki manfaat tambahan untuk bertahan di seluruh perubahan konfigurasi (lihat Ringkasan ViewModel untuk mengetahui informasi selengkapnya).
Saat menerapkan tata letak yang beradaptasi dengan berbagai ukuran, Anda mungkin ingin menggunakan model data lain berdasarkan ukuran saat ini. Namun, hal ini bertentangan dengan prinsip aliran data searah. Data harus mengalir ke bawah ke View, dan peristiwa, seperti interaksi pengguna, harus mengalir ke atas. Pembuatan dependensi di arah lain, tempat model data bergantung pada konfigurasi lapisan UI, secara drastis akan mempersulit proses ini. Jika ukuran aplikasi berubah, Anda harus memperhitungkan konversi dari satu model data ke model data lainnya.
Sebagai gantinya, biarkan model data mengakomodasi class ukuran terbesar, lalu Anda dapat secara selektif menampilkan, menyembunyikan, atau mengubah posisi konten di UI untuk beradaptasi dengan class ukuran saat ini. Di bawah ini terdapat beberapa strategi yang dapat Anda gunakan untuk menentukan perilaku tata letak saat bertransisi antar-class ukuran.
Meluaskan konten
Tata letak kanonis: Feed
Ruang yang diluaskan dapat menjadi peluang untuk memperbesar dan memformat ulang konten agar lebih mudah diakses.
Perbesar koleksi. Banyak aplikasi menampilkan kumpulan item dalam container scroll, seperti RecyclerView
atau ScrollView
. Mengaktifkan container menjadi lebih besar akan otomatis menampilkan lebih banyak konten.
Namun, berhati-hatilah agar konten dalam container tidak
terlalu terbentang atau terdistorsi. Misalnya, dengan RecyclerView
, Anda sebaiknya
menggunakan pengelola tata letak lain seperti
GridLayoutManager
,
StaggeredGridLayoutManager
,
atau
FlexboxLayout
jika lebarnya tidak ringkas.
![Perangkat dilipat dan dibentangkan yang menunjukkan cara berbagai pengelola tata letak menata letak aplikasi secara berbeda berdasarkan class ukuran lebar.](https://developer.android.google.cn/static/images/guide/topics/large-screens/responsive-layouts/different_layout_managers.png?authuser=0000&hl=id)
Setiap item juga dapat menggunakan berbagai ukuran atau bentuk untuk menampilkan lebih banyak konten dan membedakan batas item dengan lebih mudah.
Fokus pada elemen utama. Jika tata letak memiliki titik fokus tertentu, seperti gambar atau video, luaskan jendela tersebut saat ukuran jendela aplikasi bertambah untuk mempertahankan perhatian pengguna. Elemen pendukung lainnya dapat diatur ulang di sekitar atau di bawah tampilan utama.
Ada banyak cara untuk membuat tata letak seperti itu, tetapi ConstraintLayout
yang paling cocok untuk tujuan ini karena menyediakan banyak cara untuk membatasi ukuran tampilan turunan, seperti berdasarkan persentase atau menerapkan rasio aspek, dan untuk memosisikan turunannya sesuai dengan turunannya sendiri atau turunan lainnya. Pelajari semua kemampuan ini lebih lanjut dalam
Membangun UI yang Responsif dengan ConstraintLayout.
Tampilkan konten yang dapat diciutkan secara default. Jika ada ruang yang tersedia, tampilkan konten yang hanya dapat diakses melalui interaksi pengguna tambahan seperti mengetuk, men-scroll, atau gestur. Misalnya, konten yang muncul di antarmuka tab dalam keadaan ringkas dapat disusun ulang menjadi kolom atau daftar jika ada ruang lebih.
Perluas margin. Jika ukuran ruang sangat besar sehingga Anda tidak dapat menemukan kesesuaian yang menarik bahkan setelah menggunakan semua konten, perluas margin tata letak, sehingga konten tetap berada di tengah dan setiap tampilan memiliki ukuran alami dan spasi di antara keduanya.
Atau, komponen layar penuh dapat berubah menjadi UI dialog mengambang. Opsi ini sangat cocok jika komponen tersebut memerlukan fokus eksklusif untuk menjalankan tugas pengguna langsung, seperti menulis email atau membuat acara kalender.
![Ponsel standar yang menampilkan dialog layar penuh, dan ponsel foldable yang membentang dan menampilkan dialog yang sama sebagai jendela mengambang.](https://developer.android.google.cn/static/images/guide/topics/large-screens/responsive-layouts/dialog_small_and_large_screens.png?authuser=0000&hl=id)
Menambahkan konten
Tata letak kanonis: Panel pendukung, Tampilan Daftar-detail
Gunakan panel pendukung. Panel pendukung menyajikan konten tambahan atau tindakan kontekstual yang terkait dengan konten utama, seperti komentar dalam dokumen atau item di playlist. Biasanya panel ini akan menggunakan sepertiga bagian bawah layar untuk penambahan tinggi atau sepertiga bagian belakang untuk penambahan lebar.
Pertimbangan utamanya adalah tempat untuk menaruh konten ini jika tidak ada cukup ruang untuk menampilkan panel. Berikut ini ada beberapa alternatif yang dapat dicoba:
- Panel samping di tepi akhir menggunakan
DrawerLayout
- Panel samping bawah menggunakan
BottomSheetBehavior
- Menu atau jendela pop-up yang dapat diakses dengan mengetuk ikon menu
Buat tata letak dua panel. Layar besar dapat menampilkan kombinasi fitur yang biasanya muncul terpisah pada layar yang berukuran lebih kecil. Pola interaksi umum di banyak aplikasi adalah menampilkan daftar item, seperti kontak atau hasil penelusuran, dan beralih ke detail item saat item dipilih. Daripada harus memperbesar daftar untuk layar yang berukuran lebih besar, gunakan tampilan daftar-detail untuk menampilkan kedua fitur secara berdampingan dalam tata letak dua panel. Tidak seperti panel pendukung, panel detail tampilan daftar-detail merupakan sebuah elemen mandiri yang dapat ditampilkan secara terpisah pada layar yang berukuran lebih kecil.
Gunakan
widget khusus
SlidingPaneLayout
untuk menerapkan tampilan daftar-detail. Widget
ini otomatis akan menghitung ketersediaan ruang untuk menampilkan kedua
panel secara bersamaan berdasarkan nilai layout_width
yang ditentukan untuk dua panel,
dan ruang yang tersisa dapat didistribusikan menggunakan layout_weight
. Jika tidak
tersedia cukup ruang, setiap panel akan menggunakan lebar penuh tata letak, dan
panel detail dapat bergeser dari layar atau di bagian atas panel daftar.
![SlidingPaneLayout yang menampilkan kedua panel tata letak detail daftar di perangkat yang memiliki layar lebar.](https://developer.android.google.cn/static/images/guide/topics/large-screens/responsive-layouts/sliding_pane_layout_expanded_no_frame.png?authuser=0000&hl=id)
Pembuatan tata letak dua panel menguraikan
detail penggunaan SlidingPaneLayout
secara lengkap. Perhatikan juga bahwa pola ini dapat memengaruhi cara Anda menyusun grafik navigasi (lihat Navigasi untuk UI yang responsif).
Referensi tambahan
- Desain Material — Menerapkan tata letak
Direkomendasikan untuk Anda
- Catatan: teks link ditampilkan saat JavaScript nonaktif
- Membuat tata letak dua panel.
- Desain responsif/adaptif dengan tampilan
- Tata letak kanonis perangkat layar besar