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-main

commit 9082f62682f853ad5251a1c79dde9eccba7abdd9
Author: Max Alfonso-Ying <maxying@google.com>
Date: Thu Apr 18 00:34:40 2024

[M2 text field] Apply background to decoration box

...instead of to the BasicTextField, so changing the
backgroundColor will properly change the decoration
box's background color.

Fixes:

b/307694651

Test: added unit tests
Relnote: "Fix backgroundColor not applying to
TextFieldDecorationBox and OutlinedTextFieldDecorationBox.
Decoration boxes now accept a `shape` parameter."
Change-Id: I371c26718597cb36ac537e9412ce476532afb40d

M compose/material/material/api/current.txt
M compose/material/material/api/restricted_current.txt
M compose/material/material/integration-tests/material-demos/src/main/java/androidx/compose/material/demos/TextFieldDecorationBoxDemos.kt
M compose/material/material/src/androidInstrumentedTest/kotlin/androidx/compose/material/textfield/TextFieldDecorationBoxTest.kt
M compose/material/material/src/commonMain/kotlin/androidx/compose/material/OutlinedTextField.kt
M compose/material/material/src/commonMain/kotlin/androidx/compose/material/TextField.kt
M compose/material/material/src/commonMain/kotlin/androidx/compose/material/TextFieldDefaults.kt
M compose/material/material/src/commonMain/kotlin/androidx/compose/material/TextFieldImpl.kt

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

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

Assigned to je...@google.com.

moving particular sheets implementation bugs under material alias, keeping swipeable design-related issues to malkov@

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.