Jetpack Compose - TopAppBar

Penting
Pembahasan ini merupakan rentetan dari topik pembahasan tentang Dasar Dasar Jetpack Compose, terdapat hampir 100 pembahasan, untuk melihat daftarnya silahkan klik DAFTAR PEMBAHASAN COMPOSE
Pengertian
Apa itu TopAppBar?
TopAppBar adalah komponen dalam Jetpack Compose yang digunakan untuk menampilkan bar navigasi atau aksi di bagian atas layar aplikasi.
Kapan Harus Digunakan?
TopAppBar harus digunakan ketika Anda perlu:
- Menampilkan judul atau informasi penting di bagian atas layar.
- Memberikan akses navigasi atau tindakan yang relevan terhadap konten yang ditampilkan.
- Memiliki kontrol navigasi utama, seperti tombol kembali atau menu navigasi.
Perbedaan dengan BottomBar
- Posisi: TopAppBar ditempatkan di bagian atas layar, sedangkan BottomBar ditempatkan di bagian bawah layar.
- Fungsi: TopAppBar digunakan untuk navigasi dan tindakan di bagian atas, sementara BottomBar digunakan untuk navigasi dan aksi di bagian bawah layar.
- Visualisasi: TopAppBar biasanya lebih sederhana dan terbatas pada navigasi dan tindakan utama, sedangkan BottomBar sering menampilkan lebih banyak pilihan aksi.
- Interaksi: TopAppBar umumnya digunakan untuk navigasi antar layar atau menampilkan aksi yang lebih sedikit, sedangkan BottomBar sering kali digunakan untuk menu utama atau navigasi dalam satu layar.
Dengan menggunakan TopAppBar, Anda dapat memberikan akses mudah dan jelas kepada pengguna tentang informasi dan navigasi yang tersedia di bagian atas layar aplikasi.
Parameter/Atribut
@ExperimentalMaterial3Api
@Composable
fun TopAppBar(
title: @Composable () -> Unit,
modifier: Modifier = Modifier,
navigationIcon: @Composable () -> Unit = {},
actions: @Composable RowScope.() -> Unit = {},
windowInsets: WindowInsets = TopAppBarDefaults.windowInsets,
colors: TopAppBarColors = TopAppBarDefaults.topAppBarColors(),
scrollBehavior: TopAppBarScrollBehavior? = null
)
Parameter pada TopAppBar di Jetpack Compose
Berikut adalah penjelasan parameter-parameter yang ada di komponen TopAppBar
pada Jetpack Compose:
-
title:
@Composable () -> Unit
- Komponen yang menampilkan judul
TopAppBar
.
- Komponen yang menampilkan judul
-
modifier:
Modifier
- Modifier yang digunakan untuk menyesuaikan tata letak atau gaya visual dari
TopAppBar
.
- Modifier yang digunakan untuk menyesuaikan tata letak atau gaya visual dari
-
navigationIcon:
@Composable () -> Unit
- Komponen yang menampilkan ikon navigasi di sebelah kiri
TopAppBar
. Defaultnya adalah sebuah lambda kosong ({}
), artinya tidak ada ikon navigasi.
- Komponen yang menampilkan ikon navigasi di sebelah kiri
-
actions:
@Composable RowScope.() -> Unit
- Isi dari area aksi di sebelah kanan
TopAppBar
, seperti menu aksi atau tombol tambahan. Defaultnya adalah sebuah lambda kosong ({}
), artinya tidak ada aksi tambahan.
- Isi dari area aksi di sebelah kanan
-
windowInsets:
WindowInsets
- Inset jendela yang diterapkan pada
TopAppBar
. Defaultnya diambil dariTopAppBarDefaults.windowInsets
.
- Inset jendela yang diterapkan pada
-
colors:
TopAppBarColors
- Warna yang digunakan untuk mengatur latar belakang, teks, dan ikon di dalam
TopAppBar
. Defaultnya diambil dariTopAppBarDefaults.topAppBarColors()
.
- Warna yang digunakan untuk mengatur latar belakang, teks, dan ikon di dalam
-
scrollBehavior:
TopAppBarScrollBehavior?
- Perilaku scroll untuk
TopAppBar
. Jikanull
,TopAppBar
akan tetap terlihat di bagian atas layar. Jika diatur,TopAppBar
akan menghilang saat pengguna menggulir ke bawah dan muncul lagi saat pengguna menggulir ke atas.
- Perilaku scroll untuk
Penjelasan
-
title: Biasanya berisi teks atau gambar yang menunjukkan judul atau identitas layar saat ini.
-
modifier: Digunakan untuk menyesuaikan tata letak atau gaya visual dari
TopAppBar
, seperti menentukan ukuran atau margin. -
navigationIcon: Umumnya berisi ikon navigasi seperti panah kembali atau menu navigasi untuk memberikan kemudahan navigasi pengguna.
-
actions: Berisi daftar tindakan yang dapat dilakukan pengguna, seperti menu atau tombol untuk menjalankan fungsi tambahan.
-
windowInsets: Digunakan untuk menyesuaikan padding atau margin di sekitar
TopAppBar
, berguna untuk penyesuaian tampilan dengan elemen lain di layar. -
colors: Mengatur warna latar belakang, teks, dan ikon di dalam
TopAppBar
, memastikan kontras yang baik untuk keterbacaan yang optimal. -
scrollBehavior: Menentukan apakah
TopAppBar
akan bersembunyi saat pengguna menggulir layar ke bawah dan muncul kembali saat pengguna menggulir ke atas.
TopAppBar
adalah komponen penting dalam aplikasi yang digunakan untuk menampilkan informasi kunci, menyediakan akses navigasi, dan menawarkan tindakan-tindakan yang relevan dengan konten yang ditampilkan.
Contoh
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun DemoTopNavigation() {
val currentIndex = remember {
mutableIntStateOf(0)
}
Scaffold(
topBar = {
TopAppBar(
title = {
Text("The Ngoding", color = Color.White)
},
colors = TopAppBarDefaults.topAppBarColors(
containerColor = Color.Blue,
)
)
},
content = { paddingValues ->
// Konten Utama
// Di sini Anda bisa menambahkan komponen-komponen utama aplikasi.
Column(modifier = Modifier.padding(paddingValues)) {
Text(text = "The")
Text(text = "Ngoding")
}
},
floatingActionButton = {
// FloatingActionButton
// Di sini Anda bisa menambahkan FloatingActionButton dan logika aksi yang terkait.
Text(text = "FAB")
},
bottomBar = {
// Bottom Navigation
// Di sini Anda bisa menambahkan komponen Bottom Navigation.
NavigationBar {
NavigationBarItem(
icon = { Icon(Icons.Filled.Home, contentDescription = "Home") },
label = { Text("Home") },
selected = currentIndex.intValue == 0,
onClick = {
currentIndex.intValue = 0
}
)
NavigationBarItem(
icon = { Icon(Icons.Filled.Favorite, contentDescription = "Favorite") },
label = { Text("Favorite") },
selected = currentIndex.intValue == 1,
onClick = {
currentIndex.intValue = 1
}
)
NavigationBarItem(
icon = { Icon(Icons.Filled.Settings, contentDescription = "Settings") },
label = { Text("Settings") },
selected = currentIndex.intValue == 2,
onClick = {
currentIndex.intValue = 2
}
)
}
}
)
}
✨”Jika Kamu tidak sanggup menahan lelahnya belajar maka kamu harus sanggup menahan perihnya kebodohan” ✨Imam Syafi'i