Jetpack Compose - TopAppBar

The Ngoding

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.
  • modifier: Modifier

    • Modifier yang digunakan untuk menyesuaikan tata letak atau gaya visual dari TopAppBar.
  • navigationIcon: @Composable () -> Unit

    • Komponen yang menampilkan ikon navigasi di sebelah kiri TopAppBar. Defaultnya adalah sebuah lambda kosong ({}), artinya tidak ada ikon navigasi.
  • 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.
  • windowInsets: WindowInsets

    • Inset jendela yang diterapkan pada TopAppBar. Defaultnya diambil dari TopAppBarDefaults.windowInsets.
  • colors: TopAppBarColors

    • Warna yang digunakan untuk mengatur latar belakang, teks, dan ikon di dalam TopAppBar. Defaultnya diambil dari TopAppBarDefaults.topAppBarColors().
  • scrollBehavior: TopAppBarScrollBehavior?

    • Perilaku scroll untuk TopAppBar. Jika null, 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.

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

            }
        }
    )
}


navigationbar


✨”Jika Kamu tidak sanggup menahan lelahnya belajar maka kamu harus sanggup menahan perihnya kebodohan” ✨Imam Syafi'i

Video

The Ngoding

13 Alasan Jetpack Compose Lebih Baik untuk Pengembangan Aplikasi Android

Cong Fandi

Jetpack Compose - Surface

Cong Fandi

Jetpack Compose - CutCornerShape

Cong Fandi

Jetpack Compose - RoundedCornerShape

Cong Fandi

Jetpack Compose - CircleShape

Cong Fandi

Jetpack Compose - ConstraintSet

Cong Fandi

Jetpack Compose - BadgeBox

Cong Fandi

Video

The Ngoding

Tags