Creating a Fully Customizable Top App Bar in Android with Jetpack Compose

The top app bar is a crucial component of any Android application’s user interface. It typically houses important actions and navigation elements, providing users with quick access to key features. In this article, we’ll explore how to create a fully customizable top app bar using Jetpack Compose, Google’s modern UI toolkit for Android.

Setting Up Your Project

Before we dive into the code, make sure you have the latest version of Android Studio installed. Create a new Android project or open an existing one.

Next, make sure you have the Compose dependencies in your build.gradle file:

dependencies {
    // ...
    implementation "androidx.compose.ui:ui:1.5.4"
    implementation "androidx.compose.material:material:1.5.4"
    // ...
}

Defining a Custom Top App Bar

To create a customizable top app bar, we’ll define a Composable function that takes parameters for the title, actions, and navigation drawer icon.

@Composable
fun CustomTopAppBar(
    title: String,
    actions: @Composable RowScope.() -> Unit,
    onNavIconClick: () -> Unit
) {
    TopAppBar(
        title = { Text(text = title) },
        navigationIcon = {
            IconButton(onClick = onNavIconClick) {
                Icon(Icons.Default.Menu, contentDescription = null)
            }
        },
        actions = actions
    )
}

Using the Custom Top App Bar

Now, let’s use our custom top app bar in an example activity:

@Composable
fun CustomTopAppBarExample() {
    Scaffold(
        topBar = {
            CustomTopAppBar(
                title = "My App",
                actions = {
                    IconButton(onClick = { /* Handle action */ }) {
                        Icon(Icons.Default.Search, contentDescription = null)
                    }
                    IconButton(onClick = { /* Handle action */ }) {
                        Icon(Icons.Default.Settings, contentDescription = null)
                    }
                },
                onNavIconClick = { /* Handle navigation icon click */ }
            )
        }
    ) {
        // Content of your screen goes here
    }
}

Customizing the Top App Bar

Now, let's explore some customization options for the top app bar:

Custom Background Color

You can alter the background color by modifying the backgroundColor parameter in the TopAppBar composable.

TopAppBar(
    backgroundColor = Color.Red, // Change to desired color
    title = { Text(text = title) },
    // ...
)

Modifying the Title Appearance

Adjust the title's appearance by incorporating style attributes.

TopAppBar(
    title = {
        Text(
            text = title,
            color = Color.White, // Set the text color
            fontWeight = FontWeight.Bold, // Define font weight
            fontSize = 20.sp // Set font size
        )
    },
    // ...
)

Adding Custom Icons

Integrate your own icons for actions and navigation.

CustomTopAppBar(
    title = "My App",
    actions = {
        IconButton(onClick = { /* Handle action */ }) {
            Icon(imageVector = ImageVector.vectorResource(R.drawable.custom_icon), contentDescription = null)
        }
    },
    navigationIcon = {
        IconButton(onClick = { /* Handle navigation */ }) {
            Icon(imageVector = ImageVector.vectorResource(R.drawable.custom_navigation_icon), contentDescription = null)
        }
    }
)

Leveraging Jetpack Compose, building a fully customizable top app bar with a plethora of action buttons and a dynamic navigation drawer is a breeze. By harnessing the power of composability, tailoring the UI to suit your app's unique design and functionality becomes an effortless endeavor.