Style an Elegant AppBar in Jetpack Compose with Material 3

Jetpack Compose has revolutionized Android development by offering a declarative approach to UI design. With the introduction of Material 3, developers now have powerful tools to create polished and modern interfaces. One of the most commonly used UI components in Android apps is the AppBar. In this blog post, we’ll dive deep into how to style an elegant AppBar using Jetpack Compose and Material 3, exploring advanced customization options, best practices, and performance considerations.

What is Material 3?

Material 3, also known as Material You, is Google’s latest design language, emphasizing personalization and dynamic theming. It builds upon the foundations of Material Design while introducing:

  • Dynamic color theming based on the user’s wallpaper.

  • Improved accessibility features, including contrast adjustments.

  • Modernized components with enhanced customization options.

Jetpack Compose provides direct support for Material 3 through its Material3 library, allowing developers to craft cohesive and visually stunning apps.

Understanding the AppBar in Jetpack Compose

An AppBar, often seen at the top of an app’s screen, provides navigation and contextual actions. In Jetpack Compose, AppBars can be implemented using TopAppBar, SmallTopAppBar, MediumTopAppBar, or LargeTopAppBar from the Material 3 library. Each variant caters to specific use cases:

  • SmallTopAppBar: Ideal for compact screens or simple interfaces.

  • MediumTopAppBar: Useful for screens requiring a balance between compactness and content.

  • LargeTopAppBar: Suitable for detail-heavy screens, offering more space for titles and actions.

Setting Up a Basic AppBar

To get started, let’s create a basic SmallTopAppBar with a title and navigation icon:

import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource

@Composable
fun BasicAppBar() {
    SmallTopAppBar(
        title = { Text("Home") },
        navigationIcon = {
            IconButton(onClick = { /* Handle navigation */ }) {
                Icon(
                    painter = painterResource(id = R.drawable.ic_menu),
                    contentDescription = "Menu"
                )
            }
        },
        colors = TopAppBarDefaults.smallTopAppBarColors(
            containerColor = MaterialTheme.colorScheme.primary,
            titleContentColor = Color.White,
            navigationIconContentColor = Color.White
        )
    )
}

This creates a simple AppBar with a primary-colored background and white text/icons.

Advanced Styling for an Elegant AppBar

An elegant AppBar often combines aesthetics and functionality. Let’s explore how to:

  1. Add gradient backgrounds.

  2. Implement scroll behavior.

  3. Incorporate dynamic theming.

  4. Add animations.

1. Adding Gradient Backgrounds

To create a gradient background, use a Brush with the containerColor parameter:

import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color

@Composable
fun GradientAppBar() {
    SmallTopAppBar(
        title = { Text("Elegant AppBar") },
        navigationIcon = {
            IconButton(onClick = { /* Handle navigation */ }) {
                Icon(
                    painter = painterResource(id = R.drawable.ic_back),
                    contentDescription = "Back"
                )
            }
        },
        colors = TopAppBarDefaults.smallTopAppBarColors(
            containerColor = Color.Transparent
        ),
        modifier = Modifier.background(
            Brush.horizontalGradient(
                colors = listOf(
                    MaterialTheme.colorScheme.primary,
                    MaterialTheme.colorScheme.secondary
                )
            )
        )
    )
}

This creates a horizontal gradient transitioning from the primary to the secondary color.

2. Implementing Scroll Behavior

To make the AppBar respond to scrolling, use the TopAppBarScrollBehavior provided by Material 3:

import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier

@Composable
fun ScrollableAppBar() {
    val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior()

    Scaffold(
        topBar = {
            SmallTopAppBar(
                title = { Text("Scroll Behavior") },
                scrollBehavior = scrollBehavior
            )
        }
    ) { innerPadding ->
        LazyColumn(modifier = Modifier.padding(innerPadding)) {
            items(50) {
                Text(
                    text = "Item $it",
                    modifier = Modifier.padding(16.dp)
                )
            }
        }
    }
}

This makes the AppBar collapse and expand based on user scroll interactions.

3. Incorporating Dynamic Theming

Leverage Material 3’s dynamic theming capabilities to adapt the AppBar’s appearance:

@Composable
fun DynamicThemedAppBar() {
    SmallTopAppBar(
        title = { Text("Dynamic Theme") },
        colors = TopAppBarDefaults.smallTopAppBarColors(
            containerColor = MaterialTheme.colorScheme.primaryContainer,
            titleContentColor = MaterialTheme.colorScheme.onPrimaryContainer
        )
    )
}

This ensures the AppBar blends seamlessly with the app’s dynamic color palette.

4. Adding Animations

For an animated AppBar, use AnimatedVisibility or animate its properties directly:

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember

@Composable
fun AnimatedAppBar() {
    val isVisible = remember { mutableStateOf(true) }

    AnimatedVisibility(visible = isVisible.value) {
        SmallTopAppBar(
            title = { Text("Animated AppBar") },
            navigationIcon = {
                IconButton(onClick = { isVisible.value = !isVisible.value }) {
                    Icon(
                        painter = painterResource(id = R.drawable.ic_menu),
                        contentDescription = "Toggle Visibility"
                    )
                }
            }
        )
    }
}

This introduces a smooth transition when toggling the AppBar’s visibility.

Best Practices for Styling AppBars

  • Keep it minimal: Avoid overcrowding the AppBar with too many actions or icons.

  • Ensure contrast: Maintain sufficient contrast between the AppBar’s background and content for readability.

  • Optimize for performance: Use lightweight composables and avoid overloading the AppBar with heavy operations.

  • Test for responsiveness: Ensure the AppBar looks great on various screen sizes and orientations.

Conclusion

Styling an elegant AppBar in Jetpack Compose with Material 3 involves combining foundational components with advanced customization techniques. Whether it’s adding gradients, enabling dynamic theming, or incorporating animations, Jetpack Compose offers unparalleled flexibility for crafting modern UIs.

By following the techniques and best practices outlined in this post, you can create AppBars that not only look stunning but also provide a seamless user experience. Start experimenting with these features and take your app’s design to the next level!