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?

score 21 · Accepted Answer · answered Oct 07 '22 at 07:24

21

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)
)

answered Oct 07 '22 at 07:24

Gabriele Mariotti

320,139
94
887
841

Thanks for your answer, how do I change my colors so that they match those in the image? – thebluepandabear Oct 07 '22 at 07:33
Why is my surface color not the one that was in the example? I did a normal project setup, do you know any copy paste I could do so I can get those configurations? – thebluepandabear Oct 07 '22 at 07:36
You can start from the doc: https://m3.material.io/styles/color/the-color-system/tokens#7fd4440e-986d-443f-8b3a-4933bff16646 The default value defined in the `surface` color is currently = `Neutral99 = Color(red = 255, green = 251, blue = 254)` – Gabriele Mariotti Oct 07 '22 at 07:38
Thanks for the link, I think it's possibly an internal bug -- that should _not_ be the default `surface` color. – thebluepandabear Oct 07 '22 at 07:40
1

@GabrieleMariotti Can I add a custom image in M3 TopAppBar? I show `background` argument is removed in M3. I tried using `Modifier.paint()` but it's not reflecting TopAppBar. Any suggestion? – Arpit Patel Feb 11 '23 at 20:01

score 4 · Answer 2 · answered Jul 16 '23 at 11:28

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

Thank you for providing this answer. You already helped me within 7 hours ^_^ — Mathlight, Jul 16 '23 at 19:40

Compose TopAppBar has no background color

2 Answers2

Update July 23 M3 TopAppBarDefaults.smallTopAppBarColors() is deprecated

Update July 23 M3 `TopAppBarDefaults.smallTopAppBarColors()` is deprecated