Create Top App Bar in Jetpack Compose

Top app bars display information and actions at the top of a screen. This Top App Bar has slots for a title, navigation icon, and actions.

title - the title to be displayed in the top app bar.

navigation Icon - the navigation icon displayed at the start of the top app bar. This should typically be an Icon Button or Icon Toggle Button.

actions - the actions displayed at the end of the top app bar. This should typically be Icon Buttons. The default layout here is a Row, so icons inside will be placed horizontally.

Scaffold

The Scaffold widget implements the basic material design visual layout structure in a jetpack compose application. Scaffold widget provides API to insert several material components to construct app screen such as Top App Bar, Bottom App Bar, Floating Action Button, etc. So that, we can show a Floating Action Button in our jetpack compose application using the Scaffold ‘floating Action Button’ parameter. Simply we can pass a Floating Action Button instance to this parameter to show a floating action button on our mobile device screen. 

Also Read How to create compose check box

MainAcivity.kt

package com.codingbihar.jetpackcomposeskill

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import com.codingbihar.jetpackcomposeskill.ui.theme.JetpackComposeSkillTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            JetpackComposeSkillTheme {

                TopAppBarScreen()

            }
        }
    }
}

Top App Bar Screen

package com.codingbihar.jetpackcomposeskill

import android.annotation.SuppressLint
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Menu
import androidx.compose.material.icons.filled.Share
import androidx.compose.material3.BottomAppBar
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.FabPosition
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.NavigationBarItem
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.unit.sp

@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TopAppBarScreen(){
    val result = remember { mutableStateOf("") }
    val selectedItem = remember { mutableStateOf("share")}
    val fabShape = RoundedCornerShape(50)

    Scaffold(
        topBar = {
            TopAppBar(
                title = {
                    Text(text = "Top App bar")
                },
                navigationIcon = {
                    IconButton(
                        onClick = {
                            result.value = "Drawer icon clicked"
                        }
                    ) {

                        Icon(imageVector =Icons.Filled.Menu,

                            contentDescription = "")
                    }
                },
            )
        },

        content = {
            Box(
                Modifier
                    .background(Color(0XFFE3DAC9))
                    .padding(16.dp)
                    .fillMaxSize(),
                contentAlignment = Alignment.Center
            ) {
                    Text(
                        text = result.value,
                        fontSize = 22.sp,
                        fontFamily = FontFamily.Serif
                    )
            }
        },

        floatingActionButton = {
            FloatingActionButton(
                onClick = {result.value = "FAB clicked"},
                shape = fabShape,


                ) { Icon(Icons.Filled.Add,"")
            }
        },
        floatingActionButtonPosition = FabPosition.End,

        bottomBar = {
            BottomAppBar(
                //cutoutShape = fabShape,
                content = {
                    NavigationBarItem(
                        icon = {
                            Icon(Icons.Filled.Favorite , "")
                        },
                        label = { Text(text = "Favorite")},
                        selected = selectedItem.value == "favorite",
                        onClick = {
                            result.value = "Favorite icon clicked"
                            selectedItem.value = "favorite"
                        },
                        alwaysShowLabel = false
                    )
                    NavigationBarItem(
                        icon = {
                            Icon(Icons.Filled.Share ,  "")
                        },

                        label = { Text(text = "Share")},
                        selected = selectedItem.value == "share",
                        onClick = {
                            result.value = "Share icon clicked"
                            selectedItem.value = "share"
                        },
                        alwaysShowLabel = false
                    )
                }
            )
        }
    )
}

OUTPUT :-

Explanation:

1. result is used to display messages when buttons are clicked.
2. selectedItem keeps track of which bottom navigation item is selected.
3. TopAppBar: Displays a title and optional icons.
4. Navigation Icon (IconButton): The hamburger menu icon on the left (clicking it updates result).
5. Title (Text): Displays "Top App bar".
6. Box: A simple layout to center its content.
7. background(Color(0XFFE3DAC9)): Sets a light beige background.
8. Inside Box: A Text widget shows messages when the user interacts with the UI.
9. FloatingActionButton: A round button placed on the screen.
10. When clicked, it updates result.value to "FAB clicked".
11. shape = RoundedCornerShape(50): Makes it round.
12. BottomAppBar: Holds navigation items.
13. NavigationBarItem:
14. "Favorite" button updates result.value when clicked.
15. "Share" button does the same and is selected by default.
16. alwaysShowLabel = false: Hides labels when not selected.