Memigrasikan UI ke tata letak responsif

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 pengubahan ukuran jendela saat berjalan dalam mode multi-aplikasi, picture-in-picture atau jendela berformat bebas seperti ChromeOS. Bahkan bisa ada lebih banyak dari satu layar fisik, seperti dengan perangkat foldable atau perangkat yang memiliki beberapa tampilan. Di semua kasus ini, ukuran layar fisik tidak relevan untuk memutuskan cara menampilkan konten.

Gambar 1. Ukuran jendela dapat berbeda dari perangkat fisik atau ukuran layar.

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.

Gambar 2. Pengelola tata letak yang berbeda untuk class ukuran jendela yang berbeda.

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.

Gambar 3. Dialog layar penuh diubah menjadi dialog standar dengan lebar sedang dan lebih luas.

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

Gambar 4. Cara lain untuk menyajikan konten tambahan di panel pendukung.

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.

Gambar 5. SlidingPaneLayout yang menampilkan dua panel dalam lebar yang telah diperluas dan satu panel dalam lebar yang ringkas.

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 lainnya

• Desain Material — Menerapkan tata letak