Scaffold and BottomSheetScaffold top bar elevation handling Inconsistency [187771422]

Fixed

Bug

Status Update

No update yet.

Description

ze...@gmail.com

created issue #1

May 11, 2021 10:39AM

Jetpack Compose release version: 1.0.0-beta06

Android Studio Build: Android Studio Arctic Fox | 2020.3.1 Canary 15

Build #AI-203.7717.56.2031.7321754, built on April 29, 2021

Runtime version: 11.0.10+0-b96-7281165 x86_64

It seems that BottomSheetScaffold's content is overlapping topBar's elevation. Minimal code to reproduce:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

@Composable
fun GoodElevation() {
    Scaffold(
        topBar = {
            TopAppBar(backgroundColor = MaterialTheme.colors.background) { Text(text = "The good") }
        },
    ) {
        Surface(modifier = Modifier.fillMaxSize()) {}
    }
}

@Composable
fun BadElevation() {
    val scaffoldState = rememberBottomSheetScaffoldState()
    BottomSheetScaffold(
        scaffoldState = scaffoldState,
        topBar = {
            TopAppBar(backgroundColor = MaterialTheme.colors.background) { Text(text = "The bad") }
        },
        sheetContent = {
            Box(modifier = Modifier.height(250.dp)) { Text("whatever") }
        }
    ) {
        Surface(modifier = Modifier.fillMaxSize()) {}
    }
}

@Preview
@Composable
fun TheGoodPreview() {
    GoodElevation()
}

@Preview
@Composable
fun TheBadPreview() {
    BadElevation()
}

Zrzut ekranu 2021-05-11 o 12.33.13.png

8.3 KB

View

Download

Zrzut ekranu 2021-05-11 o 12.33.18.png

9 KB

View

Download

Comments

ma...@google.com <ma...@google.com> May 11, 2021 02:13PM

Assigned to je...@google.com.

ni...@google.com <ni...@google.com> #2Jun 15, 2021 01:09PM

Status: New

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

commit 01e6286fba92911346fa8cb2efd9bd024f18e11d
Author: Louis Pullen-Freilich <lpf@google.com>
Date: Fri Oct 30 18:20:15 2020

Adds androidx.compose.material.AmbientContentColor to replace androidx.compose.foundation.AmbientContentColor

Content color is a design system specific concept, and so the foundation
AmbientContentColor will be deprecated and replaced with the new material one.
Bug:

b/172067770

Test: updateApi
Relnote: "Adds androidx.compose.material.AmbientContentColor to replace androidx.compose.foundation.AmbientContentColor"

Change-Id: I84f7be83a15ed02b301c3d9d0e44481ebb01ddb0

M compose/material/material/api/current.txt
M compose/material/material/api/public_plus_experimental_current.txt
M compose/material/material/api/restricted_current.txt
A compose/material/material/src/commonMain/kotlin/androidx/compose/material/ContentColor.kt

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

ma...@google.com <ma...@google.com> #3Jun 17, 2021 05:27PM

Assigned to je...@google.com.

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

commit dea1c5dc2c9b8ed70e5c0c617cb9f96fa92335c1
Author: Louis Pullen-Freilich <lpf@google.com>
Date: Fri Oct 30 20:56:57 2020

Deprecates foundation content color and text style ambients, replacing them with Material theming ambients

Bug:

b/172067770

Test: updateApi
Relnote: "The foundation AmbientTextStyle, ProvideTextStyle, and AmbientContentColor have been deprecated. Instead use the new versions available in the Material library. For non-Material applications, you should instead create your own design system specific theming ambients that can be consumed in your own components."
Change-Id: I74accf7166eaca28e9e2d14402ed08d80f8625ab

M compose/animation/animation/integration-tests/animation-demos/src/main/java/androidx/compose/animation/demos/AnimateContentSizeDemo.kt
M compose/animation/animation/samples/src/main/java/androidx/compose/animation/samples/AnimationModifierSample.kt
M compose/desktop/desktop/src/jvmTest/kotlin/androidx/compose/desktop/ParagraphTest.kt
M compose/foundation/foundation/api/current.txt
M compose/foundation/foundation/api/public_plus_experimental_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/ListDemos.kt
M compose/foundation/foundation/samples/src/main/java/androidx/compose/foundation/samples/InteractionStateSample.kt
M compose/foundation/foundation/src/commonMain/kotlin/androidx/compose/foundation/BaseTextField.kt
M compose/foundation/foundation/src/commonMain/kotlin/androidx/compose/foundation/ContentColor.kt
M compose/foundation/foundation/src/commonMain/kotlin/androidx/compose/foundation/Icon.kt
M compose/foundation/foundation/src/commonMain/kotlin/androidx/compose/foundation/Text.kt
M compose/integration-tests/demos/src/main/java/androidx/compose/integration/demos/DemoFilter.kt
M compose/material/material/integration-tests/material-demos/src/main/java/androidx/compose/material/demos/ColorPickerDemo.kt
M compose/material/material/samples/src/main/java/androidx/compose/material/samples/ListSamples.kt
M compose/material/material/src/androidAndroidTest/kotlin/androidx/compose/material/AlertDialogTest.kt
M compose/material/material/src/androidAndroidTest/kotlin/androidx/compose/material/AppBarTest.kt
M compose/material/material/src/androidAndroidTest/kotlin/androidx/compose/material/ButtonTest.kt
M compose/material/material/src/androidAndroidTest/kotlin/androidx/compose/material/EmphasisTest.kt
M compose/material/material/src/androidAndroidTest/kotlin/androidx/compose/material/MenuTest.kt
M compose/material/material/src/androidAndroidTest/kotlin/androidx/compose/material/SurfaceContentColorTest.kt
M compose/material/material/src/androidAndroidTest/kotlin/androidx/compose/material/textfield/OutlinedTextFieldTest.kt
M compose/material/material/src/androidAndroidTest/kotlin/androidx/compose/material/textfield/TextFieldTest.kt
M compose/material/material/src/commonMain/kotlin/androidx/compose/material/AlertDialog.kt
M compose/material/material/src/commonMain/kotlin/androidx/compose/material/AppBar.kt
M compose/material/material/src/commonMain/kotlin/androidx/compose/material/BottomNavigation.kt
M compose/material/material/src/commonMain/kotlin/androidx/compose/material/Button.kt
M compose/material/material/src/commonMain/kotlin/androidx/compose/material/Colors.kt
M compose/material/material/src/commonMain/kotlin/androidx/compose/material/Emphasis.kt
M compose/material/material/src/commonMain/kotlin/androidx/compose/material/FloatingActionButton.kt
M compose/material/material/src/commonMain/kotlin/androidx/compose/material/Icon.kt
M compose/material/material/src/commonMain/kotlin/androidx/compose/material/ListItem.kt
M compose/material/material/src/commonMain/kotlin/androidx/compose/material/MaterialTheme.kt
M compose/material/material/src/commonMain/kotlin/androidx/compose/material/Menu.kt
M compose/material/material/src/commonMain/kotlin/androidx/compose/material/OutlinedTextField.kt
M compose/material/material/src/commonMain/kotlin/androidx/compose/material/Snackbar.kt
M compose/material/material/src/commonMain/kotlin/androidx/compose/material/Surface.kt
M compose/material/material/src/commonMain/kotlin/androidx/compose/material/Tab.kt
M compose/material/material/src/commonMain/kotlin/androidx/compose/material/Text.kt
M compose/material/material/src/commonMain/kotlin/androidx/compose/material/TextField.kt
M compose/material/material/src/commonMain/kotlin/androidx/compose/material/TextFieldImpl.kt
M compose/material/material/src/commonMain/kotlin/androidx/compose/material/ripple/RippleTheme.kt

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

jo...@google.com <jo...@google.com> Apr 8, 2022 05:56PM

Reassigned to jo...@google.com.

jo...@google.com <jo...@google.com> Apr 11, 2022 05:25PM

Accepted by jo...@google.com.

ap...@google.com <ap...@google.com> #4May 25, 2022 08:48AM

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

commit ee16c2fa8bfbd261a382f0c7fc51965357bb8155
Author: Jossi Wolf <jossiwolf@google.com>
Date: Tue Apr 12 16:59:15 2022

Draw order & Snackbar placement for BottomSheetScaffold

Previously, we were drawing the layout's body content over the top bar's elevation, but we now respect the draw order.

BottomSheetScaffold now also takes the sheet's state into account when placing Snackbars: in the collapsed state, Snackbars are placed above the sheet and FAB; in the expanded state, Snackbars are anchored to the sheet's bottom.

We are now also explicit about the case of sheetHeight == peekHeight, only having a collapsed anchor/state in this case. We are looking to explore different structures (i.e. a list) to represent multiple associated values for anchors.

Relnote: Fixed a bug where BottomSheetScaffold was drawing over the top app bar's shadow. BottomSheetScaffold now also takes the sheet's state into account when placing Snackbars: in the collapsed state, Snackbars are placed above the sheet and FAB; in the expanded state, Snackbars are anchored to the sheet's bottom.

Bug:

b/187771422

Test: Added a few tests around snackbar positioning and expected anchors in case sheetHeight == peekHeight, removed bottomSheetScaffold_topAppBarIsDrawnOnTopOfContent and created a screenshot test as replacement
Change-Id: Ia80b5d1ebcd4c86431eab22a985ab2b1fa824843

A compose/material/material/src/androidAndroidTest/kotlin/androidx/compose/material/BottomSheetScaffoldScreenshotTest.kt
M compose/material/material/src/commonMain/kotlin/androidx/compose/material/BottomSheetScaffold.kt
M compose/material/material/src/androidAndroidTest/kotlin/androidx/compose/material/BottomSheetScaffoldTest.kt

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

jo...@google.com <jo...@google.com> May 25, 2022 09:46AM

Marked as fixed, reassigned to jo...@google.com.