How to create a TopAppBar in compose?

Issue

I am currently trying to create a seperate composable for the TopAppBar. I am going for something like this: https://gyazo.com/029064b4fb4169c5171a85934fcdcc7a. I want to be able to customize it seperat from the drawer. How can I achieve this ?

I tried to create a few following tutorials and re-search online but without any luck. I cannot figure out why it doesn't work!!

@Composable
fun ScaffoldWithTopBar() {
    Scaffold(
        topBar = {
            TopAppBar(
                title = {
                    Text(text = "Top App Bar")
                },
                navigationIcon = {
                    IconButton(onClick = {}) {
                        Icon(Icons.Filled.ArrowBack, "backIcon")
                    }
                },
                backgroundColor = MaterialTheme.colors.primary,
                contentColor = Color.White,
                elevation = 10.dp
            )
        }, content = {
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .background(Color(0xff8d6e63)),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text(
                    text = "Content of the page",
                    fontSize = 30.sp,
                    color = Color.White
                )
            }

        })
}

My Dependencies:

dependencies {

    // Kotlin extensions for androidx.test.core
    implementation 'androidx.core:core-ktx:kotlin_version'
   

    // Modal Drawer Layout
    implementation "androidx.drawerlayout:drawerlayout:1.1.1"

    // Compose, Compose UI, Compose Activity & Lifecycles
    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.4.1'
    implementation 'androidx.activity:activity-compose:compose_version'
    implementation "androidx.compose.ui:ui:compose_version"
    implementation "androidx.compose.ui:ui-tooling-preview:compose_version"

    // Navigation with Compose
    implementation "androidx.navigation:navigation-compose:2.5.0-rc02"

    // Using Visibility with an eye for Passwords
    implementation "androidx.compose.material:material-icons-extended:1.3.0-alpha01"

    // Material 3 Android UI
    implementation 'androidx.compose.material3:material3:1.0.0-alpha14'

    testImplementation 'junit:junit:4.13.2'

    androidTestImplementation "androidx.test:core-ktx:1.4.0"
    androidTestImplementation 'androidx.test.ext:junit:1.1.3'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'
    androidTestImplementation "androidx.compose.ui:ui-test-junit4:1.3.0-alpha01"
    debugImplementation "androidx.compose.ui:ui-tooling:1.3.0-alpha01"
    debugImplementation "androidx.compose.ui:ui-test-manifest:1.3.0-alpha01"
}

Solution

You need to choose whether you are using Material 2 or Material 3 and then update your dependencies accordingly.

Material 2 Version

@Composable
fun ScaffoldWithTopBar() {
    Scaffold(
        topBar = {
            TopAppBar(
                title = {
                    Text(text = "Top App Bar")
                },
                navigationIcon = {
                    IconButton(onClick = {}) {
                        Icon(Icons.Filled.ArrowBack, "backIcon")
                    }
                },
                backgroundColor = MaterialTheme.colors.primary,
                contentColor = Color.White,
                elevation = 10.dp
            )
        }, content = {
            Column(
                modifier = Modifier
                    .padding(it)
                    .fillMaxSize()
                    .background(Color(0xff8d6e63)),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text(
                    text = "Content of the page",
                    fontSize = 30.sp,
                    color = Color.White
                )
            }

        })
}

Material 3 Version

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ScaffoldWithTopBar() {
    Scaffold(
        topBar = {
            SmallTopAppBar(
                title = {
                    Text(text = "Top App Bar")
                },
                navigationIcon = {
                    IconButton(onClick = {}) {
                        Icon(Icons.Filled.ArrowBack, "backIcon")
                    }
                },
                colors = TopAppBarDefaults.smallTopAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primary,
                    titleContentColor = Color.White,
                ),
            )
        }, content = {
            Column(
                modifier = Modifier
                    .padding(it)
                    .fillMaxSize()
                    .background(Color(0xff8d6e63)),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text(
                    text = "Content of the page",
                    fontSize = 30.sp,
                    color = Color.White
                )
            }
        })
}

Answered By - Code Poet