Transparent TopAppBar and visible content behind it in Jetpack Compose

Question

I'm still learning compose and faced with a problem. I want to make a half-transparent TopBar, as in the photo.

I tried to add transparency direct to backgroundColor property. Tried to use Unspecified for color, but this also doesn't work, tried to find similar information, but all is not what I need. I would be very grateful if someone could tell me how to do this.

Here is Scaffold fun

fun ScaffoldCompose() {
    val navController = rememberNavController()

    val configuration = LocalConfiguration.current

    val parentHeight =
    Scaffold(
        bottomBar = {
            BottomBar(
                navController = navController,
                items = listOf(
                    BottomBarScreen.Home,
                    BottomBarScreen.Key,
                    BottomBarScreen.Chat
                )
            )
        },
        topBar = {
            TopBar()
        }
    ) { innerPadding ->
        Box(
            modifier = Modifier
            .padding(innerPadding)
        ) {
            BottomNavGraph(navController = navController)
        }
    }
}

Here is TopBar function.

@Composable
fun TopBar() {
    TopAppBar(
        title = {
            Box(
                modifier = Modifier
                    .fillMaxWidth(),
                contentAlignment = Alignment.Center
            ) {
                Text(
                    text = "Room 611",
                    fontSize = 20.sp,
                    maxLines = 1
                )
            }
        },
        backgroundColor = Color.Transparent.copy(alpha = 0.1f),
        navigationIcon = {
            IconButton(onClick = {

            }) {
                Icon(
                    Icons.Default.Menu, "Menu",
                    modifier = Modifier.size(34.dp)
                )
            }
        },
        actions = {
            IconButton(onClick = { // synchronize weather

            }) {
                Row() {
                    Icon(
                        modifier = Modifier
                            .size(29.dp),
                        painter = painterResource(id = R.drawable.weather_icon),
                        contentDescription = "Navigation Icon",
                        tint = Color.White,
                    )
                    Spacer(Modifier.width(4.dp))
                    Text(
                        text = "13°C",
                        fontSize = 22.sp,
                        color = Color.White
                    )
                }

            }
        },
        contentColor = Color.White,
    )
}

Answer 1

For partial transparent background for TopBar, you should set colors property for TopAppBar. Example:

TopAppBar(
    title = { Text(text = "Title") },
    colors = TopAppBarDefaults.topAppBarColors(
        containerColor = Color.Transparent.copy(alpha = 0.5f),
        navigationIconContentColor = Color.White,
        actionIconContentColor = Color.White,
    ),
    navigationIcon = {
        IconButton(onClick = { navController.navigateUp() }) {
            Icon(
                Icons.Default.ArrowBack,
                contentDescription = "Back",
            )
        }
    },
    actions = {},
)

Answer 2

You can change colors of a TopAppBar using TopAppBarDefaults.topAppBarColors.

Here is an example:

TopAppBar(colors = 
       TopAppBarDefaults.topAppBarColors(containerColor = Color.Cyan.copy(alpha = 0.3f)) ...,

Output screens:

Hope it helps,