Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
Jika aplikasi Anda berisi beberapa tujuan yang dapat dijelajahi pengguna, sebaiknya gunakan
pasangan tata letak dan navigasi yang umum digunakan oleh aplikasi lain.
Karena banyak pengguna sudah memiliki model mental untuk pasangan ini, aplikasi Anda akan lebih intuitif bagi mereka.
Pasangan tata letak dan navigasi
Panel 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 seluruh
tingkat hierarki yang sama. Komponen ini diterjemahkan ke kolom samping navigasi untuk layar besar.
Meskipun panel navigasi dapat menampung lebih dari lima tujuan navigasi,
pola ini tidak seideal menu navigasi.
Hal ini disebabkan oleh kebutuhan untuk menjangkau panel atas pada ukuran 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.
Di sini, tab berfungsi sebagai lapisan navigasi sekunder untuk mengelompokkan konten selevel.
Tindakan tata letak
Berikan kontrol untuk memungkinkan pengguna menyelesaikan tindakan. Pola umum mencakup
tindakan panel atas, tombol tindakan mengambang (FAB), dan menu.
Untuk tindakan yang paling penting, FAB menyediakan tombol besar dan menonjol bagi pengguna. Berikan hanya satu tindakan dalam satu waktu di tingkat ini. FAB dapat muncul dalam berbagai ukuran dan bentuk yang diperluas, yang mencakup
label. Gunakan Scaffold untuk menyematkan FAB, sehingga FAB selalu
terlihat meskipun saat scroll.
Tombol tindakan mengambang (FAB) yang memungkinkan
pengguna menambahkan tanaman dengan cepat ke galeri tanaman
Anda dapat menempatkan tindakan sekunder di dalam panel atas atau, jika dikelompokkan di dekat
konten terkait, di dalam halaman.
Gambar 20: Tindakan pemberitahuan di panel atas pada tampilan detail
(kiri) dan ikon overflow sebaris dengan item daftar (kanan)
Untuk tindakan tambahan yang tidak diperlukan dengan segera atau sering, tambahkan tindakan tersebut di menu tambahan.
Konten dan contoh kode di halaman ini tunduk kepada lisensi yang dijelaskan dalam Lisensi Konten. Java dan OpenJDK adalah merek dagang atau merek dagang terdaftar dari Oracle dan/atau afiliasinya.
Terakhir diperbarui pada 2025-08-28 UTC.
[null,null,["Terakhir diperbarui pada 2025-08-28 UTC."],[],[],null,["If your app contains multiple destinations for users to traverse, we recommend\nemploying layout and navigation pairings that are commonly used by other apps.\nBecause many users already possess the mental models for these pairings, your\napp will be more intuitive for them.\n\nLayout and navigation pairings\n\nThe navigation bar and modal navigation drawer are used as primary navigation\npatterns for parent layout views and primary navigation destinations. \n\nThe navigation bar can hold three to five navigation destinations across the\nsame hierarchy level. This component translates to the navigation rail for large\nscreens.\n\n\nAlthough the navigation drawer can hold more than five navigation destinations,\nthe pattern is not as ideal as the navigation bar.\nThis is due to the need to reach to the top bar on compact sizes. \n\n[Material 3 Tabs](https://m3.material.io/components/tabs/overview) and the [bottom app bar](https://m3.material.io/components/bottom-app-bar/overview) are\nsecondary navigation patterns that you can can use to supplement primary\nnavigation or appear on children views.\n\n\nHere, tabs act as a secondary navigation layer to group sibling content.\n\nLayout actions\n\nProvide controls to enable users to accomplish actions. Common patterns include\ntop bar actions, floating action button (FAB), and menus. \n\nFor actions of the highest importance, a [FAB](https://m3.material.io/components/floating-action-button/overview) provides a large\nand prominent button for the user. Provide only one action at a time at this\nlevel. A FAB can appear in multiple sizes and an expanded form, which includes a\nlabel. Use [Scaffold](/jetpack/compose/components/scaffold) to pin a FAB, making sure it's always\nvisible even on scroll by.\n\n\nA floating action button (FAB) that allows the\nuser to quickly add plants to the plant gallery\n\nYou can place secondary actions within the top bar or, if it's grouped near\nrelated content, within the page.\n**Figure 20:** Alert action in the top bar on show detail (left) and overflow icon inline of list item (right)\n\nFor any additional actions that aren't promptly or frequently needed, add those\nactions in an overflow menu."]]
