Objective

Recreate the Customizable Top Bar from the Taskose UI design kit I acquired, utilizing Android Jetpack Compose.

Related Content

Android Compose Task App Implementation Series: Custom Dropdown Menu

Environment

• Android Studio Iguana | 2023.2.1
• Compose version: composeBom = "2024.02.02"
• Pixel 6 API 30 Emulator
• Project Minimum SDK: 27

Implementation

Step 1

Download the needed resources here (icons and IconButtonDropdownMenu.kt).

Step 2

Create the TopBar.kt file with the following content.

// Your package ...

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

@Composable
fun TopBar(
    title: String,
    height: Dp = 64.dp,
    topBarDividerColor: Color = Color(0xFF31394F).copy(alpha = 0.50f),
    titleTextStyle: TextStyle = TextStyle(
        fontWeight = FontWeight.Bold,
        fontSize = 18.sp,
        color = Color(0xFF31394F)
    ),
    leftIconComposable: @Composable (() -> Unit)? = null,
    rightIconComposable: @Composable (() -> Unit)? = null,
    topBarIconPadding: Dp = 12.dp
) {
    Column {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(height)
                .padding(horizontal = topBarIconPadding)
        ) {
            leftIconComposable?.let {
                Box(modifier = Modifier.align(Alignment.CenterStart)) {
                    it()
                }
            }
            Text(
                text = title,
                style = titleTextStyle,
                modifier = Modifier.align(Alignment.Center)
            )
            rightIconComposable?.let {
                Box(modifier = Modifier.align(Alignment.CenterEnd)) {
                    it()
                }
            }
        }
        HorizontalDivider(color = topBarDividerColor)
    }
}

Step 3

Create the TopBarPreview.kt file with the following content.

// Your package ...

import android.widget.Toast
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.testTag
import androidx.compose.ui.res.vectorResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.tooling.preview.Preview
// import YOUR_PACKAGE_PATH.IconButtonDropdownMenu
// import YOUR_PACKAGE_PATH.MenuItem

@Composable
@Preview
fun ImprovedTopBarPreview() {
    val context = LocalContext.current
    TopBar(
        title = "Title",
        titleTextStyle = TextStyle.Default,
        leftIconComposable = {
            IconButton(
                onClick = {
                    Toast.makeText(context, "Back button clicked", Toast.LENGTH_SHORT).show()
                }
            ) {
                Icon(
                    imageVector = ImageVector.vectorResource(id = R.drawable.ic_back),
                    contentDescription = null
                )
            }
        },
        rightIconComposable = {
            IconButtonDropdownMenu(
                iconDrawableId = R.drawable.ic_more,
                menuItems = listOf(
                    MenuItem(R.drawable.ic_calendar, label = "Calendar") {
                        Toast.makeText(context, "Calendar clicked", Toast.LENGTH_SHORT).show()
                    },
                    MenuItem(R.drawable.ic_done, label = "Check") {
                        Toast.makeText(context, "Check clicked", Toast.LENGTH_SHORT).show()
                    },
                    MenuItem(label = "Add Project") {
                        Toast.makeText(context, "Add Project clicked", Toast.LENGTH_SHORT).show()
                    },
                )
            )
        }
    )
}