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

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

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

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

  

• Gunakan {i>containment<i} 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 seperti elemen yang tidak konsisten, yang dapat membuat desain tampak tidak rapi.

  Anjuran: Tetapkan spasi yang konsisten di antara elemen seperti.

  

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

• Jangan membanjiri pengguna Anda dengan terlalu banyak tindakan per tampilan.

• Saat membuat tata letak kustom, beri catatan bagaimana konten harus berada dalam tata letak menggunakan perataan, batasan, atau istilah gravitasi. Sertakan cara gambar 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.

Bilah sistem

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

Bilah sistem merupakan bagian integral dari antarmuka perangkat. Tambahkan mereka sebagai lapisan teratas dari desain Anda untuk memastikan mereka diperhitungkan dalam tata letak layar. Jika tidak, pengguna mungkin akan secara keliru berasumsi bahwa intent-nya adalah untuk menyembunyikannya, Anda melewatkan gaya visual, dan spasi dapat menjadi salah.

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

Wilayah navigasi

Navigasi merepresentasikan berbagai kemampuan yang memungkinkan pengguna bernavigasi dalam aplikasi, 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. Emulator harus tetap berada di region panel navigasi dan sistem.

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

Untuk menentukan pola komposisi dan navigasi yang sesuai untuk tata letak Anda, cari tahu cara pengguna berinteraksi dengan konten Anda, dan cara mereka menavigasi arsitektur informasi aplikasi Anda. Pemahaman ini dapat memandu desain Anda untuk 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 pemuatan untuk konten Anda.

Struktur dasar: gunakan margin dan kolom untuk pagar pembatas visual

Untuk mulai membuat struktur yang solid 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 rapat adalah 16 dp, tetapi margin harus dapat 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 aman atau inset inset pada langkah ini. Inset kolom sistem mencegah tindakan penting agar tidak berada di bawah kolom sistem. Lihat Menggambar konten di belakang kolom sistem untuk mengetahui detailnya.

Gunakan kolom untuk membuat struktur petak yang fleksibel demi penyelarasan yang konsisten, dan untuk memberikan definisi vertikal ke tata letak dengan membagi konten dalam area isi. Konten ditempatkan di area layar yang berisi kolom. Kolom ini memberikan struktur ke tata letak Anda, memberikan struktur yang mudah digunakan untuk mengatur elemen.

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

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

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

Penahanan mengacu pada penggunaan ruang putih 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 yang serupa dan memisahkannya dari elemen lain menggunakan ruang terbuka, tipografi, dan pembagi.

Anda dapat mengelompokkan item serupa bersama dengan ruang putih atau pembagian yang terlihat untuk membantu pengguna melalui konten.

Penahanan 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 pemuatan implisit untuk memuat header dan salinan utama. Kisi kolom digunakan untuk menyelaraskan dan membuat pengelompokan. Sorotan secara eksplisit terdapat dalam kartu. Menggunakan ikonografi dan hierarki jenis untuk pemisahan visual yang lebih besar.

Penempatan konten

Android memiliki beberapa cara untuk menangani elemen konten di container-nya 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 diperbaiki atau diskalakan.

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

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

Konten yang disematkan

Banyak elemen telah dibuat melalui interaksi, scroll, dan penentuan posisi 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 khusus, yang dapat digunakan tata letak induk untuk meratakan dan memosisikan turunannya.

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

Anjuran: Tetapkan spasi yang konsisten di antara elemen seperti.

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 Material dan Tata Letak.

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 menjadi kolom samping navigasi untuk layar berukuran besar.

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

Tab dan panel aplikasi bawah Material 3 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 di tingkat ini. FAB dapat muncul dalam beberapa ukuran dan bentuk yang diperluas, yang menyertakan 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 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 estetik dan fungsional, serta berasal dari panduan Material 3.

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

Tata letak detail daftar

Tata letak detail daftar memungkinkan pengguna menjelajahi daftar item yang memiliki informasi deskriptif, penjelasan, atau informasi tambahan lainnya—detail item. Untuk ukuran layar yang rapat, hanya tampilan daftar atau detail yang terlihat. Dengan menampilkan koleksi konten dalam tata letak berbasis baris, daftar menjadi bentuk tata letak paling umum untuk aplikasi. List-detail sangat 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 oleh 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 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 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 nyaman. (Lihat Panduan Material 3 untuk menggunakan kartu dalam koleksi.) Feed dapat berkonfigurasi berdasarkan 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 disusun oleh prinsip pembatasan tersirat atau eksplisit. (Lihat penampungan di halaman ini untuk informasi selengkapnya.) Tata letak petak dapat diterapkan secara lebih kaku atau bertahap untuk memvariasikan baris dan kolom. Keduanya harus memiliki penerapan spasi dan logika yang konsisten agar pengguna tidak bingung. 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.

Tata letak panel pendukung

Tampilan seluler mungkin memerlukan konten atau kontrol pendukung. Biasanya dalam bentuk sheet atau dialog, tampilan utama dapat membantu agar tampilan utama tetap fokus dan terapi. 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 terlihat relatif satu sama lain atau dibatasi untuk penampung induk. Tata letak bisa lebih disesuaikan, 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 bagan khusus dengan data daftar vertikal.

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

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

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 letak tampilan sesuai dengan hubungan antara tampilan yang setara dan tata letak induk, yang memungkinkan tata letak yang besar dan kompleks. ConstraintLayout memungkinkan Anda mem-build sepenuhnya dengan menarik lalu melepas, bukan mengedit XML menggunakan Layout Editor. Pelajari lebih lanjut cara mem-build UI dengan Layout Editor.

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 diubah, atau beradaptasi. Baik Web maupun Android menggunakan konsep desain responsif, seperti petak dan gambar fleksibel, untuk membuat tata letak yang lebih merespons konteksnya.

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 implementasi tata letak layar besar.

Meskipun tidak semua aplikasi harus tersedia pada 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) dengan ukuran class sebagai titik henti sementara agar berfungsi sebagai pedoman.
• Atau, desain konten agar bertindak secara responsif dengan memberi catatan 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.