Dasar-dasar tata letak

Tata letak menentukan struktur visual bagi pengguna untuk berinteraksi dengan aplikasi Anda, seperti dalam aktivitas. Android menyediakan berbagai library, titik awal kanonis, dan teknik untuk menampilkan dan memosisikan konten.

Poin-poin penting

• Mematuhi area aman perangkat, yang mencakup bagian-bagian UI seperti panel tampilan, inset tepi ke tepi, layar tepi, keyboard virtual, dan kolom sistem.

• Lakukan: Menyediakan tata letak yang fleksibel bagi pengguna untuk berinteraksi dengan keyboard.

• Pertahankan interaksi yang penting, seperti navigasi utama, di area layar yang dapat dijangkau.

  

• Gunakan containment untuk mengelompokkan konten terkait guna memandu pengguna melalui konten dan tindakan.

  

• Berikan keselarasan yang konsisten antara konten dan elemen UI yang serupa.

  Jangan: mengganggu keterbacaan dengan tidak menggunakan spasi secara konsisten seperti elemen, yang dapat membuat desain tampak acak.

  Lakukan: Menetapkan spasi yang konsisten di antara elemen serupa.

  

• Jangan terpaku pada potret atau tata letak yang ideal: Pertimbangkan rasio lebar tinggi, class ukuran, dan resolusi berbeda yang mungkin ditemui pengguna.

• Jangan membuat bingung pengguna dengan terlalu banyak tindakan per tampilan.

• Saat mem-build tata letak kustom, catat cara konten berada dalam tata letak menggunakan perataan, batasan, atau istilah gravitasi. Sertakan cara gambar harus merespons penampungnya agar ditampilkan dengan benar.

Bagian dari layar aplikasi Android standar

Sebagian besar aplikasi Android terdiri dari wilayah yang disebut sebagai bar sistem, area navigasi, dan isi.

Kolom sistem

Status bar dan menu navigasi, yang secara kolektif dikenal sebagai kolom sistem, menampilkan informasi penting seperti level baterai, waktu, dan notifikasi notifikasi, serta menyediakan interaksi perangkat langsung dari mana saja. Baca selengkapnya tentang bar sistem.

Kolom sistem adalah bagian integral dari antarmuka perangkat. Tambahkan elemen tersebut sebagai lapisan atas desain Anda untuk memastikan desain tersebut dipertimbangkan dalam tata letak layar. Jika tidak, pengguna mungkin salah mengira bahwa tujuannya adalah untuk menyembunyikannya, Anda melewatkannya untuk menata gayanya, dan spasi dapat menjadi tidak aktif.

Tambahkan batang sebagai lapisan atas. Gunakan android:navigationBarColor dan android:statusBarColor untuk menerapkan warna ke kolom sistem di tema aplikasi Anda.

Wilayah navigasi

Navigasi mewakili berbagai kemampuan yang memungkinkan pengguna menavigasi dalam aplikasi Anda, mengakses tindakan penting, atau di seluruh platform Android.

Wilayah tubuh

Region isi menyimpan konten layar. Konten isi terdiri dari pengelompokan dan parameter tata letak tambahan. Panel ini harus terus berada di bagian navigasi dan kolom sistem.

Deklarasikan WindowCompat.setDecorFitsSystemWindows(window, false) untuk inset tata letak layar penuh.

Untuk menentukan komposisi dan pola navigasi yang sesuai untuk tata letak, upayakan untuk memahami cara pengguna berinteraksi dengan konten Anda, dan cara mereka menjelajahi arsitektur informasi aplikasi Anda. Pemahaman ini dapat memandu desain Anda agar lebih berfokus pada pengguna dengan membuat UI yang dapat ditindaklanjuti pengguna.

Komposisi dan struktur konten

Bangun alur dan ritme yang fleksibel dengan struktur dan metode penampungan untuk konten Anda.

Struktur dasar: gunakan margin dan kolom untuk pelindung visual

Untuk mulai membuat struktur yang solid dengan pelindung yang konsisten, tambahkan margin dan kolom ke tata letak Anda.

Margin menyediakan spasi di tepi kiri dan kanan layar dan konten. Nilai margin standar untuk ukuran rapat adalah 16 dp, tetapi margin harus beradaptasi untuk mengakomodasi layar yang lebih besar. Konten dan tindakan isi aplikasi harus tetap berada dalam dan selaras dengan margin ini.

Anda juga dapat memastikan zona aman atau inset pada langkah ini. Inset kolom sistem mencegah tindakan penting agar tidak masuk ke dalam kolom sistem. Lihat Menggambar konten di belakang kolom sistem untuk mengetahui detailnya.

Gunakan kolom untuk membuat struktur petak fleksibel agar perataan tetap konsisten, dan memberikan definisi vertikal pada tata letak dengan membagi konten dalam area isi. Konten masuk di area layar yang berisi kolom. Kolom ini memberikan struktur ke tata letak Anda, sehingga memberikan struktur yang mudah untuk mengatur elemen.

Gunakan petak kolom untuk menyelaraskan konten dengan petak dasar, tetapi mempertahankan ukuran yang fleksibel. Petak kolom dapat mengakomodasi faktor bentuk yang berbeda dengan mengubah ukuran kolom dan jumlah kolom sesuai kebutuhan ukuran layar pada titik tertentu sekaligus memungkinkan konten untuk diskalakan juga. Agar tidak terlalu terperinci dengan petak kolom, ini adalah dasar petak dasar: menyediakan unit spasi yang konsisten.

Berhati-hatilah dalam membuat petak baris yang menyertainya karena dapat membatasi penskalaan konten horizontal di seluruh orientasi dan faktor bentuk, biasanya menetapkan aturan padding akan memberikan konsistensi visual yang diperlukan.

Gunakan containment untuk mengelompokkan elemen secara visual

Containment mengacu pada penggunaan ruang putih dan elemen yang terlihat bersama untuk membuat pengelompokan visual. Container adalah bentuk yang mewakili area tertutup. Dalam satu tata letak, Anda dapat mengelompokkan elemen yang memiliki konten atau fungsi yang serupa dan memisahkannya dari elemen lain menggunakan ruang terbuka, tipografi, dan pembagi.

Anda dapat mengelompokkan item serupa menggunakan spasi kosong atau pembagian yang terlihat untuk membantu memandu pengguna melalui konten.

Penahanan implisit menggunakan ruang putih untuk mengelompokkan konten secara visual guna membuat batas penampung, sementara pengendali eksplisit menggunakan objek seperti garis pembagi dan kartu untuk mengelompokkan konten.

Gambar berikut menunjukkan contoh penggunaan containment implisit untuk memuat header dan salinan utama. Petak kolom digunakan untuk meratakan dan membuat pengelompokan. Sorotan terdapat dalam kartu secara eksplisit. Menggunakan ikonografi dan hierarki jenis untuk pemisahan visual yang lebih besar.

Pengaturan posisi konten

Android memiliki beberapa cara untuk menangani elemen konten dalam container masing-masing yang dapat membantu memosisikannya dengan tepat, termasuk gravitasi, spasi, dan penskalaan.

Gravity adalah standar untuk menempatkan objek dalam penampung yang berpotensi lebih besar untuk kasus penggunaan tertentu. Gambar berikut menunjukkan contoh pemosisian objek awal dan tengah (1), horizontal atas dan tengah (2), kiri bawah (3), serta akhir dan kanan (1).

Penskalaan

Penskalaan sangat penting untuk mengakomodasi konten dinamis, orientasi perangkat, dan ukuran layar. Elemen dapat tetap atau diskalakan.

Memperhatikan bagaimana gambar ditampilkan dalam container-nya dengan penskalaan dan posisi sangat penting untuk memastikan tampilan gambar sesuai dengan konteks perangkat, jika tidak, fokus utama gambar mungkin akan terpotong, gambar terlalu kecil atau besar untuk tata letak, atau efek yang tidak diinginkan.

Konten yang tidak dinotasikan dapat muncul secara berbeda dari yang Anda harapkan atau inginkan.

Konten yang disematkan

Banyak elemen memiliki interaksi, scroll, dan pemosisian bawaan dengan slot atau scaffold. Beberapa elemen dapat dimodifikasi agar tetap bersifat tetap, bukan bereaksi terhadap scroll, misalnya tombol tindakan mengambang (FAB) yang menampung tindakan penting.

Perataan

Menggunakan AlignmentLine untuk membuat garis perataan khusus, yang dapat digunakan oleh tata letak induk untuk meratakan dan memosisikan turunannya.

Jangan: mengganggu keterbacaan dengan spasi yang tidak konsisten seperti elemen, yang dapat membuat desain tampak acak.

Lakukan: Menetapkan spasi yang konsisten di antara elemen serupa.

Tata letak komponen

Komponen Material 3 menyediakan konfigurasi dan statusnya sendiri untuk interaksi dan konten.

Compose menyediakan tata letak yang mudah untuk menggabungkan Komponen Material ke dalam pola layar yang umum. Composable seperti Scaffold menyediakan slot untuk berbagai komponen dan elemen layar lainnya. Baca selengkapnya tentang Komponen dan Tata Letak Material.

Tata letak dan pola navigasi

Jika aplikasi Anda berisi beberapa tujuan untuk dilalui pengguna, sebaiknya gunakan pasangan tata letak dan navigasi yang biasa digunakan oleh aplikasi lain. Karena banyak pengguna sudah memiliki model mental untuk pasangan ini, aplikasi Anda akan lebih intuitif bagi mereka.

Penyambungan tata letak dan navigasi

Menu navigasi dan panel navigasi modal digunakan sebagai pola navigasi utama untuk tampilan tata letak induk dan tujuan navigasi utama.

Menu navigasi dapat menampung tiga hingga lima tujuan navigasi di tingkat hierarki yang sama. Komponen ini diterjemahkan ke dalam kolom samping navigasi untuk layar besar.

Meskipun panel navigasi dapat menampung lebih dari lima tujuan navigasi, pola ini tidak ideal seperti menu navigasi karena harus mencapai panel atas dalam ukuran rapat.

Tab Material 3 dan panel aplikasi bawah adalah pola navigasi sekunder yang dapat Anda gunakan untuk melengkapi navigasi utama atau muncul di tampilan turunan.

Tindakan tata letak

Menyediakan kontrol agar pengguna dapat menyelesaikan tindakan. Pola umumnya meliputi tindakan panel atas, tombol tindakan mengambang (FAB), dan menu.

Untuk tindakan yang sangat penting, FAB menyediakan tombol yang besar dan jelas bagi pengguna. Berikan hanya satu tindakan dalam satu waktu di tingkat ini. FAB dapat muncul dalam beberapa ukuran dan bentuk yang diperluas, yang mencakup label. Gunakan Scaffold untuk menyematkan FAB, sehingga memastikannya selalu terlihat bahkan saat di-scroll.

Anda dapat menempatkan tindakan sekunder di dalam panel atas atau, jika dikelompokkan di dekat konten terkait, di dalam halaman.

Untuk tindakan tambahan yang tidak diperlukan segera atau sering, tambahkan tindakan tersebut di menu tambahan.

Tata letak kanonis

Manfaatkan tata letak kanonis sebagai titik awal, komposisi yang siap digunakan dan membantu tata letak beradaptasi untuk kasus penggunaan dan ukuran layar umum. Tata letak ini estetik dan fungsional, dan berasal dari panduan Material 3.

Framework Android menyertakan komponen khusus yang membuat implementasi tata letak menjadi mudah dan andal menggunakan API Jetpack Compose atau Views.

Tata letak detail daftar

Tata letak detail daftar memungkinkan pengguna menjelajahi daftar item yang memiliki informasi deskriptif, penjelasan, atau tambahan lainnya—detail item. Untuk ukuran layar yang rapat, hanya tampilan daftar atau detail yang akan terlihat. Menampilkan koleksi konten dalam tata letak berbasis baris, daftar merupakan bentuk tata letak yang paling umum untuk aplikasi. Detail daftar ideal untuk aplikasi pesan, pengelola kontak, browser file, atau aplikasi apa pun tempat konten dapat diatur sebagai daftar item yang mengungkapkan informasi tambahan.

Konten dapat bersifat statis atau dinamis.

• Konten dinamis adalah konten yang ditayangkan aplikasi Anda dengan cepat, dan ideal untuk menampilkan konten buatan pengguna atau mencerminkan preferensi atau tindakan pengguna. Misalnya, bayangkan suatu aplikasi foto dengan daftar foto buatan pengguna yang dapat di-scroll, yang unik bagi setiap pengguna, dan akan berubah saat pengguna mengupload lebih banyak gambar. Gambar ini adalah konten dinamis.
• Konten statis merepresentasikan konten hard code, yang hanya dapat diubah dengan membuat perubahan langsung pada kode aplikasi Anda. Contoh konten statis adalah gambar dan teks yang mungkin dilihat oleh setiap pengguna.

File Figma Now in Android menyediakan beberapa contoh tata letak. Contoh berikut menunjukkan kumpulan konten satu dimensi.

Jelajahi Daftar Material 3 untuk panduan desain selengkapnya tentang komponen dan spesifikasi daftar.

Tata letak feed

Tata letak feed mengatur elemen konten yang setara dalam petak yang dapat dikonfigurasi agar tampilan konten dalam jumlah besar yang cepat dan nyaman. (Lihat pedoman Material 3 untuk menggunakan kartu dalam koleksi.) Feed dapat berupa konfigurasi berbasis daftar atau petak pada layar yang ringkas, biasanya dalam kartu atau kartu. Konten dapat bersifat dinamis, artinya "dimasukkan" dari sumber eksternal dinamis seperti API.

Tata letak petak terdiri dari baris dan kolom yang terdiri dari prinsip containment implisit atau eksplisit. (Lihat pemuatan di halaman ini untuk informasi selengkapnya.) Tata letak petak dapat diterapkan atau disatukan secara lebih kaku untuk memvariasikan baris dan kolom. Keduanya harus memiliki penerapan spasi dan logika yang konsisten untuk menghindari kebingungan pengguna. Pelajari Panduan Material 3 tentang mendesain feed.

Anda dapat menerapkan tata letak feed di Compose dengan Daftar lambat atau petak lambat, atau di View dengan RecyclerView atau CardView.

Mendukung tata letak panel

Tampilan seluler mungkin memerlukan konten atau kontrol pendukung. Biasanya dalam bentuk sheet atau dialog, tampilan utama dapat membantu tampilan utama tetap fokus dan tidak rapi. Lihat panduan M3 untuk menggunakan tata letak kanonis panel pendukung.

Pelajari panduan M3 untuk sheet bawah.

Tata letak relatif

Input, konten, atau tindakan lainnya dapat tampak relatif terhadap satu sama lain atau terbatas pada penampung induk. Tata letak bisa lebih kustom, tetapi pastikan untuk mengikuti pengelompokan, kolom, dan spasi yang konsisten.

Tata letak juga dapat menggunakan kombinasi jenis tata letak. Misalnya, Anda dapat menyambungkan carousel atau scroll horizontal dengan kartu vertikal. Atau, Anda dapat menyajikan diagram kustom dengan data daftar vertikal.

Anda dapat menampilkan konten di baris atau kolom scroll dengan baris lambat dan kolom lambat.

Pelajari dasar-dasar tata letak Compose dan komponen composable lebih lanjut.

Autentikasi adalah tata letak relatif yang umum, seperti yang ditunjukkan pada gambar berikut.

Tata letak layar penuh adalah tata letak umum lainnya, seperti yang digunakan dalam mode imersif.

Jika menggunakan View, bukan Compose, Anda dapat menggunakan ConstraintLayout untuk menata letak tampilan sesuai dengan hubungan antara tampilan yang setara dan tata letak induk, sehingga dapat membuat tata letak yang besar dan kompleks. ConstraintLayout memungkinkan Anda mem-build sepenuhnya dengan menarik lalu melepas, bukan mengedit XML menggunakan editor tata letak. Pelajari lebih lanjut cara membuat UI dengan Layout Editor.

Menyesuaikan tata letak

Desain adaptif adalah praktik mendesain tata letak yang beradaptasi dengan perangkat dan titik henti sementara tertentu. Biasanya kami mempertimbangkan lebar perangkat untuk menentukan tempat tata letak harus berubah, atau beradaptasi. Web dan Android menggunakan konsep desain yang responsif, seperti petak dan gambar yang fleksibel, untuk membuat tata letak yang dapat merespons konteksnya dengan lebih baik.

Untuk panduan desain cara menyesuaikan tata letak dengan ukuran layar yang diperluas, baca panduan developer Mem-build tata letak adaptif di Compose dan halaman Menerapkan Tata Letak M3. Anda juga dapat melihat galeri kanonis layar besar Android untuk mendapatkan inspirasi dan menerapkan tata letak layar besar.

Meskipun tidak setiap aplikasi harus tersedia di setiap ukuran layar, aplikasi ini memberikan kebebasan lebih kepada pengguna terkait ergonomi, kegunaan, dan kualitas aplikasi.

• Anda dapat mendesain layar utama (menyampaikan konsep penting atau aplikasi) dengan ukuran class sebagai titik henti sementara untuk berfungsi sebagai panduan.
• Atau, desain konten agar bertindak responsif dengan memberi tahu cara konten dibatasi, diperluas, atau diubah posisi/geometrinya.

Untuk informasi selengkapnya tentang tata letak, baca halaman Memahami Tata Letak Desain Material 3 (M3).

WebView

Webview adalah tampilan yang menampilkan halaman web dalam aplikasi. Pada umumnya, sebaiknya gunakan browser web standar, seperti Chrome, untuk menayangkan konten kepada pengguna. Untuk mempelajari browser web lebih lanjut, baca panduan untuk memanggil browser dengan intent.