Jetpack Compose Academy · Pelajaran

Bilah Bawah & Floating Action Button

Tetapkan navigasi dan tindakan utama.

Bilah Bawah & Floating Action Button adalah pelajaran Jetpack Compose Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Jetpack Compose Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Jetpack Compose Academy mencakup 4 pelajaran total.

Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.

Anchoring the Bottom

The thumb-friendly zone of a phone is the bottom. Scaffold's bottomBar and floatingActionButton slots put your key controls right where fingers reach. 👍

The bottomBar Slot

Whatever you place in the bottomBar slot is pinned to the bottom, and Scaffold shrinks the content area so nothing slides behind it.

Scaffold(
    bottomBar = { BottomAppBar { Text("Tools") } }
) { p -> }

BottomAppBar

BottomAppBar is a Material container for actions tied to the current screen, like edit or share buttons. It is a RowScope, so children flow left to right.

Meet the FAB

A FloatingActionButton is the round, raised button for the single most important action on a screen, like Add or Compose. ➕

FloatingActionButton(onClick = { }) {
    Icon(Icons.Default.Add, "Add")
}

The FAB Slot

Put your FAB in Scaffold's floatingActionButton slot, not in your content. Scaffold then floats it correctly above the bottom edge.

Scaffold(
    floatingActionButton = { FloatingActionButton(onClick = {}) {} }
) { p -> }

One FAB Per Screen

A FAB signals the primary action, so use just one per screen. Two competing FABs leave users unsure which one really matters.

FAB Position

Control where the FAB sits with floatingActionButtonPosition. The default is the bottom-right corner, but Center pairs nicely with a bottom bar.

floatingActionButtonPosition = FabPosition.Center

FAB Sizes

Beyond the standard FAB, Material 3 adds SmallFloatingActionButton and LargeFloatingActionButton so you can match the button to the screen's weight.

The ExtendedFAB

An ExtendedFloatingActionButton shows an icon plus a text label. It works well when the action's name is not obvious from an icon alone.

ExtendedFloatingActionButton(
    onClick = { },
    icon = { Icon(Icons.Default.Add, "Add") },
    text = { Text("New") }
)

Bars and FAB Together

Scaffold understands when a bottomBar and a FAB coexist, lifting the FAB so it never overlaps the bar. You just fill both slots.

Describe the FAB

Like any icon button, give the FAB's Icon a contentDescription. A bare plus sign means nothing to a screen reader without it.

Quick Check

How many FloatingActionButtons should a single screen normally show?

Recap

Use the bottomBar slot for screen actions and the floatingActionButton slot for one primary action. Scaffold spaces them so they never collide. ✨

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Bilah Bawah & Floating Action Button” gratis?

Ya — teks lengkap “Bilah Bawah & Floating Action Button” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Jetpack Compose Academy, upgrade ke CoddyKit PRO. Kursus Jetpack Compose Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Bilah Bawah & Floating Action Button”?

Tetapkan navigasi dan tindakan utama. Kamu berlatih Jetpack Compose Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Jetpack Compose Academy?

Tidak diperlukan pengalaman sebelumnya. Jetpack Compose Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Bilah Bawah & Floating Action Button” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Jetpack Compose Academy ini?

Ya. Setiap pelajaran Jetpack Compose Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Jetpack Compose Academy