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-main
Author: Louis Pullen-Freilich <lpf@google.com>
Link: https://android-review.googlesource.com/3328184

Adds OverscrollEffect#withoutDrawing and OverscrollEffect#withoutEventHandling

Expand for full commit details

Adds OverscrollEffect#withoutDrawing and OverscrollEffect#withoutEventHandling 
 
These APIs allow overscroll to have events dispatched to it by one component, and rendered in a separate component. 
 
Fixes: b/266550551 
Fixes: b/204650733 
Fixes: b/255554340 
Fixes: b/229537244 
Test: OverscrollTest 
Relnote: "Adds OverscrollEffect#withoutDrawing and OverscrollEffect#withoutEventHandling APIs - these APIs create a wrapped instance of the provided overscroll effect that doesn't draw / handle events respectively, which allows for rendering  overscroll in a separate component from the component that is dispatching events. For example, disabling drawing the overscroll inside a lazy list, and then drawing the overscroll separately on top / elsewhere." 
Change-Id: Idbb3d91546b49c1987a041f959bce4b2b09a9f61

Files:

M compose/foundation/foundation/api/current.txt
M compose/foundation/foundation/api/restricted_current.txt
M compose/foundation/foundation/integration-tests/foundation-demos/src/main/java/androidx/compose/foundation/demos/OverscrollDemo.kt
M compose/foundation/foundation/samples/src/main/java/androidx/compose/foundation/samples/OverscrollSample.kt
M compose/foundation/foundation/src/androidInstrumentedTest/kotlin/androidx/compose/foundation/OverscrollTest.kt
M compose/foundation/foundation/src/commonMain/kotlin/androidx/compose/foundation/Overscroll.kt

Hash: f64e25b7a473c757d080521e7dd97b3f6670f60d
Date: Fri Nov 01 18:43:56 2024

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

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

androidx.compose.foundation:foundation:1.8.0-alpha06
androidx.compose.foundation:foundation-android:1.8.0-alpha06
androidx.compose.foundation:foundation-jvmstubs:1.8.0-alpha06
androidx.compose.foundation:foundation-linuxx64stubs:1.8.0-alpha06

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 ?