TwoRowsTopAppBar does not apply container color to bottom row [250838918]

Fixed

Bug

Status Update

No update yet.

Description

ph...@gmail.com

created issue #1

Oct 4, 2022 11:19AM

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),
                [...]

Comments

ph...@gmail.com <ph...@gmail.com> #2Oct 4, 2022 11:28AM

the same issue for SmallTopAppBar: https://issuetracker.google.com/issues/250838918

co...@google.com <co...@google.com> Oct 6, 2022 12:45PM

Reassigned to sg...@google.com.

sg...@google.com <sg...@google.com> Oct 12, 2022 11:32PM

Accepted by sg...@google.com.

ap...@google.com <ap...@google.com> #3Oct 13, 2022 04:35PM

Project: platform/frameworks/support
Branch: androidx-main

commit 46c69840b7e4462f71a2289213f2771ae7702c9f
Author: Shalom Gibly <sgibly@google.com>
Date: Wed Oct 12 16:05:59 2022

Updates medium and large top app bar background

Updates to apply the same background color to both part of the Medium or
Large top app bar.
This change also allows such a top app bar to be made transparent.

Bug: 249688556
Bug: 250838918
Test: AppBarTest passing
Relnote: "Updates Material3 Medium and Large top app bars to apply the
same background color across their entire surface, and to allow setting
overriding the default colors with transparent color values."

Change-Id: I67659d8754b953165a5b2fa3c7a5720a0976665e

M compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/AppBar.kt

https://android-review.googlesource.com/2253154

sg...@google.com <sg...@google.com> Oct 13, 2022 04:35PM

Marked as fixed.

fu...@gmail.com <fu...@gmail.com> #4Oct 25, 2022 11:31PM

I encountered this issue, on what version of material 3 has this been fixed?

fu...@gmail.com <fu...@gmail.com> #5Oct 26, 2022 12:08AM

This is my workaround for this issue

MaterialTheme(
            colorScheme = MaterialTheme.colorScheme.copy(
                //The color you want for the second top app bar
                surface = MaterialTheme.colorScheme.primary
            ),
            typography = MaterialTheme.typography
        ) {
            LargeTopAppBar(
                modifier = Modifier.background(MaterialTheme.colorScheme.primary),
                title = {
                    Text("Wednesday")
                },
            )
        }

Message last modified on Oct 26, 2022 12:10AM

na...@google.com <na...@google.com> #6Nov 9, 2022 06:28PM

The following release(s) address this bug.It is possible this bug has only been partially addressed:

androidx.compose.material3:material3:1.0.1
androidx.compose.material3:material3:1.1.0-alpha02

pa...@gmail.com <pa...@gmail.com> #7Mar 24, 2023 12:23AM

This issue is still present in material3:1.0.1 - moving to 1.1.0-beta01 fixed it for me.

Message last modified on Mar 24, 2023 12:34AM

da...@gmail.com <da...@gmail.com> #8Jul 13, 2023 09:03AM

i am also getting the same issue, is there any solution for this ?