Home > Software engineering >  Android Material3 Kotlin TopAppBar Unable to set background color
Android Material3 Kotlin TopAppBar Unable to set background color

Time:01-28

I am trying to create TopAppBar but could not find the backgroundColor field for the TopAppBar function.

Material3 version which i am using
implementation 'androidx.compose.material3:material3:1.1.0-alpha01'

This is how my function looks like

fun topbar() {
    TopAppBar(
        title = {
            Text(
                "TopBar",
                maxLines = 1,
                overflow = TextOverflow.Ellipsis
            )
        },
        navigationIcon = {
            IconButton(onClick = { /* doSomething() */ }) {
                Icon(
                    imageVector = Icons.Filled.Menu,
                    contentDescription = "Localized description"
                )
            }
        },
        actions = {
            // RowScope here, so these icons will be placed horizontally
            IconButton(onClick = { /* doSomething() */ }) {
                Icon(
                    imageVector = Icons.Filled.Search,
                    contentDescription = "Localized description"
                )
            }
            IconButton(onClick = { /* doSomething() */ }) {
                Icon(
                    imageVector = Icons.Filled.Menu,
                    contentDescription = "Localized description"
                )
            }
        }
    )
}

CodePudding user response:

You can set its color property to apply background color.

fun topbar() {
   TopAppBar(
       ... Other properties
       color: Color = 
       MaterialTheme.colors().primary,
       ... Other properties
   )
}

Hope this helps you.

Happy Coding!

CodePudding user response:

For example:

fun topbar() {
   TopAppBar(
       ... Other properties
       color: Color = 
      //Add your own color here, just to clarify.
      TopAppBarDefaults.mediumTopAppBarColors(containerColor = Color(...) 
    )
   )
}

CodePudding user response:

This worked.

TopAppBar(
        colors = TopAppBarDefaults.smallTopAppBarColors(containerColor = Color.Red),
        title = {
            Text(
                "Test Bar",
                maxLines = 1,
                overflow = TextOverflow.Ellipsis
            )
        },
  • Related