Custom Top App Bar menggunakan Jetpack Compose

Jetpack compose merupakan toolkit modern untuk pengembangan aplikasi android, selain pendekatan imperative, jetpack compose juga menawarkan kostumisasi yang sangat luas disesuaikan dengan kebutuhan pengembang aplikasi

Pada artikel kali ini, kita akan mencoba untuk membuat Top App Bar yang telah disesuaikan dengan skenario kebutuhan kita kali ini, namun sebelum itu, mari kita kenalan dulu dengan top app bar di android.

src: m3.material.io

Top App bar adalah komponen paling atas pada aplikasi android, secara umum kita dapat menangani beberapa aksi didalamnya, seperti menampilan text, action icon bahkan image, tetapi pada artikel ini kita akan mencoba membuat top app bar dengan beberapa item didalamnya.

Oke, mari kita mulai pembuatanya dengan tahapan sebagai berikut, aku asumikan kamu udah install android studio ya, kalo belum, silahkan install dulu karena kita akan menggunakannya pada artikel ini

1. Buat file kotlin baru, klik kanan pada root folder project android, dan create new kotlin file

untuk penamaan filenya bebas aja ya, disesuaikan dengan kebutuhan aplikasi kamu

2. pastikan sudah ada dependency material3 di gradle file

 implementation("androidx.compose.material3:material3")

atau bisa menggunakan despondency berikut

   implementation("androidx.compose.material3:material3:1.2.0-alpha12")

3. membuat composable function

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MainTopBar(onMenuClick: () -> Unit, modifier: Modifier = Modifier) {
  TopAppBar(modifier = Modifier.padding(8.dp), title = { /*TODO*/ },
        navigationIcon = {
            Row(
                modifier = Modifier
                    .padding(horizontal = 8.dp),
                verticalAlignment = Alignment.CenterVertically
            ) {
                OutlinedTextField(
                    modifier = modifier
                        .widthIn(max = 180.dp)
                        .padding(end = 8.dp),
                    value = query,
                    onValueChange = { newName ->
                        query = newName
                    },
                    leadingIcon = {
                        IconButton(onClick = {
                           // your callback here
                        }) {
                            Icon(
                                imageVector = Icons.Outlined.Search,
                                contentDescription = "Search",
                                modifier = modifier.size(24.dp)
                            )
                        }
                    },
                    placeholder = { Text(text = "Search here") }
                )
            }
        }, actions = {

            IconButton(onClick = { /*TODO*/ }) {
                Icon(
                    imageVector = Icons.Outlined.Email,
                    contentDescription = null,
                    modifier = modifier.size(24.dp)
                )
            }
            BadgedBox(modifier = Modifier,
                badge = {
                    Badge {
                        Text(text = "10")
                    }
                }
            ) {
                IconButton(onClick = { /*TODO*/ }) {
                    Icon(
                        imageVector = Icons.Outlined.ShoppingCart,
                        contentDescription = null,
                        modifier = modifier.size(24.dp)
                    )
                }
            }
            BadgedBox(modifier = Modifier,
                badge = {
                    Badge {
                        Text(text = "2")
                    }
                }
            ) {
                IconButton(onClick = { /*TODO*/ }) {
                    Icon(
                        imageVector = Icons.Outlined.Notifications,
                        contentDescription = null,
                        modifier = modifier.size(24.dp)
                    )
                }
            }

            IconButton(onClick = { /*TODO*/ }) {
                Icon(
                    imageVector = Icons.Outlined.Menu,
                    contentDescription = null,
                    modifier = modifier.size(24.dp)
                )
            }
        })
}

kode diatas akan menampilkan hasil seperti berikut

setelah berhasil membuat top app bar, kita panggil di mainApp atau komponen utama dari compose ya, pastikan untuk membungkus top app bar yang telah kita buat menggunakan scaffold ya, jadi kamu tidak perlu mengatur tata letaknya lagi, berikut aku berikan contohnya

fun MarketApp(modifier: Modifier = Modifier) {
    Scaffold(
        topBar = { MainTopBar(onMenuClick = {}) },
        bottomBar = { /*TODO*/})
    { paddingValues ->
        Column(
            modifier = modifier
                .verticalScroll(rememberScrollState())
                .padding(paddingValues)
        ) {
          //     your code compose here
        }
    }
}

setelah kamu mengimplementasikanya didalam scaffold, aplikasi kamu sekarang akan memiliki top app bar sendiri, berikut ketika dijalankan di emulator

yeay, sekarang kamu udah bisa membuat top app bar sendiri, selain itu, kamu juga sudah mengimplementasikan secara baik didalam scaffold, kamu bisa menambahkan komponen android lain, misalnya aksi ketika icon email di klik, bisa menampilkan toast atau snackbar, itu akan kita bahas atau kamu bisa coba sendiri ya, biar proses belajarmu lebih seru, semangat!

buat yang mau source code nya, bisa clone dari sini ya:

gunadermawan/android-market-compose: market ui apps using jetpack compose for my YouTube Tutorial (github.com)

aku juga share tutorial android development di channel youtube, kalo mau mampir kesini aja ya:

(326) Guna Dermawan — YouTube

sampai jumpa dilain waktu, happy coding all!

your friends,

Gun