How to change background colour of SmallTopAppBar, CenterAlignedTopAppBar, MediumTopAppBar and LargeTopAppBar

Question

How can a color resource be used to change the background colour for a MD3 top app bar in Jetpack Compose?

Understandably, a colors property is available but it's not clear what to use for the above.

Color.kt

val MyColor = Color(0,5,5,255)

MainActivity.kt

MediumTopAppBar(title = {Text(text = "")})

Answer 1

The colors parameter is supposed to be used like so.

There's usually a Default Companion for these things, which provides a convenience function for modifying colors. For example, the default companion for Top bar colors is just TopAppBarDefaults.

Since you are referring to medium bars, we'll use the following

TopAppBarDefaults.mediumTopAppBarColors(
containerColor = Color(...) //Add your own color here, just to clarify.
)

These functions usually provide a containerColor and a contentColor parameter by default.

Solving your problems is... Super-easy, barely an inconvenience.