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.

    Video 1: Menyediakan tata letak yang fleksibel bagi pengguna untuk berinteraksi
  • Simpan interaksi penting, seperti navigasi utama, di area layar yang dapat dijangkau.

    Gambar 1: Tombol tindakan mengambang (FAB) menyediakan titik interaksi yang terlihat jelas dan dapat dijangkau
  • Gunakan pembatasan untuk mengelompokkan konten terkait guna memandu pengguna melalui konten dan tindakan.

    Gambar 2: Kartu yang menggunakan pembatasan eksplisit untuk mengelompokkan konten dengan tindakan terkait
  • 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.

    Gambar 3: Jangan mengganggu keterbacaan
  • 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.

Gambar 4: Bagian-bagian aplikasi Android: kolom sistem (1), area navigasi (2), dan isi (3)

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.

Gambar 5: Kolom sistem (1)

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

Gambar 6: Area navigasi (2)

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.

Gambar 7: Area isi

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.

Gambar 8: Margin (1) dan inset kolom sistem (2)

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.

Gambar 9: Layar seluler sering dibagi menjadi empat kolom

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.

Video 2: Mulai menambahkan teks ke struktur tata letak. Margin melindungi konten dari tepi layar. Kolom memberikan struktur spasi dan perataan yang konsisten.

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.

Gambar 10: Membagi konten menjadi dua pengelompokan header dan teks utama yang lebih besar

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.

Gambar 11: Contoh pembatasan implisit

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.

Gambar 12: Contoh tata letak yang menunjukkan batas pembatasan dan posisi elemen

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).

Gambar 13: Memosisikan gravitasi konten turunan dan tampilan induk

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.

Gambar 14: Gambar yang dipangkas di tengah, yang memastikan tanaman dipusatkan dalam container, berapa pun ukuran perangkatnya

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

Gambar 15: Konten yang tidak diberi anotasi dapat muncul secara tidak terduga

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.

Gambar 16: Jangan mengganggu keterbacaan

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.

Gambar 17: Tujuan navigasi utama dalam menu navigasi

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

Gambar 18: Tab berfungsi sebagai lapisan navigasi sekunder untuk mengelompokkan konten seinduk (sekunder)

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.

Gambar 19: Tombol tindakan mengambang (FAB) yang memungkinkan pengguna menambahkan tanaman ke galeri tanaman dengan cepat

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

Gambar 20: Tindakan pemberitahuan di panel atas pada opsi tampilkan detail (kiri) dan ikon menu tambahan dalam baris item daftar (kanan)

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.

Gambar 21: Tata letak kanonis

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.

Gambar 22: Koleksi konten satu dimensi

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

Tata letak feed

Gambar 23: Galeri foto dalam tata letak petak adalah format feed yang umum

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.

Gambar 24: Sheet bawah dapat berfungsi sebagai konten pendukung untuk tampilan utama

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.

Gambar 25: Tata letak dapat memiliki kombinasi pengelompokan, daftar, dan petak

Otentikasi adalah tata letak relatif yang umum, seperti yang ditunjukkan dalam gambar berikut.

Gambar 26: Autentikasi sebagai tata letak umum

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

Gambar 27: Tata letak layar penuh, 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.

SISIPKAN TEKS ALT DI SINI

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.