Build a Beautiful TopAppBar in Jetpack Compose

Jetpack Compose has revolutionized Android development by simplifying UI creation with declarative programming. Among its many powerful features is the TopAppBar component, which serves as the primary app bar in many modern applications. In this blog post, we will explore how to build a stunning and functional TopAppBar using Jetpack Compose, diving into advanced customization, best practices, and optimization techniques to make your app stand out.

What is a TopAppBar in Jetpack Compose?

The TopAppBar is a key component in Material Design. It typically provides navigation options, branding, and action items in a compact space at the top of your app. In Jetpack Compose, the TopAppBar is implemented as a composable function, making it highly flexible and customizable compared to its View-based counterpart.

Basic Implementation

Here’s a basic example of how to use a TopAppBar in Jetpack Compose:

import androidx.compose.material.TopAppBar
import androidx.compose.material.Text
import androidx.compose.runtime.Composable

@Composable
fun SimpleTopAppBar() {
    TopAppBar(
        title = { Text(text = "My App") }
    )
}

This simple example creates a TopAppBar with a title. However, in real-world applications, you’ll often need to incorporate navigation icons, action buttons, and custom styling.

Customizing the TopAppBar

One of the greatest strengths of Jetpack Compose is its flexibility. Let’s explore how to customize the TopAppBar to match your app’s unique design requirements.

Adding a Navigation Icon

To add a navigation icon (e.g., a hamburger menu or back button), use the navigationIcon parameter:

import androidx.compose.material.Icon
import androidx.compose.material.TopAppBar
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Menu
import androidx.compose.runtime.Composable

@Composable
fun TopAppBarWithNavigation() {
    TopAppBar(
        title = { Text(text = "My App") },
        navigationIcon = {
            Icon(
                imageVector = Icons.Filled.Menu,
                contentDescription = "Menu Icon"
            )
        }
    )
}

This example adds a menu icon to the left of the title.

Adding Action Buttons

Action buttons are added using the actions parameter:

import androidx.compose.material.Icon
import androidx.compose.material.TopAppBar
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Search
import androidx.compose.material.icons.filled.MoreVert
import androidx.compose.runtime.Composable

@Composable
fun TopAppBarWithActions() {
    TopAppBar(
        title = { Text(text = "My App") },
        actions = {
            Icon(
                imageVector = Icons.Filled.Search,
                contentDescription = "Search Icon"
            )
            Icon(
                imageVector = Icons.Filled.MoreVert,
                contentDescription = "More Options Icon"
            )
        }
    )
}

Here, we’ve added search and overflow icons to the right side of the TopAppBar.

Advanced Customizations

For advanced designs, you may need to completely redefine the TopAppBar to align with your app’s branding and functionality.

Using Colors and Elevation

The backgroundColor and elevation parameters let you adjust the appearance of the TopAppBar:

import androidx.compose.material.MaterialTheme
import androidx.compose.material.TopAppBar
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color

@Composable
fun CustomStyledTopAppBar() {
    TopAppBar(
        title = { Text(text = "Custom AppBar") },
        backgroundColor = MaterialTheme.colors.primaryVariant,
        contentColor = Color.White,
        elevation = 8.dp
    )
}

Building a Collapsible TopAppBar

A collapsible TopAppBar provides an engaging user experience in content-heavy apps. While Jetpack Compose doesn’t provide a ready-made collapsible app bar, you can achieve this by combining TopAppBar with LazyColumn and scrolling listeners.

Here’s an example:

import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material.TopAppBar
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun CollapsibleTopAppBar() {
    val scrollState = remember { androidx.compose.foundation.lazy.rememberLazyListState() }
    val elevation = if (scrollState.firstVisibleItemIndex > 0) 8.dp else 0.dp

    androidx.compose.material.Scaffold(
        topBar = {
            TopAppBar(
                title = { Text(text = "Collapsible AppBar") },
                elevation = elevation
            )
        }
    ) {
        LazyColumn(
            state = scrollState,
            modifier = Modifier.fillMaxSize()
        ) {
            items(50) { index ->
                Text(text = "Item $index", modifier = Modifier.padding(16.dp))
            }
        }
    }
}

This implementation adjusts the elevation based on the scroll position, mimicking a collapsible app bar effect.

Performance Optimization Tips

1. Minimize Recompositions: Avoid unnecessary recompositions by ensuring the TopAppBar parameters are immutable or derived from stable state sources.

2. Use Material Design Guidelines: Stick to Material Design principles to ensure a consistent and intuitive user experience.

3. Test Responsiveness: Test your TopAppBar on various screen sizes and orientations to ensure it adapts seamlessly.

4. Lazy Loading for Icons: Use vector resources or lazy loading for icons to reduce memory usage.

Conclusion

Jetpack Compose’s TopAppBar is a powerful tool for creating modern, beautiful app bars. By mastering its customization options and adhering to best practices, you can build a polished and user-friendly app interface. Experiment with advanced techniques like collapsible app bars and styling to set your app apart.

With Jetpack Compose, the possibilities are endless. Leverage these insights to craft stunning TopAppBar designs and elevate your Android development skills.

If you found this guide helpful, consider sharing it with your developer community!