Desain responsif/adaptif dengan tampilan

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

Desain responsif

Langkah pertama dalam mendukung berbagai faktor bentuk perangkat adalah membuat tata letak yang responsif terhadap variasi jumlah ruang tampilan yang tersedia untuk 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 tampilan lainnya dalam tata letak. Semua tampilan kemudian dapat berpindah dan diubah ukurannya bersama saat ruang tampilan berubah.

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, serta menyetel properti tampilan—semuanya tanpa perlu mengedit XML apa pun secara manual.

Untuk informasi selengkapnya, lihat Mem-build 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 tampilan.
• match_parent: Tampilan diperluas selebar mungkin dalam tampilan induk.
• 0dp (match constraint): Di ConstraintLayout, mirip dengan match_parent. Tampilan ini menggunakan semua ruang yang tersedia dalam batasan tampilan.

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 saat lebar tampilan berubah dengan orientasi perangkat.

TextView menetapkan lebarnya untuk mengisi semua ruang yang tersedia (match_parent) dan tingginya ke ruang yang sama persis dengan yang diperlukan oleh tinggi teks yang ada di dalamnya (wrap_content), yang memungkinkan tampilan beradaptasi dengan berbagai dimensi tampilan dan jumlah teks yang berbeda.

Jika menggunakan LinearLayout, Anda juga dapat memperluas tampilan turunan berdasarkan bobot tata letak sehingga tampilan akan mengisi ruang yang tersedia secara proporsional. Namun, menggunakan bobot dalam LinearLayout bertingkat mengharuskan sistem melakukan beberapa penerusan tata letak untuk menentukan ukuran setiap tampilan, sehingga menyebabkan performa UI menjadi lambat.

ConstraintLayout dapat membuat hampir semua tata letak dengan LinearLayout tanpa memengaruhi performa, jadi konversikan LinearLayout bertingkat Anda menjadi ConstraintLayout. Kemudian, Anda dapat menentukan tata letak berbobot dengan rantai batasan.

Desain adaptif

Tata letak aplikasi harus selalu responsif terhadap berbagai ukuran tampilan. Namun, tata letak responsif pun tidak dapat memberikan pengalaman pengguna terbaik di setiap perangkat atau tampilan mode multi-aplikasi. Misalnya, UI yang Anda desain untuk ponsel, mungkin tidak memberikan pengalaman pengguna yang optimal di 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 layar dengan ukuran yang berbeda pula. Di layar besar, panel daftar dan detail biasanya berdampingan. Saat item dalam daftar dipilih, informasi item akan ditampilkan di panel detail tanpa mengubah UI—kedua panel tetap berdampingan. Namun, pada layar kecil, dua panel ditampilkan secara terpisah, setiap panel menempati seluruh area tampilan. Saat item dalam 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 dengan 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. Pada contoh, jika jendela cukup besar (lebar minimal 580 dp) untuk menampilkan kedua tampilan, panel akan ditampilkan berdampingan. Namun, jika lebar jendela lebih kecil dari 580 dp, panel akan bergeser satu sama lain untuk menempati seluruh jendela aplikasi satu per satu.

Jika lebar jendela lebih besar dari total lebar minimum yang ditentukan (580 dp), nilai layout_weight dapat digunakan untuk menyesuaikan ukuran kedua panel secara proporsional. 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 ukuran tampilan yang sangat beragam, gunakan tata letak alternatif yang diidentifikasi oleh penentu resource.

Anda dapat menyediakan tata letak adaptif khusus layar dengan membuat direktori res/layout/ tambahan dalam kode sumber aplikasi Anda. Buat direktori untuk setiap konfigurasi layar yang memerlukan tata letak berbeda. Kemudian, tambahkan penentu konfigurasi layar ke nama direktori layout (misalnya, layout-w600dp untuk layar yang memiliki lebar yang tersedia sebesar 600 dp).

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

Untuk membuat tata letak alternatif di Android Studio, lihat Menggunakan varian tata letak untuk mengoptimalkan berbagai layar dalam Mengembangkan UI dengan View.

Penentu lebar terkecil

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

Dengan mendeskripsikan ukuran layar sebagai ukuran dp, Android memungkinkan Anda membuat tata letak yang didesain 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 direktori yang berbeda:

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: tablet 7" (600x1024 mdpi)
• 720 dp: tablet 10" (720x1280 mdpi, 800x1280 mdpi, dll.)

Gambar berikut memberikan gambaran yang lebih mendetail tentang bagaimana lebar dp layar yang berbeda menyesuaikan 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 tentukan menggunakan penentu resource seperti lebar terkecil bukan ukuran layar sebenarnya. Ukuran ini menentukan lebar atau tinggi dalam satuan dp yang tersedia untuk jendela aplikasi Anda. Sistem Android mungkin menggunakan sebagian layar untuk UI sistem (seperti kolom sistem di bagian bawah layar atau status bar di bagian atas), sehingga sebagian layar mungkin tidak tersedia untuk tata letak Anda. Jika digunakan dalam mode multi-aplikasi, aplikasi hanya memiliki akses ke ukuran jendela yang berisi aplikasi. Saat ukuran jendela diubah, perubahan konfigurasi akan terpicu dengan ukuran jendela baru, yang memungkinkan sistem memilih file tata letak yang sesuai. Jadi, ukuran penentu resource yang Anda deklarasikan hanya boleh menentukan ruang yang dibutuhkan oleh aplikasi. Sistem memperhitungkan ruang yang digunakan oleh UI sistem saat menyediakan ruang untuk tata letak Anda.

Penentu lebar yang tersedia

Daripada mengubah tata letak berdasarkan lebar terkecil layar, Anda mungkin perlu mengubah tata letak berdasarkan seberapa besar lebar atau tinggi yang tersedia. Misalnya, Anda mungkin ingin menggunakan tata letak dua panel setiap kali layar memberikan lebar setidaknya 600 dp, yang mungkin berubah bergantung pada apakah perangkat dalam orientasi lanskap atau potret. Dalam hal ini, Anda harus menggunakan penentu lebar yang tersedia seperti 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 penentu tinggi yang tersedia. Misalnya, layout-h600dp untuk layar yang berukuran minimal 600 dp.

Penentu orientasi

Meskipun Anda mungkin dapat mendukung semua variasi ukuran hanya dengan kombinasi penentu lebar terkecil dan lebar yang tersedia, Anda mungkin juga perlu mengubah pengalaman pengguna saat pengguna beralih antara orientasi potret dan lanskap.

Untuk itu, Anda dapat menambahkan penentu port atau land ke nama direktori tata letak. 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 Ringkasan resource aplikasi.

Class untuk ukuran jendela

Class ukuran jendela adalah titik henti sementara area pandang yang membantu Anda membuat tata letak adaptif. Titik henti sementara mengidentifikasi area tampilan yang tersedia untuk aplikasi Anda sebagai rapat, sedang, atau diperluas. Lebar dan tinggi ditentukan secara terpisah, sehingga 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 Anda menggunakan fungsi WindowSizeClass#compute() dari library Jetpack WindowManager
• Meng-inflate resource tata letak untuk class ukuran jendela saat ini

Untuk mengetahui informasi selengkapnya tentang class ukuran jendela, lihat Mendukung berbagai ukuran layar.

Komponen UI modular menggunakan fragmen

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

Misalnya, pola daftar‐detail (lihat SlidingPaneLayout di atas) dapat diterapkan dengan satu fragmen yang berisi daftar dan fragmen lain yang berisi detail item daftar. Di perangkat layar besar, fragmen dapat ditampilkan secara berdampingan; di perangkat layar kecil, fragmen ditampilkan satu per satu dan 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. Pada perangkat layar besar, aktivitas dapat ditampilkan berdampingan; pada layar kecil, aktivitas ditumpuk di atas yang lain.

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

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

Untuk mengetahui informasi selengkapnya, lihat Penyematan aktivitas.

Ukuran layar dan rasio lebar tinggi

Uji aplikasi Anda di berbagai ukuran layar dan rasio aspek untuk memastikan UI diskalakan 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 21:9 saat dilipat, hingga rasio lebar tinggi persegi 1:1 saat dibentangkan.

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

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

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

Referensi lainnya

• Desain Material — Memahami tata letak