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

Project: platform/frameworks/support
Branch: androidx-master-dev

commit c60f33e229e31ab328ef6b59dab63b264954831c
Author: Alexandre Elias <aelias@google.com>
Date: Fri Jul 10 16:23:09 2020

Semantics no-op cleanups

Partly in response to lmr's broad code review, I did a pass of
superficial API/implementation cleanup. The main changes are:

- I changed each Boolean SemanticsProperty where false is equivalent to
not being present to take "Unit" instead. This is conceptually
clearer: it avoids questions like "can I cancel out a semantics from a
merged child by setting it to false?" Because "property = Unit" looks
weird, I also changed the style of these to "property()".

- I moved the Semantics id generator closer to where it's used, in
SemanticsModifierCore. I made it internal and an AtomicInt.
(Note that integer ids are heavily used in the Android
AccessibilityNodeInfo APIs so I can't simply remove them entirely.)

- I deleted dead code. Some examples include SemanticsHintOverrides,
a public API not connected to anything, and SemanticsPropertyKey
merge() open method which is never called. (In both cases I have
a different plan in mind for accessibility.)

Fixes: 145951226
Fixes: 145955412
Test: existing tests
Relnote: "Single-value semantics properties now use a calling style.
For example, 'semantics { hidden = true }' is now written as:
'semantics { hidden() }'."

Change-Id: Ic1afd12ea22c926babc9662f1804d80b33aa0cfc

M ui/integration-tests/benchmark/src/androidTest/java/androidx/ui/benchmark/test/LayoutNodeModifierBenchmark.kt
M ui/ui-core/api/0.1.0-dev15.txt
M ui/ui-core/api/current.txt
M ui/ui-core/api/public_plus_experimental_0.1.0-dev15.txt
M ui/ui-core/api/public_plus_experimental_current.txt
M ui/ui-core/api/restricted_0.1.0-dev15.txt
M ui/ui-core/api/restricted_current.txt
M ui/ui-core/src/androidAndroidTest/kotlin/androidx/ui/graphics/vector/VectorTest.kt
M ui/ui-core/src/androidAndroidTest/kotlin/androidx/ui/semantics/SemanticsTests.kt
M ui/ui-core/src/androidMain/kotlin/androidx/ui/core/AndroidActuals.kt
M ui/ui-core/src/androidMain/kotlin/androidx/ui/core/AndroidComposeView.kt
M ui/ui-core/src/androidMain/kotlin/androidx/ui/core/AndroidComposeViewAccessibilityDelegateCompat.kt
M ui/ui-core/src/androidMain/kotlin/androidx/ui/core/AndroidPopup.kt
M ui/ui-core/src/commonMain/kotlin/androidx/ui/core/Expect.kt
M ui/ui-core/src/commonMain/kotlin/androidx/ui/core/semantics/SemanticsConfiguration.kt
D ui/ui-core/src/commonMain/kotlin/androidx/ui/core/semantics/SemanticsHintOverrides.kt
M ui/ui-core/src/commonMain/kotlin/androidx/ui/core/semantics/SemanticsModifier.kt
M ui/ui-core/src/commonMain/kotlin/androidx/ui/core/semantics/SemanticsNode.kt
M ui/ui-core/src/commonMain/kotlin/androidx/ui/core/semantics/SemanticsOwner.kt
M ui/ui-core/src/commonMain/kotlin/androidx/ui/core/semantics/SemanticsWrapper.kt
M ui/ui-core/src/commonMain/kotlin/androidx/ui/semantics/SemanticsProperties.kt
M ui/ui-foundation/api/0.1.0-dev15.txt
M ui/ui-foundation/api/current.txt
M ui/ui-foundation/api/public_plus_experimental_0.1.0-dev15.txt
M ui/ui-foundation/api/public_plus_experimental_current.txt
M ui/ui-foundation/api/restricted_0.1.0-dev15.txt
M ui/ui-foundation/api/restricted_current.txt
M ui/ui-foundation/src/main/java/androidx/ui/foundation/Clickable.kt
M ui/ui-foundation/src/main/java/androidx/ui/foundation/Dialog.kt
M ui/ui-foundation/src/main/java/androidx/ui/foundation/Scroller.kt
M ui/ui-foundation/src/main/java/androidx/ui/foundation/selection/Selectable.kt
M ui/ui-foundation/src/main/java/androidx/ui/foundation/selection/Toggleable.kt
M ui/ui-foundation/src/main/java/androidx/ui/foundation/semantics/FoundationSemanticsProperties.kt
M ui/ui-material/src/androidTest/java/androidx/ui/material/ButtonTest.kt
M ui/ui-material/src/androidTest/java/androidx/ui/material/CardTest.kt
M ui/ui-material/src/androidTest/java/androidx/ui/material/CheckboxScreenshotTest.kt
M ui/ui-material/src/androidTest/java/androidx/ui/material/RadioButtonScreenshotTest.kt
M ui/ui-material/src/androidTest/java/androidx/ui/material/ScaffoldTest.kt
M ui/ui-material/src/androidTest/java/androidx/ui/material/SnackbarTest.kt
M ui/ui-material/src/androidTest/java/androidx/ui/material/SurfaceTest.kt
M ui/ui-material/src/androidTest/java/androidx/ui/material/ripple/RippleIndicationTest.kt
M ui/ui-material/src/androidTest/java/androidx/ui/material/textfield/TextFieldScreenshotTest.kt
M ui/ui-material/src/main/java/androidx/ui/material/AppBar.kt
M ui/ui-material/src/main/java/androidx/ui/material/TextFieldImpl.kt
M ui/ui-test/src/androidTest/java/androidx/ui/test/AssertsTest.kt
M ui/ui-test/src/androidTest/java/androidx/ui/test/CallSemanticsActionTest.kt
M ui/ui-test/src/androidTest/java/androidx/ui/test/ErrorMessagesTest.kt
M ui/ui-test/src/androidTest/java/androidx/ui/test/FindersTest.kt
M ui/ui-test/src/androidTest/java/androidx/ui/test/PrintToStringTest.kt
M ui/ui-test/src/androidTest/java/androidx/ui/test/ScrollToTest.kt
M ui/ui-test/src/androidTest/java/androidx/ui/test/TextActionsTest.kt
M ui/ui-test/src/main/java/androidx/ui/test/Actions.kt
M ui/ui-test/src/main/java/androidx/ui/test/Filters.kt
M ui/ui-text/api/0.1.0-dev15.txt
M ui/ui-text/api/current.txt
M ui/ui-text/api/public_plus_experimental_0.1.0-dev15.txt
M ui/ui-text/api/public_plus_experimental_current.txt
M ui/ui-text/api/restricted_0.1.0-dev15.txt
M ui/ui-text/api/restricted_current.txt
M ui/ui-text/src/commonMain/kotlin/androidx/ui/text/CoreTextField.kt
M ui/ui-text/src/commonMain/kotlin/androidx/ui/text/TextSemanticsProperties.kt

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

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 ?