Perangkat Android hadir dalam berbagai bentuk dan ukuran sehingga tata letak aplikasi Anda harus bersifat fleksibel. Artinya, tata letak tidak boleh ditentukan dengan dimensi mutlak yang mengasumsikan rasio tinggi lebar dan ukuran layar tertentu; tetapi harus mampu merespons berbagai ukuran dan orientasi layar tanpa masalah.
Dengan mendukung berbagai ukuran layar, aplikasi nantinya dapat tersedia bagi sebanyak mungkin pengguna di berbagai perangkat cukup dengan satu APK. Selain itu, memungkinkan aplikasi untuk berfungsi pada berbagai ukuran layar juga akan memastikan bahwa aplikasi bisa menangani perubahan konfigurasi jendela di perangkat, seperti ketika pengguna mengaktifkan mode multi-aplikasi.
Halaman ini menunjukkan cara mendukung berbagai ukuran layar dengan teknik berikut:
- Menggunakan dimensi tampilan yang memungkinkan ukuran tata letak untuk diubah
- Membuat tata letak UI alternatif sesuai konfigurasi layar
- Menyediakan bitmap yang bisa direntangkan dengan tampilan
Namun, perlu diketahui bahwa menyesuaikan berbagai ukuran layar tidak menjadikan aplikasi Anda kompatibel dengan semua faktor bentuk Android. Ada beberapa langkah tambahan yang perlu dilakukan untuk mendukung perangkat Android Wear, TV, Auto, dan Chrome OS.
Untuk pedoman desain dalam membuat UI bagi ukuran layar yang berbeda, lihat panduan materi untuk UI yang responsif.
Membuat tata letak yang fleksibel
Apa pun profil hardware yang ingin Anda dukung terlebih dahulu, buat tata letak yang responsif, bahkan terhadap jenis ukuran layar kecil.
Menggunakan ConstraintLayout
Cara terbaik untuk membuat tata letak responsif untuk berbagai ukuran layar adalah dengan menggunakan ConstraintLayout sebagai tata letak dasar di UI Anda. ConstraintLayout memungkinkan Anda menentukan posisi dan ukuran setiap tampilan berdasarkan hubungan spasial dengan tampilan lainnya dalam tata letak. Dengan demikian, semua tampilan dapat berpindah dan direntangkan secara bersamaan saat ukuran layar berubah.
Cara termudah untuk membuat tata letak dengan ConstraintLayout adalah menggunakan Layout Editor di Android Studio. Fitur ini memungkinkan Anda menarik tampilan baru ke tata letak, menerapkan batasannya ke tampilan induk dan tampilan setara lainnya, serta mengedit properti tampilan, semuanya tanpa perlu mengedit file XML apa pun (lihat gambar 1).
Untuk informasi selengkapnya, lihat Membuat UI yang Responsif Menggunakan ConstraintLayout.
Gambar 1. Layout Editor di Android Studio menampilkan file ConstraintLayout
Sayangnya, ConstraintLayout tidak dapat menangani setiap skenario tata letak yang ada (terutama untuk daftar yang dimuat secara dinamis, yang mengharuskan Anda menggunakan RecyclerView. Namun, apa pun tata letak yang digunakan, Anda harus selalu menghindari ukuran layar hard code (lihat bagian berikutnya).
Menghindari ukuran tata letak hard code
Agar tata letak tetap fleksibel dan bisa menyesuaikan berbagai ukuran layar, gunakan "wrap_content" dan "match_parent" untuk lebar dan tinggi sebagian besar komponen tampilan, bukan ukuran hard code.
"wrap_content" memberi tahu tampilan untuk menyetel ukurannya ke dimensi yang diperlukan agar konten sesuai dalam tampilan.
"match_parent" menjadikan tampilan diperluas selebar mungkin dalam tampilan induk.
Contoh:
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/lorem_ipsum" />
Meskipun tata letak sebenarnya untuk tampilan ini bergantung pada atribut lain dalam tampilan induk dan tampilan setaranya, TextView ini dimaksudkan untuk menyetel lebarnya agar mengisi semua ruang yang tersedia (match_parent) dan menyetel tingginya agar sama dengan ruang yang dibutuhkan oleh panjang teks (wrap_content). Ini memungkinkan tampilan untuk beradaptasi dengan berbagai ukuran layar dan beragam panjang teks.
Gambar 2 menunjukkan bagaimana lebar tampilan teks yang menggunakan "match_parent"melakukan penyesuaian ketika lebar layar berubah dengan orientasi perangkat.
Gambar 2. Tampilan teks yang fleksibel
Jika menggunakan LinearLayout, Anda juga dapat memperluas tampilan turunan dengan bobot tata letak sehingga setiap tampilan mengisi ruang yang tersisa sesuai dengan nilai bobotnya. Namun, menggunakan bobot dalam LinearLayout yang bertingkat mengharuskan sistem melakukan beberapa penerusan tata letak untuk menentukan ukuran setiap tampilan, yang menyebabkan performa UI menjadi lambat.
Untungnya, ConstraintLayout dapat mencapai hampir semua tata letak dengan LinearLayout tanpa memengaruhi performa, sehingga Anda harus mencoba mengonversi tata letak menjadi ConstraintLayout. Kemudian, Anda dapat menentukan tata letak berbobot dengan rantai batasan.
Membuat tata letak alternatif
Meskipun tata letak harus selalu mampu merespons berbagai ukuran layar dengan merentangkan ruang di dalam dan di sekitar tampilan, kemampuan ini mungkin tidak memberikan pengalaman pengguna terbaik pada setiap ukuran layar. Misalnya, UI yang didesain untuk ponsel mungkin tidak menawarkan pengalaman yang baik pada tablet. Oleh karena itu, aplikasi Anda juga harus menyediakan resource tata letak alternatif untuk mengoptimalkan desain UI bagi ukuran layar tertentu.
Gambar 3. Aplikasi yang sama pada ukuran layar yang berbeda masing-masing menggunakan tata letak yang berbeda
Anda dapat menyediakan tata letak khusus layar dengan membuat direktori res/layout/ tambahan, satu untuk setiap konfigurasi layar yang memerlukan tata letak berbeda, lalu menambahkan pengontrol kualitas konfigurasi layar pada nama direktori layout (seperti layout-w600dp untuk layar yang memiliki lebar yang tersedia sebesar 600 dp).
Pengontrol kualitas konfigurasi ini merepresentasikan ruang layar yang terlihat, yang tersedia untuk UI aplikasi Anda. Sistem memperhitungkan setiap dekorasi sistem (seperti menu navigasi) dan perubahan konfigurasi jendela (seperti ketika pengguna mengaktifkan mode multi-aplikasi) saat memilih tata letak dari aplikasi Anda.
Untuk membuat tata letak alternatif di Android Studio (menggunakan versi 3.0 atau yang lebih tinggi), lakukan hal berikut:
- Buka tata letak default Anda, lalu klik Orientasi untuk Pratinjau
di toolbar. - Di menu drop-down, klik untuk membuat varian yang disarankan, misalnya Buat Varian Lanskap atau klik Buat Lainnya.
- Jika memilih Buat Lainnya, Pilih Direktori Resource akan muncul. Di sini, pilih penentu layar di sebelah kiri dan tambahkan ke daftar Penentu yang Dipilih. Jika sudah selesai menambahkan penentu, klik OK. (Lihat bagian berikut untuk mendapatkan informasi tentang penentu ukuran layar.)
Tindakan ini akan membuat file tata letak duplikat dalam direktori tata letak yang sesuai sehingga Anda bisa mulai menyesuaikan tata letak untuk varian layar tersebut.
Menggunakan penentu lebar terkecil
Penentu ukuran layar "lebar terkecil" memungkinkan Anda menyediakan tata letak alternatif untuk layar dengan lebar minimum yang diukur dalam piksel kepadatan mandiri (dp atau dip).
Dengan mendeskripsikan ukuran layar sebagai ukuran piksel kepadatan mandiri, Android memungkinkan Anda membuat tata letak yang didesain untuk dimensi layar yang sangat spesifik sekaligus menghindari semua potensi masalah terkait kepadatan piksel yang berbeda.
Misalnya, Anda dapat membuat tata letak bernama main_activity yang dioptimalkan untuk handset dan tablet dengan membuat versi file yang berbeda dalam direktori sebagai berikut:
res/layout/main_activity.xml # For handsets (smaller than 600dp available width)
res/layout-sw600dp/main_activity.xml # For 7” tablets (600dp wide and bigger)
Penentu lebar terkecil menentukan sisi terkecil dari dua sisi layar apa pun orientasi perangkat yang sedang diterapkan. Jadi, ini adalah cara mudah untuk menentukan ukuran layar keseluruhan yang tersedia untuk tata letak Anda.
Berikut adalah bagaimana nilai lebar terkecil lainnya menyesuaikan ukuran layar umum:
- 320 dp: layar ponsel pada umumnya (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 4 memberikan gambaran yang lebih mendetail tentang bagaimana lebar dp layar yang berbeda pada umumnya menyesuaikan berbagai ukuran dan orientasi layar.
Gambar 4. Titik henti lebar sementara yang dianjurkan untuk mendukung berbagai ukuran layar
Ingat bahwa semua angka untuk penentu lebar terkecil tersebut adalah piksel kepadatan mandiri, karena yang terpenting adalah jumlah ruang layar yang tersedia setelah sistem memperhitungkan kepadatan piksel (bukan resolusi piksel mentah).
Menggunakan qualifier lebar yang tersedia
Bukan mengubah tata letak berdasarkan lebar terkecil layar, Anda mungkin perlu mengubah tata letak berdasarkan seberapa besar lebar atau tinggi yang saat ini tersedia. Misalnya, jika memiliki tata letak dua panel, Anda mungkin perlu menggunakannya setiap kali layar menyediakan lebar setidaknya 600 dp, yang mungkin berubah berdasarkan orientasi perangkat saat ini; lanskap atau potret. Dalam situasi ini, Anda harus menggunakan qualifier "lebar yang tersedia" seperti berikut:
res/layout/main_activity.xml # For handsets (smaller than 600dp available width)
res/layout-w600dp/main_activity.xml # For 7” tablets or any screen with 600dp
# available width (possibly landscape handsets)
Jika tinggi yang tersedia tidak sesuai keinginan, Anda dapat melakukan hal yang sama menggunakan penentu "tinggi yang tersedia". Misalnya, layout-h600dp untuk layar yang berukuran minimal 600 dp.
Menambahkan 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 resource. Pastikan penentu ini ditambahkan setelah penentu ukuran lainnya. Contoh:
res/layout/main_activity.xml # For handsets
res/layout-land/main_activity.xml # For handsets 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 tabel 2 dalam panduan untuk Menyediakan Resource.
Membuat modul komponen UI dengan fragmen
Ketika merancang aplikasi untuk berbagai ukuran layar, Anda mungkin perlu memastikan bahwa perilaku UI tidak perlu diduplikasi pada seluruh aktivitas. Jadi, Anda harus menggunakan fragmen untuk mengekstrak logika UI ke dalam komponen yang terpisah. Kemudian, Anda dapat menggabungkan fragmen untuk membuat tata letak multipanel saat menjalankannya di layar berukuran besar atau menempatkan aktivitas yang terpisah saat menjalankannya pada handset.
Misalnya, aplikasi berita di tablet mungkin menampilkan daftar artikel di sebelah kiri dan artikel lengkapnya di sebelah kanan; memilih artikel di sebelah kiri akan memperbarui tampilan artikel di sebelah kanan. Namun, pada handset, kedua komponen ini akan muncul di layar yang terpisah; memilih artikel dari daftar akan mengubah seluruh layar untuk menampilkannya.
Untuk mempelajari selengkapnya, lihat Membuat UI yang Dinamis dengan Fragmen.
Mendukung Android 3.1 dengan penentu ukuran lama
Jika aplikasi Anda mendukung Android 3.1 (API level 12) atau yang lebih rendah, Anda harus menggunakan penentu ukuran lamaselain penentu lebar terkecil/yang tersedia dari contoh di atas.
Dari contoh di atas, jika menginginkan tata letak dua panel di perangkat yang lebih besar, Anda perlu menggunakan qualifier konfigurasi "besar" untuk mendukung versi 3.1 dan yang lebih rendah. Jadi, untuk mengimplementasikan tata letak ini pada versi lama tersebut, Anda mungkin perlu menggunakan file berikut:
res/layout/main_activity.xml # For handsets (smaller than 640dp x 480dp)
res/layout-large/main_activity.xml # For small tablets (640dp x 480dp and bigger)
res/layout-xlarge/main_activity.xml # For large tablets (960dp x 720dp and bigger)
Menggunakan alias tata letak
Ketika mendukung sistem Android sebelum dan sesudah versi 3.2, Anda harus menggunakan penentu besar dan lebar terkecil untuk tata letak. Jadi, akan ada file bernama res/layout-large/main.xml yang mungkin sama persis dengan res/layout-sw600dp/main.xml.
Untuk menghindari duplikasi file yang sama ini, Anda dapat menggunakan file alias. Misalnya, Anda dapat menentukan tata letak berikut:
res/layout/main.xml # single-pane layout
res/layout/main_twopanes.xml # two-pane layout
Lalu menambahkan kedua file ini:
res/values-large/layout.xml:<resources> <item name="main" type="layout">@layout/main_twopanes</item> </resources>res/values-sw600dp/layout.xml:<resources> <item name="main" type="layout">@layout/main_twopanes</item> </resources>
Dua file terakhir memiliki konten yang sama persis, tetapi sebenarnya tidak menentukan tata letak Anda. File tersebut hanya menyetel main menjadi alias bagi main_twopanes. Karena file-file ini memiliki pemilih large dan sw600dp, keduanya akan diterapkan pada tablet dan TV terlepas dari versi Android-nya (tablet dan TV dengan versi 3.2 ke bawah cocok dengan large, dan yang memiliki versi 3.2 ke atas akan cocok dengan sw600dp).
Membuat bitmap 9-patch yang bisa direntangkan
Jika menggunakan bitmap sebagai latar belakang dalam tampilan yang ukurannya dapat berubah, Anda akan menyadari bahwa Android menskalakan gambar saat tampilan melebar atau menyusut sesuai ukuran layar atau konten dalam tampilan. Hal ini sering menimbulkan keburaman pada tampilan atau artefak penskalaan lainnya. Solusinya, gunakan bitmap 9-patch, yaitu file PNG yang diformat khusus, yang menunjukkan area mana yang bisa dan tidak bisa direntangkan.
Bitmap 9-patch pada dasarnya adalah file PNG standar, tetapi dengan batas 1px tambahan yang menunjukkan piksel mana yang harus direntangkan (dan dengan ekstensi .9.png, bukan hanya .png). Seperti yang ditunjukkan pada gambar 5, persimpangan antara garis hitam di tepi kiri dan atas adalah area bitmap yang bisa direntangkan.
Jika perlu, Anda juga dapat menentukan wilayah aman tempat masuknya konten ke dalam tampilan dengan menambahkan garis di tepi kanan dan bawah.
Gambar 5. Gambar 9-patch (button.9.png)
Ketika file 9-patch diterapkan sebagai latar belakang tampilan, framework akan merentangkan gambar dengan tepat untuk menyesuaikan ukuran tombol.
Untuk bantuan dalam membuat gambar 9-patch dari bitmap, lihat Membuat Bitmap dengan Ukuran yang Bisa Diubah.
Melakukan pengujian pada semua ukuran layar
Penting untuk menguji aplikasi pada berbagai ukuran layar guna memastikan bahwa UI diskalakan dengan benar. Jika tidak memiliki akses ke perangkat fisik untuk semua ukuran layar yang berbeda, Anda dapat menggunakan Android Emulator untuk mengemulasi ukuran layar apa pun.
Jika memilih untuk mengujinya di perangkat fisik tetapi tidak ingin membeli perangkat, Anda dapat menggunakan Firebase Test Lab untuk mengakses perangkat di pusat data Google.
Mendeklarasikan dukungan ukuran layar spesifik
Jika memutuskan bahwa aplikasi Anda tidak akan mendukung ukuran layar tertentu, Anda dapat menetapkan batas untuk perubahan ukuran layar yang diperbolehkan atau bahkan membatasi perangkat mana yang bisa menginstalnya berdasarkan konfigurasi layarnya. Untuk informasi selengkapnya, lihat Mendeklarasikan Dukungan Layar Terbatas.