Desain responsif/adaptif dengan tampilan

Tata letak responsif/adaptif memberikan pengalaman pengguna yang dioptimalkan, apa pun bentuk ukuran layar. Mengimplementasikan tata letak responsif/adaptif untuk memungkinkan aplikasi berbasis tampilan yang mendukung semua ukuran layar, orientasi, dan konfigurasi lain, termasuk konfigurasi yang dapat diubah ukurannya seperti multi-aplikasi mode.

Desain responsif

Langkah pertama dalam mendukung berbagai faktor bentuk perangkat adalah membuat yang responsif terhadap variasi jumlah ruang tampilan yang tersedia pada aplikasi Anda.

ConstraintLayout

Cara terbaik untuk membuat tata letak responsif adalah dengan menggunakan ConstraintLayout sebagai tata letak dasar untuk UI Anda. ConstraintLayout memungkinkan Anda menentukan posisi dan ukuran setiap tampilan berdasarkan hubungan spasial dengan lainnya beberapa tampilan dalam tata letak. Semua tampilan kemudian dapat berpindah dan mengubah ukuran bersama-sama sebagai perubahan ruang tampilan.

Cara termudah untuk membuat tata letak dengan ConstraintLayout adalah menggunakan Layout Editor di Android Studio. Layout Editor memungkinkan Anda menarik tampilan baru ke tata letak, menerapkan batasan relatif terhadap tampilan induk dan yang setara, dan menyetel tampilan properti—semuanya tanpa perlu mengedit XML apa pun secara manual.

Untuk informasi selengkapnya, lihat Membangun UI yang Responsif Dengan ConstraintLayout.

Lebar dan tinggi responsif

Untuk memastikan tata letak Anda responsif terhadap berbagai ukuran tampilan, gunakan wrap_content, match_parent, atau 0dp (match constraint) untuk lebar dan tinggi komponen tampilan, bukan nilai hard code:

• wrap_content: Tampilan menetapkan ukurannya agar sesuai dengan konten dalam tampilan.
• match_parent: Tampilan akan diperluas selebar mungkin dalam tampilan induk.
• 0dp (match constraint): Di ConstraintLayout, mirip dengan match_parent. Tampilan ini mengambil semua ruang yang tersedia dalam batasan data.

Contoh:

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@string/lorem_ipsum" />

Gambar 4 menunjukkan bagaimana lebar dan tinggi TextView disesuaikan dengan tampilan perubahan lebar dengan orientasi perangkat.

TextView menetapkan lebarnya untuk mengisi semua ruang yang tersedia (match_parent) dan tingginya hingga sama dengan ruang yang dibutuhkan oleh tinggi elemen teks (wrap_content), yang memungkinkan tampilan beradaptasi dengan berbagai tampilan dimensi dan jumlah teks yang berbeda.

Jika menggunakan LinearLayout, Anda juga dapat memperluas tampilan turunan berdasarkan tata letak bobot sehingga tampilan akan mengisi secara proporsional ruang yang tersedia. Namun, menggunakan bobot dalam LinearLayout yang disusun bertingkat memerlukan sistem melakukan beberapa penerusan tata letak untuk menentukan ukuran setiap sehingga memperlambat kinerja UI.

ConstraintLayout dapat membuat hampir semua tata letak dengan LinearLayout tanpa dampak performa, jadi konversi objek bertingkat LinearLayout hingga ConstraintLayout. Kemudian Anda dapat menentukan tata letak berbobot dengan batasan jaringan bisnis.

Desain adaptif

Tata letak aplikasi Anda harus selalu responsif terhadap berbagai ukuran tampilan. Namun, bahkan tata letak responsif pun tidak bisa memberikan pengalaman pengguna terbaik setiap perangkat atau tampilan mode multi-aplikasi. Misalnya, UI yang Anda dirancang untuk ponsel, mungkin tidak memberikan pengalaman pengguna yang optimal tablet. Desain adaptif menyediakan tata letak alternatif yang telah dioptimalkan untuk berbagai dimensi tampilan.

SlidingPaneLayout untuk UI daftar-detail

UI daftar-detail biasanya memberikan pengalaman pengguna yang berbeda di ukuran layar yang berbeda. Di perangkat layar besar, panel daftar dan detail biasanya berdampingan. Saat item dalam daftar dipilih, informasi item akan ditampilkan di panel detail tanpa mengubah UI—dua panel tetap berdampingan. Namun, pada layar kecil, kedua panel ditampilkan secara terpisah, setiap panel menempati seluruh area tampilan. Saat item di panel daftar dipilih, panel detail (berisi informasi item yang dipilih) akan menggantikan panel daftar. Navigasi kembali menggantikan panel detail dengan daftar.

SlidingPaneLayout mengelola logika untuk menentukan mana dari dua pengalaman pengguna yang sesuai untuk ukuran jendela saat ini:

<?xml version="1.0" encoding="utf-8"?>
<androidx.slidingpanelayout.widget.SlidingPaneLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="280dp"
        android:layout_height="match_parent"
        android:layout_gravity="start" />

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="300dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        app:defaultNavHost="true"
        app:navGraph="@navigation/item_navigation" />

</androidx.slidingpanelayout.widget.SlidingPaneLayout>

Atribut layout_width dan layout_weight dari dua tampilan yang terdapat dalam SlidingPaneLayout menentukan perilaku SlidingPaneLayout. Dalam contoh, jika jendela cukup besar (lebar setidaknya 580 dp) untuk menampilkan kedua tampilan, panel ditampilkan berdampingan. Namun, jika lebar jendela lebih kecil dari 580 dp, panel bergeser satu sama lain untuk menempati seluruh aplikasi satu per satu jendela.

Jika lebar jendela lebih besar dari total lebar minimum yang ditentukan (580 dp), Nilai layout_weight dapat digunakan untuk mengukur dua panel secara proporsional. Di kolom misalnya, panel daftar selalu memiliki lebar 280 dp karena tidak memiliki bobot. Namun, panel detail selalu mengisi ruang horizontal di atas 580 dp karena setelan layout_weight tampilan.

Resource tata letak alternatif

Untuk menyesuaikan desain UI Anda dengan berbagai ukuran layar, gunakan tata letak alternatif diidentifikasi oleh resource penentu.

Anda dapat menyediakan tata letak adaptif khusus layar dengan membuat Direktori res/layout/ di kode sumber aplikasi Anda. Buat direktori untuk setiap konfigurasi layar yang membutuhkan tata letak berbeda. Kemudian tambahkan layar pengontrol kualitas konfigurasi menjadi nama direktori layout (misalnya, layout-w600dp untuk layar yang memiliki lebar yang tersedia 600 dp).

Penentu konfigurasi merepresentasikan ruang tampilan yang terlihat dan tersedia untuk UI aplikasi Anda. Sistem memperhitungkan setiap dekorasi sistem (seperti menu navigasi) dan perubahan konfigurasi jendela (seperti multi-aplikasi mode) saat memilih tata letak aplikasi Anda.

Untuk membuat tata letak alternatif di Android Studio, lihat Menggunakan varian tata letak untuk mengoptimalkannya untuk layar yang berbeda Mengembangkan UI dengan View.

Penentu lebar terkecil

Penentu ukuran layar lebar terkecil memungkinkan Anda menyediakan alternatif tata letak untuk tampilan yang memiliki lebar minimum yang diukur dalam independen kepadatan piksel (dp).

Dengan menjelaskan ukuran layar sebagai ukuran dp, Android memungkinkan Anda membuat tata letak yang dirancang untuk dimensi tampilan tertentu tanpa memperhatikan kepadatan piksel yang berbeda.

Misalnya, Anda dapat membuat tata letak bernama main_activity yang dioptimalkan untuk ponsel dan tablet dengan membuat versi file yang berbeda di berbagai direktori:

res/layout/main_activity.xml           # For phones (smaller than 600dp smallest width)
res/layout-sw600dp/main_activity.xml   # For 7" tablets (600dp wide or wider)

Penentu lebar terkecil menentukan sisi terkecil dari dua sisi tampilan, terlepas dari orientasi perangkat saat ini, jadi ini adalah cara untuk menentukan ukuran tampilan keseluruhan yang tersedia untuk tata letak Anda.

Berikut adalah bagaimana nilai lebar terkecil lainnya menyesuaikan ukuran layar umum:

• 320 dp: Layar ponsel kecil (240x320 ldpi, 320x480 mdpi, 480x800 hdpi, dll.)
• 480 dp: Layar ponsel besar ~5" (480x800 mdpi)
• 600 dp: 7 inci tablet (600x1024 mdpi)
• 720 dp: 10 inci tablet (720x1280 mdpi, 800x1280 mdpi, dll.)

Gambar berikut memberikan tampilan yang lebih mendetail tentang bagaimana dp layar yang berbeda lebar sesuai dengan berbagai ukuran dan orientasi layar.

Nilai untuk penentu lebar terkecil adalah dp, karena yang penting adalah jumlah ruang tampilan yang tersedia setelah sistem memperhitungkan kepadatan piksel (bukan resolusi piksel mentah).

Ukuran yang Anda tetapkan menggunakan penentu resource seperti lebar terkecil adalah bukan ukuran layar yang sebenarnya. Sebaliknya, ukuran menentukan lebar atau tinggi pada satuan dp yang tersedia untuk jendela aplikasi Anda. Sistem Android mungkin menggunakan sebagian layar untuk UI sistem (seperti bilah sistem di bagian bawah atau {i>status bar<i} di bagian atas), sehingga beberapa layar mungkin tidak yang tersedia untuk tata letak Anda. Jika aplikasi Anda digunakan dalam mode multi-aplikasi, aplikasi hanya memiliki akses ke ukuran jendela yang berisi aplikasi. Jika ukuran jendela diubah, tindakan ini memicu konfigurasi ubah dengan ukuran jendela baru, yang memungkinkan sistem memilih file tata letak yang sesuai. Jadi, sumber daya ukuran penentu yang Anda deklarasikan seharusnya hanya menetapkan ruang yang dibutuhkan oleh aplikasi Anda. Sistem memperhitungkan setiap ruang yang digunakan oleh UI sistem saat menyediakan ruang untuk tata letak Anda.

Penentu lebar yang tersedia

Alih-alih mengubah tata letak berdasarkan lebar terkecil layar, Anda mungkin ingin mengubah tata letak Anda berdasarkan seberapa banyak lebar atau tinggi yang tersedia. Misalnya, Anda mungkin ingin menggunakan tata letak dua panel setiap kali layar menyediakan lebar minimal 600 dp, yang mungkin berubah tergantung pada dalam orientasi lanskap atau potret. Dalam hal ini, Anda harus menggunakan metode available width sebagai berikut:

res/layout/main_activity.xml         # For phones (smaller than 600dp available width)
res/layout-w600dp/main_activity.xml  # For 7" tablets or any screen with 600dp available width
                                     # (possibly landscape phones)

Jika tinggi yang tersedia tidak sesuai untuk aplikasi, Anda dapat menggunakan tinggi yang tersedia. Misalnya, layout-h600dp untuk layar dengan di tinggi layar minimal 600 dp.

Penentu orientasi

Meskipun Anda dapat mendukung semua variasi ukuran dengan hanya menggunakan kombinasi penentu lebar terkecil dan lebar yang tersedia, Anda dapat juga ingin mengubah pengalaman pengguna ketika pengguna beralih di antara dan orientasi lanskap.

Untuk itu, Anda dapat menambahkan penentu port atau land ke direktori tata letak nama. Pastikan penentu orientasi muncul setelah penentu ukuran. Contoh:

res/layout/main_activity.xml                # For phones
res/layout-land/main_activity.xml           # For phones in landscape
res/layout-sw600dp/main_activity.xml        # For 7" tablets
res/layout-sw600dp-land/main_activity.xml   # For 7" tablets in landscape

Untuk informasi selengkapnya tentang semua pengontrol kualitas konfigurasi layar, lihat Aplikasi ringkasan referensi.

Class ukuran jendela

Class ukuran jendela adalah titik henti sementara area pandang yang membantu Anda membuat tata letak. Titik henti sementara mengidentifikasi area tampilan yang tersedia untuk aplikasi Anda sebagai ringkas, sedang, atau diperluas. {i>Width<i} dan tinggi ditentukan secara terpisah, jadi aplikasi Anda selalu memiliki class ukuran jendela untuk lebar dan class ukuran jendela untuk tinggi.

Untuk menerapkan tata letak adaptif secara terprogram, lakukan hal berikut:

• Membuat resource tata letak berdasarkan titik henti sementara class ukuran jendela
• Hitung class ukuran jendela lebar dan tinggi aplikasi menggunakan WindowSizeClass#compute() dari Jetpack WindowManager perpustakaan
• Meng-inflate resource tata letak untuk class ukuran jendela saat ini

Untuk informasi selengkapnya, lihat Ukuran jendela class lain.

Komponen UI modular menggunakan fragmen

Saat mendesain aplikasi untuk beberapa ukuran tampilan, gunakan fragmen untuk mengekstrak logika UI menjadi beberapa komponen terpisah untuk memastikan bahwa Anda tidak perlu menduplikasi perilaku UI di seluruh aktivitas. Kemudian Anda dapat menggabungkan fragmen untuk membuat tata letak multi-panel di perangkat layar besar, atau menempatkan fragmen di aktivitas terpisah di layar kecil.

Misalnya, pola daftar-detail (lihat SlidingPaneLayout di atas) dapat diterapkan dengan satu fragmen yang berisi daftar dan fragmen lain yang berisi item daftar spesifikasi pendukung. Di perangkat layar besar, fragmen dapat ditampilkan secara berdampingan; nyala layar kecil, satu per satu, yang memenuhi layar.

Untuk mempelajari lebih lanjut, lihat ringkasan Fragmen.

Penyematan aktivitas

Jika aplikasi Anda terdiri dari beberapa aktivitas, penyematan aktivitas memungkinkan Anda membuat UI adaptif dengan mudah.

Penyematan aktivitas menampilkan beberapa aktivitas atau beberapa instance aktivitas yang sama secara bersamaan di jendela tugas aplikasi. Di perangkat layar besar, aktivitas dapat ditampilkan berdampingan; di layar kecil, bertumpuk satu di atas dari yang lain.

Anda menentukan cara aplikasi menampilkan aktivitasnya dengan membuat XML file konfigurasi yang digunakan sistem untuk menentukan presentasi berdasarkan ukuran tampilan. Atau, Anda dapat membuat Jetpack API WindowManager panggilan telepon.

Penyematan aktivitas mendukung perubahan orientasi perangkat dan perangkat foldable, menumpuk dan membongkar aktivitas saat perangkat diputar atau dilipat dan dibentangkan.

Untuk informasi selengkapnya, lihat Aktivitas penyematan.

Ukuran layar dan rasio lebar tinggi

Menguji aplikasi pada berbagai ukuran layar dan rasio aspek untuk memastikan UI Anda melakukan penskalaan dengan benar.

Android 10 (API level 29) dan yang lebih baru mendukung berbagai rasio lebar tinggi. Faktor bentuk perangkat foldable dapat bervariasi mulai dari layar tinggi dan sempit, seperti rasio aspek 21:9 saat dilipat, dengan rasio aspek persegi 1:1 saat dibentangkan.

Untuk memastikan kompatibilitas dengan sebanyak mungkin perangkat, uji aplikasi Anda selama rasio aspek layar berikut sebaik mungkin:

Jika Anda tidak memiliki akses ke perangkat untuk semua ukuran layar yang berbeda yang diinginkan untuk diuji, Anda dapat menggunakan Android Emulator untuk mengemulasi hampir semua ukuran layar.

Jika Anda lebih suka menguji di perangkat sebenarnya tetapi tidak memiliki perangkat, Anda dapat menggunakan Firebase Test Lab untuk mengakses perangkat Anda di pusat data Google.

Referensi lainnya

• Desain Material — Memahami tata letak