Jetpack Compose: TopAppBar center title

Centering the Title in Jetpack Compose TopAppBar: A Guide for Android Kotlin Developers

Jetpack Compose has revolutionized Android UI development, offering a powerful, declarative approach to building user interfaces. One of the most commonly used UI components in modern applications is the TopAppBar, which typically houses the app's title, navigation icons, and other action items. While it’s quite straightforward to implement a TopAppBar, customizing it to fit specific design requirements, such as centering the title text, may not be immediately obvious to new developers or those transitioning from the XML-based approach.

In this article, we will break down a practical example of how to create a TopAppBar in Jetpack Compose with a centered title. We'll explore how to leverage composables, modifiers, and Jetpack Compose's layout capabilities to achieve this design. This guide is perfect for developers looking to get a better understanding of structuring a TopAppBar while ensuring a clean and modern appearance.

Scaffold and Setting Up the Composable Environment

In Jetpack Compose, the Scaffold composable serves as a convenient structure to organize UI components like TopAppBar, BottomAppBar, FloatingActionButton, and more. The example begins with a Scaffold function that defines the layout of the app. The topBar parameter is used to specify our custom TopAppBarContent function, which we’ll explore shortly.

The Scaffold is initialized in the onCreate method of the MainActivity, using the setContent function to define the entire UI composition. By doing so, we establish a declarative style where the content is directly set using composable functions, eliminating the need for traditional XML layouts. This approach aligns with Jetpack Compose's philosophy of building UI components through Kotlin code, making the process more dynamic and efficient.

Designing the TopAppBar with a Centered Title

The core of this example lies in customizing the TopAppBar to have a centered title. By default, the title in a TopAppBar is aligned to the start (left side) of the bar. To achieve a centered title, the example wraps the Text composable inside a Box with the Modifier.fillMaxSize() and contentAlignment = Alignment.Center. This ensures that the title occupies the full width of the TopAppBar while being centrally aligned.

The background color of the TopAppBar is set using a custom color, enhancing the visual appeal of the application. Additionally, the TopAppBar includes a navigation icon (a hamburger menu icon) on the left and action icons (a favorite and delete button) on the right. These icons are added using the IconButton composable, allowing for interactive elements that can be expanded to handle specific actions.

Adding Icons and Handling Actions

The navigation icon and action buttons are implemented to provide users with a more interactive experience. The example uses IconButton and Icon composables to create clickable icons. The Icons.Filled set provides a collection of predefined icons that are ready to use. Although in this example, the click actions are placeholders (// do something here), you can easily replace these with specific functionalities, such as opening a drawer, favoriting an item, or deleting content.

This modular design makes the code reusable and adaptable, as developers can extend the functionality of these icons to suit their specific needs. The clean separation between the TopAppBarContent and MainContent functions also ensures that the layout remains organized and maintainable.

Displaying Main Content with a Center-Aligned Box

The main body of the application is handled by the MainContent composable, which uses another Box layout to center-align its content. In this case, the centered text simply displays “TopAppBar Center Title,” serving as a placeholder for more complex content that could be integrated into the app. This demonstrates how Box can be effectively used not only in the TopAppBar but also throughout the application to align elements precisely.

Previewing the Composables

Jetpack Compose includes a powerful @Preview annotation that allows developers to see the UI in Android Studio’s preview pane without needing to run the app on an actual device or emulator. Although the example includes a ComposablePreview function, it is commented out in this instance. This capability can be particularly useful during development, as it enables rapid iteration and testing of UI changes.

Summary

This example demonstrates how to effectively utilize Jetpack Compose’s TopAppBar to create a centered title, navigation, and action buttons within a clean and maintainable structure. By leveraging the Scaffold, Box, and Modifier composables, you can achieve highly customizable layouts with minimal code. This approach not only simplifies UI design but also provides flexibility for developers to adapt the layout as the application's requirements evolve.

As Jetpack Compose continues to grow in popularity, mastering its components will be essential for Android developers looking to build modern, responsive apps. Understanding how to customize foundational elements like the TopAppBar will give you a strong foundation to explore more complex UI patterns and interactions in your future projects.

MainActivity.kt


package com.cfsuman.jetpackcompose

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.material.Text
import androidx.compose.material.TopAppBar
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier


class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            GetScaffold()
        }
    }


    @Composable
    fun GetScaffold(){
        Scaffold(
            topBar = { TopAppBarContent() },
            content = {MainContent()},
            backgroundColor = Color(0xFFEDEAE0)
        )
    }


    @Composable
    fun TopAppBarContent() {
        TopAppBar(
            title = { Box(
                modifier = Modifier.fillMaxSize(),
                contentAlignment = Alignment.Center
            ){
                Text(text = "Title")
            }},
            backgroundColor = Color(0xFFC0E8D5),

            navigationIcon = {
                IconButton(onClick = {
                    // do something here
                }) {
                    Icon(
                        Icons.Filled.Menu,
                        contentDescription = "Localized description"
                    )
                }
            },

            actions = {
                IconButton(onClick = {
                    // do something here
                }) {
                    Icon(
                        Icons.Filled.Favorite,
                        contentDescription = "Localized description"
                    )
                }
                IconButton(onClick = {
                    // do something here
                }) {
                    Icon(
                        Icons.Filled.Delete,
                        contentDescription = "Localized description"
                    )
                }
            }
        )
    }


    @Composable
    fun MainContent(){
        Box(
            modifier = Modifier.fillMaxSize(),
            contentAlignment = Alignment.Center
        ){
            Text(
                text = "TopAppBar Center Title",
                style = MaterialTheme.typography.h5
            )
        }
    }


    @Preview
    @Composable
    fun ComposablePreview(){
        //GetScaffold()
    }
}