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 kanonikal, dan teknik untuk menampilkan dan memosisikan konten.

Takeaway

• Patuhi area aman perangkat, yang mencakup bagian UI seperti cutout tampilan, inset tepi-ke-tepi, tampilan tepi, keyboard software, dan kolom sistem.

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

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

  

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

  

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

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

  Lakukan: Tetapkan spasi yang konsisten di antara elemen serupa.

  

• Jangan menggunakan tampilan potret atau tata letak ideal: Pertimbangkan berbagai rasio aspek, class ukuran, dan resolusi yang mungkin ditemui pengguna.

• Jangan membanjiri pengguna dengan terlalu banyak tindakan per tampilan.

• Saat membuat tata letak kustom, beri tahu bagaimana konten harus 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 kolom sistem, area navigasi, dan isi.

Kolom sistem

Status bar dan menu navigasi, yang secara keseluruhan 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 kolom sistem.

Kolom sistem adalah bagian integral dari antarmuka perangkat. Tambahkan mereka sebagai lapisan teratas dari desain Anda untuk memastikannya diperhitungkan dalam tata letak layar. Jika tidak, pengguna mungkin akan salah berasumsi bahwa maksudnya adalah untuk menyembunyikannya, Anda melewatkan gaya visual mereka, dan spasi bisa menjadi nonaktif.

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

Wilayah navigasi

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

Area isi

Area isi menyimpan konten layar. Konten isi terdiri dari pengelompokan dan parameter tata letak tambahan. API harus tetap berada di area navigasi dan bar sistem.

Deklarasikan WindowCompat.setDecorFitsSystemWindows(window, false) untuk inset tepi ke tepi.

Untuk menentukan komposisi dan pola navigasi yang tepat bagi tata letak, sebaiknya pahami cara pengguna berinteraksi dengan konten dan cara mereka menavigasi arsitektur informasi aplikasi. Pemahaman ini dapat memandu desain Anda agar lebih berfokus pada pengguna dengan membuat UI yang dapat ditindaklanjuti oleh pengguna.

Komposisi dan struktur konten

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

Struktur dasar: gunakan margin dan kolom untuk pagar pembatas visual

Untuk mulai membuat struktur yang kokoh dengan pagar pembatas yang konsisten, tambahkan margin dan kolom ke tata letak Anda.

Margin memberikan spasi di tepi kiri dan kanan layar serta konten. Nilai margin standar untuk ukuran yang ringkas adalah 16 dp, tetapi margin harus beradaptasi 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 atau inset aman inset pada langkah ini. Inset kolom sistem mencegah tindakan penting agar tidak jatuh di kolom sistem. Lihat Menggambar konten di belakang kolom sistem untuk mengetahui detailnya.

Gunakan kolom untuk membuat struktur petak yang fleksibel demi perataan yang konsisten, dan untuk memberikan definisi vertikal ke tata letak dengan membagi konten dalam area tubuh. Konten ditampilkan di area layar yang berisi kolom. Kolom ini memberikan struktur ke tata letak Anda, memberikan struktur yang praktis untuk mengatur elemen.

Gunakan petak kolom untuk menyelaraskan konten dengan petak yang mendasarinya, tetapi pertahankan ukuran yang fleksibel. Petak kolom dapat mengakomodasi berbagai faktor bentuk dengan mengubah ukuran kolom dan jumlah kolom sesuai kebutuhan menurut ukuran layar pada titik-titik tertentu, sekaligus memungkinkan konten untuk diskalakan juga. Hindari terlalu terperinci dengan petak kolom, inilah fungsi petak dasar: menyediakan unit spasi yang konsisten.

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

Menggunakan {i>containment<i} untuk mengelompokkan elemen secara visual

Pembatasan mengacu pada penggunaan ruang kosong dan elemen yang terlihat secara bersamaan untuk membuat pengelompokan visual. Penampung 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.

Anda dapat mengelompokkan item serupa dengan ruang kosong atau pembagian yang terlihat untuk membantu pengguna menjelajahi konten.

Pembatasan implisit menggunakan ruang kosong untuk mengelompokkan konten secara visual guna membuat batas penampung, sementara pembatasan eksplisit menggunakan objek seperti garis pembagi dan kartu untuk mengelompokkan konten.

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

Pemosisian konten

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

Gravitasi adalah standar untuk menempatkan objek dalam container yang berpotensi lebih besar untuk kasus penggunaan tertentu. Gambar berikut menunjukkan contoh posisi awal dan tengah objek (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 tetap atau diskalakan.

Penting untuk memperhatikan cara gambar ditampilkan dalam penampungnya dengan penskalaan dan posisi, untuk memastikan tampilan gambar yang Anda inginkan terlepas dari konteks perangkat. Jika tidak, fokus utama gambar dapat tampak terpotong , gambar bisa terlalu kecil atau besar untuk tata letak, atau efek yang tidak diinginkan lainnya.

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

Konten yang disematkan

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

Perataan

Gunakan AlignmentLine untuk membuat garis perataan kustom, yang dapat digunakan tata letak induk untuk meratakan dan memosisikan turunannya.

Jangan: mengganggu keterbacaan dengan memberikan jarak seperti elemen yang tidak konsisten, yang dapat membuat desain tampak kaku.

Lakukan: Tetapkan 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 terapkan 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 kolom samping navigasi untuk layar berukuran besar.

Meskipun panel navigasi dapat menampung lebih dari lima tujuan navigasi, polanya tidak ideal seperti menu navigasi karena perlu untuk menjangkau panel atas dengan ukuran yang ringkas.

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

Berikan kontrol agar pengguna dapat menyelesaikan tindakan. Pola umum mencakup tindakan panel atas, tombol tindakan mengambang (FAB), dan menu.

Untuk tindakan yang paling penting, FAB menyediakan tombol besar dan jelas bagi pengguna. Hanya sediakan satu tindakan dalam satu waktu pada level ini. FAB dapat muncul dalam beberapa ukuran dan bentuk yang diperluas, yang menyertakan label. Gunakan Scaffold untuk menyematkan FAB, yang memastikannya selalu terlihat bahkan saat di-scroll.

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

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

Tata letak kanonis

Manfaatkan tata letak kanonis sebagai titik awal, komposisi siap pakai yang membantu tata letak beradaptasi dengan kasus penggunaan dan ukuran layar umum. Tata letak ini bersifat estetika 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 View.

Tata letak daftar-detail

Tata letak daftar-detail memungkinkan pengguna menjelajahi daftar item yang memiliki informasi deskriptif, penjelasan, atau informasi tambahan lainnya—detail item. Untuk ukuran layar yang ringkas, hanya tampilan daftar atau detail yang akan terlihat. Daftar yang menampilkan kumpulan konten dalam tata letak berbasis baris merupakan bentuk tata letak paling umum untuk aplikasi. List-detail sangat ideal untuk aplikasi pesan, pengelola kontak, browser file, atau aplikasi apa pun yang kontennya 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 aplikasi foto dengan daftar foto buatan pengguna yang dapat di-scroll, yang unik untuk setiap pengguna dan berubah saat pengguna mengupload lebih banyak gambar. Gambar ini merupakan konten dinamis.
• Konten statis mewakili 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 setiap pengguna.

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

Pelajari 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 konten dalam jumlah besar dapat dilihat dengan cepat dan mudah. (Lihat Panduan Material 3 untuk menggunakan kartu dalam koleksi.) Feed dapat berupa konfigurasi berbasis daftar atau petak pada tampilan 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 dibuat oleh prinsip pembatasan tersirat atau eksplisit. (Lihat pembatasan di halaman ini untuk informasi selengkapnya.) Tata letak {i>grid<i} dapat diterapkan atau diatur secara lebih kaku untuk memvariasikan baris dan kolom. Keduanya harus memiliki penerapan spasi dan logika yang konsisten agar pengguna tidak bingung. Pelajari pedoman 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.

Tata letak panel pendukung

Tampilan seluler mungkin memerlukan konten atau kontrol pendukung. Biasanya dalam bentuk sheet atau dialog, tampilan ini dapat membantu tampilan utama tetap fokus dan 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 mungkin tampak relatif terhadap satu sama lain atau dibatasi pada penampung induk. Tata letak dapat bersifat lebih khusus, tetapi pastikan 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 khusus dengan data daftar vertikal.

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

Pelajari lebih lanjut dasar-dasar tata letak Compose dan apa saja yang membentuk composable.

Otentikasi adalah tata letak relatif yang umum, seperti yang ditunjukkan dalam 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 tata letak tampilan sesuai dengan hubungan antara tampilan yang setara dan tata letak induk, sehingga memungkinkan tata letak yang besar dan kompleks. ConstraintLayout memungkinkan Anda membuat build sepenuhnya dengan menarik lalu melepas, bukan mengedit XML menggunakan Layout Editor. Pelajari cara membangun UI dengan Layout Editor lebih lanjut.

Menyesuaikan tata letak

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

Untuk panduan desain tentang cara menyesuaikan tata letak ke ukuran layar yang diperluas, baca panduan developer Mendukung berbagai ukuran layar di Compose dan halaman Menerapkan Tata Letak M3. Anda juga dapat melihat galeri kanonis perangkat layar besar Android untuk mendapatkan inspirasi dan implementasi tata letak layar besar.

Meskipun tidak semua aplikasi harus tersedia di setiap ukuran layar, hal ini memberi pengguna lebih banyak kebebasan terkait ergonomi, kegunaan, dan kualitas aplikasi.

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

Untuk mengetahui informasi selengkapnya tentang tata letak, lihat 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.