Compose TopAppBar has no background color

Question

I want to add a TopAppBar to my Compose app, so I did the following:

@OptIn(ExperimentalMaterial3Api::class)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            AlternoTubeTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    Scaffold(
                        topBar = {
                            TopAppBar(
                                title = {
                                    Text(
                                        stringResource(id = R.string.app_name),
                                        maxLines = 1,
                                        overflow = TextOverflow.Ellipsis
                                    )
                                },
                            )
                        },
                        content = { innerPadding ->
                            MyAppTheme(modifier = Modifier.padding(innerPadding))
                        }
                    )
                }
            }
        }
    }

The issue is, when I run the app, there is no color to my TopAppBar:

Whereas on the preview images, the app bar does have colors:

What can I try next to get the right colors?

Answer 1

Update July 23 M3 TopAppBarDefaults.smallTopAppBarColors() is deprecated

Now the color need to assign as TopAppBarDefaults.topAppBarColors making accepted answer deprecated.

Here is snippet of composable function for creating top App bar with customc colors for its background, Title, Navigation icon & Action icons adopting to theme colors instead of harcoded colors:

@Composable
@OptIn(ExperimentalMaterial3Api::class)
private fun ToolBar(
    title: String,
    onNavigationClick: () -> Unit,
    onSettingClick: () -> Unit
) {

    TopAppBar(
        // Customize Colors here
        colors = TopAppBarDefaults.topAppBarColors(
            containerColor = MaterialTheme.colorScheme.primary,
            titleContentColor = MaterialTheme.colorScheme.onPrimary,
            navigationIconContentColor = MaterialTheme.colorScheme.onPrimary,
            actionIconContentColor = MaterialTheme.colorScheme.onSecondary
        ),
        navigationIcon = {
            IconButton(onClick = onNavigationClick) {
                Icon(
                    imageVector = Icons.Filled.Menu,
                    contentDescription = "Navigation icon"
                )
            }
        },
        title = { Text(title) },
        actions = {
            IconButton(onClick = onSettingClick) {
                Icon(
                    Icons.Filled.Settings,
                    contentDescription = "Settings"
                )
            }
        })
}

usage:

Scaffold(
    topBar = {
        ToolBar( "Home Page", { /** handle Navigation Click */}) {
           /** handle Action Click*/
        }
    },

Light Mode

Dark Mode

Answer 2

With M3 the default value of the background color in the TopAppBar is defined in the TopAppBarDefaults.smallTopAppBarColors() with the containerColor attribute. The default value is the surface color defined in your theme.

Check your theme or you can override it using something like:

TopAppBar(
    title = {
        Text(
            stringResource(id = R.string.app_name),
            maxLines = 1,
            overflow = TextOverflow.Ellipsis
        )
    },
    colors = TopAppBarDefaults.smallTopAppBarColors(containerColor = Yellow)
)