IssueTracker

Jetpack Compose version: 1.3.0-beta03

Jetpack Compose component used: androidx.compose.material3:material3:1.0.0-beta03

Android Studio Build: Android Studio Dolphin | 2021.3.1 | Build #AI-213.7172.25.2113.9014738

Kotlin version: 1.7.10

Problem:

If a custom container color is applied to MediumTopAppBar or LargeTopAppBar, the bottom half of the AppBar gets default color.

MediumTopAppBar(
        title = { Text(text) },
        colors = TopAppBarDefaults.mediumTopAppBarColors(
            containerColor = Color.RED,
        ),
)
        

Reason:

This is because of the color is only applied to the top section:

AppBar.kt, line 1166

        Column {
            TopAppBarLayout(
                modifier = Modifier
                    .background(color = appBarContainerColor) <- color here
                    .windowInsetsPadding(windowInsets)
                    // clip after padding so we don't show the title over the inset area
                    .clipToBounds(),
                heightPx = pinnedHeightPx,
                [...]
            )
            TopAppBarLayout(
                modifier = Modifier.clipToBounds(),  <- NO color here
                heightPx = maxHeightPx - pinnedHeightPx + (scrollBehavior?.state?.heightOffset
                    ?: 0f),
                [...]