Add Your Logo to the App Bar in Jetpack Compose

In modern Android app development, creating visually appealing and functional app bars is an essential part of providing a seamless user experience. With Jetpack Compose, Google’s declarative UI toolkit, building custom app bars with features like logos becomes straightforward yet powerful. In this post, we’ll explore how to add a logo to the app bar in Jetpack Compose, delving into best practices, advanced use cases, and techniques for a polished look.

Why Customize the App Bar?

The app bar (or toolbar) serves as a central UI component in most apps. Adding a logo can:

• Enhance brand identity by prominently displaying your company’s branding.

• Improve navigation clarity when combined with titles and icons.

• Provide a unique and professional visual touch to your app.

Using Jetpack Compose, you can achieve these goals with minimal boilerplate code.

Setting Up the Basic App Bar

Before we incorporate a logo, let’s start with the basic TopAppBar provided by Jetpack Compose. Here’s a quick example:

@Composable
fun BasicAppBar() {
    TopAppBar(
        title = { Text(text = "My App") },
        backgroundColor = MaterialTheme.colors.primary,
        contentColor = Color.White
    )
}

This creates a simple app bar with a title. To add a logo, we need to customize this layout.

Adding a Logo to the App Bar

To add a logo, you can use the Row composable to arrange the logo and title horizontally within the TopAppBar. Here’s how:

@Composable
fun AppBarWithLogo() {
    TopAppBar(
        backgroundColor = MaterialTheme.colors.primary,
        contentColor = Color.White,
        title = {
            Row(verticalAlignment = Alignment.CenterVertically) {
                Image(
                    painter = painterResource(id = R.drawable.logo),
                    contentDescription = "App Logo",
                    modifier = Modifier.size(40.dp)
                )
                Spacer(modifier = Modifier.width(8.dp))
                Text(text = "My App")
            }
        }
    )
}

Key Points:

• Image: The Image composable is used to display the logo. Replace R.drawable.logo with your actual logo resource.

• Spacer: Adds space between the logo and the title for a cleaner layout.

• Alignment: Ensures both the logo and text are vertically aligned.

Advanced Customizations

1. Dynamic Logos for Light and Dark Themes

If your app supports dark mode, use different logo assets for light and dark themes:

@Composable
fun AppBarWithDynamicLogo() {
    val isLightTheme = MaterialTheme.colors.isLight
    val logo = if (isLightTheme) R.drawable.logo_light else R.drawable.logo_dark

    TopAppBar(
        title = {
            Row(verticalAlignment = Alignment.CenterVertically) {
                Image(
                    painter = painterResource(id = logo),
                    contentDescription = "App Logo",
                    modifier = Modifier.size(40.dp)
                )
                Spacer(modifier = Modifier.width(8.dp))
                Text(text = "My App")
            }
        },
        backgroundColor = MaterialTheme.colors.primary,
        contentColor = Color.White
    )
}

2. Interactive Logos

Make your logo interactive by adding a clickable action, such as returning to the home screen:

@Composable
fun AppBarWithClickableLogo(onLogoClick: () -> Unit) {
    TopAppBar(
        title = {
            Row(verticalAlignment = Alignment.CenterVertically) {
                Image(
                    painter = painterResource(id = R.drawable.logo),
                    contentDescription = "App Logo",
                    modifier = Modifier
                        .size(40.dp)
                        .clickable(onClick = onLogoClick)
                )
                Spacer(modifier = Modifier.width(8.dp))
                Text(text = "My App")
            }
        },
        backgroundColor = MaterialTheme.colors.primary,
        contentColor = Color.White
    )
}

Here, the clickable modifier is used to make the logo respond to user taps.

Best Practices

1. Optimize Image Assets

• Use vector assets (e.g., .xml or .svg) for scalability and reduced file size.

• Compress raster images without sacrificing quality for optimal performance.

2. Maintain Accessibility

• Always provide a meaningful contentDescription for the logo to ensure it’s accessible to screen readers.

3. Follow Material Design Guidelines

• Align the logo and title as per Material Design specifications.

• Use proper padding and spacing for a clean, professional layout.

Real-World Use Cases

1. Branded Navigation Drawer

Combine your app bar logo with a navigation drawer icon:

@Composable
fun AppBarWithLogoAndDrawer(onDrawerClick: () -> Unit) {
    TopAppBar(
        navigationIcon = {
            IconButton(onClick = onDrawerClick) {
                Icon(
                    imageVector = Icons.Default.Menu,
                    contentDescription = "Menu Icon"
                )
            }
        },
        title = {
            Row(verticalAlignment = Alignment.CenterVertically) {
                Image(
                    painter = painterResource(id = R.drawable.logo),
                    contentDescription = "App Logo",
                    modifier = Modifier.size(40.dp)
                )
                Spacer(modifier = Modifier.width(8.dp))
                Text(text = "My App")
            }
        },
        backgroundColor = MaterialTheme.colors.primary,
        contentColor = Color.White
    )
}

2. Collapsing Toolbar with Logo

For a more advanced implementation, integrate the logo into a collapsing toolbar using LazyColumn or NestedScroll APIs for smooth animations.

Conclusion

Adding a logo to the app bar in Jetpack Compose is both simple and highly customizable, allowing you to enhance your app’s branding and user experience. By following best practices and leveraging Compose’s declarative nature, you can create professional and polished app bars tailored to your app’s needs.

Start experimenting with these techniques today and take your Compose app to the next level! If you found this guide helpful, share it with your developer community or leave a comment below.