Register now for Android Dev Summit 2019!

Mendukung berbagai ukuran layar

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 OS Android Wear, TV, Auto, dan Chrome.

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 yang responsif terhadap berbagai ukuran layar adalah menggunakan ConstraintLayout sebagai tata letak dasar dalam UI. ConstraintLayout memungkinkan Anda menentukan posisi dan ukuran untuk setiap tampilan berdasarkan hubungan spasial dengan tampilan lainnya dalam tata letak. Dengan demikian, semua tampilan bisa berpindah dan direntangkan secara bersamaan saat ukuran layar berubah.

Cara termudah untuk membuat tata letak dengan ConstraintLayout adalah dengan 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 bisa 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 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). Hal ini memungkinkan tampilan menyesuaikan berbagai ukuran layar dan panjang teks yang berbeda.

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 bisa 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 sehingga kinerja UI menjadi lambat. Untungnya, ConstraintLayout bisa mencapai hampir semua tata letak dengan LinearLayout tanpa memengaruhi kinerja sehingga Anda harus mencoba mengubah tata letak menjadi ConstraintLayout. Kemudian, Anda bisa 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 bisa menyediakan tata letak khusus layar dengan membuat direktori res/layout/ tambahan, satu untuk setiap konfigurasi layar yang memerlukan tata letak berbeda, lalu menambahkan qualifier konfigurasi layar pada nama direktori layout (seperti layout-w600dp untuk layar yang memiliki lebar yang tersedia sebesar 600 dp).

Qualifier konfigurasi ini mewakili 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:

  1. Buka tata letak default Anda, lalu klik Orientasi untuk Pratinjau di toolbar.
  2. Pada menu drop-down, klik untuk membuat varian yang disarankan, seperti Buat Varian Lanskap atau klik Buat Lainnya.
  3. Jika memilih Buat Lainnya, Pilih Direktori Resource akan muncul. Di sini, pilih qualifier layar di sebelah kiri dan tambahkan ke daftar Qualifier yang Dipilih. Jika sudah selesai menambahkan qualifier, klik OK. (Lihat bagian berikut ini untuk informasi tentang qualifier 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 qualifier lebar terkecil

Qualifier 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 bisa membuat tata letak bernama main_activity yang dioptimalkan untuk handset dan tablet dengan membuat beberapa versi file 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)
    

Qualifier 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 qualifier 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 bisa melakukan hal yang sama menggunakan qualifier "tinggi yang tersedia". Misalnya, layout-h600dp untuk layar dengan tinggi setidaknya 600 dp.

Menambahkan qualifier orientasi

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

Untuk itu, Anda bisa menambahkan qualifier port atau land ke nama direktori resource. Pastikan qualifier ini ditambahkan setelah qualifier 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 qualifier 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 bisa 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 qualifier ukuran lama

Jika aplikasi Anda mendukung Android 3.1 (API level 12) atau yang lebih rendah, Anda harus menggunakan qualifier ukuran lama selain qualifier 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 qualifier 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 bisa menggunakan file alias. Misalnya, Anda bisa 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 agar menjadi alias untuk main_twopanes. Karena memiliki pemilih large dan sw600dp, file-file tersebut diterapkan ke layar berukuran besar, apa pun versi Android yang digunakan (tablet sebelum versi 3.2 dan TV cocok dengan large, sedangkan setelah versi 3.2 akan cocok dengan sw600dp).

Membuat bitmap 9-patch yang bisa direntangkan

Jika menggunakan bitmap sebagai latar belakang dalam tampilan yang ukurannya bisa 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.

Pada dasarnya, bitmap 9-patch adalah file PNG standar, tetapi memiliki batas tambahan 1 px yang menunjukkan piksel mana yang harus direntangkan (serta memiliki ekstensi .9.png, bukan hanya .png). Seperti pada Gambar 5, persimpangan antara garis hitam di tepi kiri dan atas adalah area bitmap yang bisa direntangkan.

Jika perlu, Anda juga bisa 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 bisa menggunakan Android Emulator untuk mengemulasi ukuran layar apa pun.

Jika memilih untuk mengujinya di perangkat fisik tetapi tidak ingin membeli perangkat, Anda bisa 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 bisa 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.