Bangun alur dan ritme yang fleksibel dengan struktur dan metode penampungan untuk konten Anda. Mulailah dengan mendesain penampung tata letak, lalu tambahkan konten.
1. Struktur dasar: petak tata letak untuk memandu konten
Untuk mulai membuat struktur yang solid dengan batas aman yang konsisten, tambahkan margin dan kolom ke tata letak Anda.
Margin memberikan jarak di tepi kiri dan kanan layar serta konten. Nilai margin standar untuk ukuran ringkas adalah 16 dp, tetapi margin harus disesuaikan untuk mengakomodasi layar yang lebih besar. Konten dan tindakan isi aplikasi Anda harus tetap berada dalam dan selaras dengan margin ini.
Anda juga dapat memastikan zona aman inset atau inset pada langkah ini. Inset kolom sistem mencegah tindakan penting berada di bawah kolom sistem. Anda harus menggambar konten di belakang kolom sistem.
Gunakan kolom untuk membuat struktur petak yang fleksibel untuk perataan yang konsisten, dan untuk memberikan definisi vertikal pada tata letak dengan membagi konten dalam area isi. Konten masuk ke area layar yang berisi kolom. Kolom ini memberikan struktur pada tata letak Anda, sehingga memberikan struktur yang mudah untuk mengatur elemen.
Kepentingan konten, atau hierarki, dapat membantu menentukan jenis petak tata letak untuk menghadirkan lebih banyak struktur. Jika konten Anda memiliki hierarki yang jelas, petak tata letak hierarkis cocok digunakan; misalnya, tata letak editorial atau layar detail dengan header besar dan gambar utama.
Petak modular berfungsi dengan baik untuk konten dan tata letak yang sama pentingnya tetapi sangat terstruktur, seperti galeri foto.
Pilih petak kolom untuk tata letak satu arah yang responsif secara konsisten, atau saat Anda memerlukan fleksibilitas yang lebih besar.
Terlepas dari jenisnya, petak tata letak juga harus beradaptasi di berbagai ukuran dan faktor bentuk.
Contoh ini menggunakan grid kolom untuk menyelaraskan konten dengan petak yang mendasarinya sambil mempertahankan ukuran yang fleksibel. Untuk mengakomodasi berbagai faktor bentuk, petak kolom mengubah ukuran kolom dan jumlah kolom berdasarkan ukuran layar, yang juga memungkinkan konten diskalakan. Jangan terlalu terperinci dengan petak tata letak. Sebagai gantinya, gunakan petak dasar untuk memberikan unit jarak yang konsisten.
Mulai menambahkan teks ke struktur tata letak. Margin melindungi konten dari tepi layar. Kolom memberikan struktur jarak dan perataan yang konsisten.
Atau, gunakan petak tata letak hierarkis untuk menjaga layar detail tetap teratur.
Mulai dengan petak tata letak yang konsisten. Jika konten Anda memerlukannya, pecahkan petak. Meskipun demikian, Anda mungkin mendapati bahwa petak lain masih sesuai dengan kebutuhan konten Anda.
Pelajari lebih lanjut penampung tata letak, seperti pengatur halaman dan tata letak mengambang.
Manuskrip dan susun bata adalah jenis kisi tata letak lainnya.
Petak tata letak yang Anda pilih juga dapat menggunakan konsep penampungan panel untuk mengelompokkan konten untuk tata letak adaptif. Misalnya, contoh yang digunakan adalah layar detail, satu panel yang dapat ditampilkan dalam tata letak daftar-detail.
2. Menerapkan pembatasan
Gunakan pembatasan untuk mengelompokkan elemen secara visual.
Pembatasan mengacu pada penggunaan ruang kosong dan elemen yang terlihat secara bersamaan untuk membuat pengelompokan visual. Container adalah bentuk yang mewakili area tertutup. Dalam satu tata letak, Anda dapat mengelompokkan elemen yang memiliki konten atau fungsi serupa dan memisahkannya dari elemen lain menggunakan ruang terbuka, tipografi, dan pemisah.
Android menggunakan baris, kolom, dan kotak sebagai elemen penyusun, sehingga Anda dapat mendesain penampungan dengan cara yang serupa. Kelompokkan item serupa dengan ruang kosong atau pembagian yang terlihat untuk membantu memandu Anda melihat konten.
Pembatasan implisit menggunakan ruang kosong untuk mengelompokkan konten secara visual guna membuat batas penampung, sedangkan pembatasan eksplisit menggunakan objek seperti garis pemisah dan kartu untuk mengelompokkan konten.
Gambar berikut menunjukkan contoh penggunaan penampungan implisit untuk menampung header dan salinan utama. Petak kolom digunakan untuk menyelaraskan dan membuat pengelompokan. Sorotan secara eksplisit terdapat dalam kartu. Menggunakan ikonografi dan hierarki huruf untuk pemisahan visual yang lebih baik.
3. Memposisikan konten
Dengan memilih petak tata letak dan konten dalam penampung, Android memiliki berbagai cara untuk menangani dan memosisikan elemen konten, dengan blok bangunan dasar dan pengubah atau penampung tata letak seperti petak dan flexbox.
Pertimbangkan apakah konten Anda satu dimensi atau dua dimensi. Misalnya, konten dapat mengalir secara horizontal, vertikal, atau di kedua arah.
Seperti yang ditunjukkan pada gambar berikut, tata letak autentikasi dapat menggunakan tata letak petak dua dimensi.
Elemen UI juga dapat menyesuaikan dan mengalir dalam satu dimensi, seperti filter atau tag konten. Pelajari flexbox lebih lanjut.
Tata letak juga dapat menggunakan kombinasi jenis tata letak. Misalnya, Anda dapat memasangkan carousel atau scroll horizontal dengan kartu vertikal. Atau, Anda dapat menyajikan diagram kustom dengan data daftar vertikal.
Anda dapat menyajikan konten dalam baris atau kolom yang dapat di-scroll dengan baris lambat dan kolom lambat.
Perataan
Mirip dengan alur dan perataan tata letak otomatis, Anda dapat menentukan penyusunan dan perataan elemen UI.
Gunakan AlignmentLine untuk membuat garis perataan kustom, yang dapat digunakan tata letak induk untuk meratakan dan memosisikan turunannya.
Anjuran
Larangan
4. Menskalakan dan memangkas konten
Penskalaan sangat penting untuk mengakomodasi konten dinamis, orientasi perangkat, dan ukuran layar. Elemen dapat tetap bernilai tetap atau diskalakan.
Tentukan cara gambar diskalakan dan diposisikan dalam penampungnya untuk memastikan gambar ditampilkan dengan benar di perangkat apa pun. Jika tidak, fokus utama gambar mungkin terpotong, atau gambar mungkin terlalu kecil atau terlalu besar untuk tata letak.
Sesuaikan rasio aspek dan orientasi perangkat yang berbeda dengan penskalaan dan pemangkasan yang tepat. Karena rasio aspek dapat sangat bervariasi, tentukan cara konten Anda menangani skenario ini.
Misalnya, gambar hero lebar penuh menutupi seluruh layar di ponsel dalam orientasi lanskap.
Anjuran
Larangan
Jika konten harus mempertahankan rasio aspek, seperti video khusus vertikal, batasi aspek dan seimbangkan ruang kosong.
Larangan
Konten yang disematkan
Banyak komponen memiliki interaksi, scrolling, dan pemosisian bawaan dengan slot atau scaffold, seperti panel aplikasi. Beberapa elemen dapat diubah agar tetap tetap alih-alih bereaksi terhadap scrolling, misalnya tombol tindakan mengambang (FAB) yang berisi tindakan penting. Sematkan elemen untuk fokus yang lebih baik dalam kasus penggunaan tertentu, misalnya, sematkan input teks ke keyboard untuk mencegah input tersembunyi.
Untuk input teks, seperti pesan dan autentikasi, input dilampirkan ke keyboard dan hanya fokus yang diberikan.
Komponen dalam tata letak
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.