[Feature Request] Bottom Sheets for Material 3 [244189383]

Fixed

Bug

Status Update

No update yet.

Description

de...@gmail.com

created issue #1

Aug 29, 2022 06:10PM

Feature Request to add BottomSheets to Compose for Material 3.
See Bottom sheets - Material Design 3. The Guidelines are also still missing.

Comments

de...@gmail.com <de...@gmail.com> #2Sep 21, 2022 03:19PM

There is a report about it in kotlinlang Slack: https://kotlinlang.slack.com/archives/C01D6HTPATV/p1706005056105739

se...@google.com <se...@google.com> #3Sep 21, 2022 03:35PM

Reassigned to se...@google.com.

Thanks for the report!

de...@gmail.com <de...@gmail.com> #4Sep 21, 2022 03:39PM

The release notes documentation has been edited to clarify this change in behavior for line height.

To support non-standard text sizes, we encourage users to follow the Material design system and use a different type scale rather than changing the font size directly. Alternatively, users can overwrite the line height like so: style = LocalTextStyle.current.copy(lineHeight = TextUnit.Unspecified), or create a custom Typography entirely.

Message last modified on Oct 13, 2022 09:40PM

se...@google.com <se...@google.com> Oct 18, 2022 06:35PM

Accepted by se...@google.com.

cn...@gmail.com <cn...@gmail.com> #5Nov 2, 2022 11:56AM

deleted

li...@gmail.com <li...@gmail.com> #6Dec 22, 2022 10:26AM

In my case, I have multiple font sizes in the same Text (using SpanStyle in AnnotatedString). There are legitimate reasons for this. For example, when combining Chinese and English (phonetic) together (for language-learning purposes).

ca...@gmail.com <ca...@gmail.com> #7Jan 3, 2023 07:29AM

I am using this workaround for now (

https://stackoverflow.com/questions/72518262/how-to-implement-bottomsheet-in-material-3-jetpack-compose-android) but it would be nice with an official implementation.

de...@gmail.com <de...@gmail.com> #8Jan 4, 2023 10:01AM

Is there a rough ETA?

se...@google.com <se...@google.com> #9Jan 4, 2023 05:10PM

We have a modal implementation with proper dialog functionality in review, aiming to land this as alpha by EOM but will try and keep folks posted if that changes.

de...@gmail.com <de...@gmail.com> #10Jan 4, 2023 05:12PM

Do you have a Gerrit link to the review?

se...@google.com <se...@google.com> #11Jan 11, 2023 03:59PM

Can be found at https://android-review.googlesource.com/2350463 🫡

Message last modified on Jan 26, 2023 08:48PM

an...@gmail.com <an...@gmail.com> #12Jan 25, 2023 10:32AM

Any updates when we can expect alpha with this?

b9...@gmail.com <b9...@gmail.com> #13Jan 26, 2023 07:24PM

Comment has been deleted.

Message last modified on Jan 27, 2023 03:24PM

ap...@google.com <ap...@google.com> #14Jan 27, 2023 04:12PM

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

commit 896d4c78e8aff51f39f1edd6883f8ddc3549b1a8
Author: serniebanders <serniebanders@google.com>
Date: Tue Dec 06 14:01:07 2022

[Material3][BottomSheet] M3 Modal Bottom Sheet implementation.

Bug: 244189383
Relnote: Modal bottom sheet implementation for Material 3, including ModalBottomSheet and ModalBottomSheetDefaults. Also introduces SheetState and rememberSheetState which can be used for future sheet components.
Test: Ported relevant tests from M2 Modal bottom sheet and popup.

Change-Id: I0853a6ec6d06166787701db1edb4a09b90dd563e

M compose/material3/material3/api/current.txt
M compose/material3/material3/api/public_plus_experimental_current.txt
M compose/material3/material3/api/restricted_current.txt
M compose/material3/material3/integration-tests/material3-catalog/src/main/java/androidx/compose/material3/catalog/library/model/Components.kt
M compose/material3/material3/integration-tests/material3-catalog/src/main/java/androidx/compose/material3/catalog/library/model/Examples.kt
A compose/material3/material3/samples/src/main/java/androidx/compose/material3/samples/BottomSheetSamples.kt
A compose/material3/material3/src/androidAndroidTest/kotlin/androidx/compose/material3/ModalBottomSheetTest.kt
A compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/ModalBottomSheet.kt
A compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/SheetDefaults.kt
M compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/SwipeableV2.kt
A compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/tokens/SheetBottomTokens.kt

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

se...@google.com <se...@google.com> Jan 27, 2023 08:13PM

Marked as fixed.

b9...@gmail.com <b9...@gmail.com> #15Jan 28, 2023 04:40PM

Can't wait next alpha!

ch...@appswithlove.com <ch...@appswithlove.com> #16Feb 2, 2023 08:49AM

Checked current implementation, it has a bug with nested scrolling, when you use nested scroll (fling) to dismiss bottom sheet it breaks

se...@google.com <se...@google.com> #17Feb 7, 2023 01:04PM

Given that this tracker is closed, do you mind filing a bug for this along with details to reproduce. Thanks!

pr...@google.com <pr...@google.com> #18Feb 8, 2023 06:21PM

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

androidx.compose.material3:material3:1.1.0-alpha06

dp...@phunware.com <dp...@phunware.com> #19Feb 8, 2023 09:58PM

This isn't fully fixed yet though, since we still don't have a standard bottom sheet. That ticket only added the modal version of it. Right?

ma...@gmail.com <ma...@gmail.com> #20Feb 8, 2023 10:48PM

I have a strange behavior where a textfield would not work to write inside it when has a bottom sheet as a parent. I can give more details but basically another textfield remains focused and it looks like both fields are focused (the one outside sheet and the one inside sheet, but when you write only the one outside works).

sk...@gmail.com <sk...@gmail.com> #21Feb 8, 2023 10:56PM

I've just reported this https://issuetracker.google.com/issues/268380384 - it seems to be a related issue.

jo...@google.com <jo...@google.com> #22Feb 9, 2023 09:17AM

#20, if the issue reported by #21 isn't the same as yours, can you file an issue with a repro?

na...@gmail.com <na...@gmail.com> #23Feb 9, 2023 09:25AM

Material 2 has a BottomSheetScaffold component with a sheetPeekHeight property, which allows things like small music controls to remain in view at the bottom of the screen when the sheet is collapsed and for this to expand to a full screen player UI when expanded. I can't seem to find how to do this peek effect using the Material 3 modal bottom sheet. Could I be missing something or should I open a ticket to request something like sheetPeekHeight? I apologise if the question is naïve or better suited to SO.

ma...@gmail.com <ma...@gmail.com> #24Feb 9, 2023 04:56PM

#22 it's exactly the same issue, easy to reproduce.

Get a Column with an OutlinedTextField or any input text field with a Bottom Sheet that contains another input text. You cannot type into the one inside the bottom sheet.

In my opinion the problem is not that the bottom sheet covers the keyboard, indeed it does that, but I was testing from the emulator and I was typing on the physical keyboard, I think it's more like a focus issue but we count on you guys to figure it out.

Message last modified on Feb 9, 2023 04:58PM

jo...@google.com <jo...@google.com> #25Feb 9, 2023 05:07PM

#24, gotcha! Please follow along in the other issue then :)

de...@gmail.com <de...@gmail.com> #26Feb 10, 2023 07:23PM

The BottomSheet still has serious problems with positioning. Depending on the height of the content, the BottomSheet floats in the middle of the screen or something similar, so that a lot of the app is still visible below the BottomSheet.

Is this already known, or should I create a ticket?

se...@google.com <se...@google.com> #27Feb 10, 2023 07:41PM

Yes, see https://issuetracker.google.com/268411386

For other issues please file new bugs so we can more effectively triage than coming back to this tracker.

at...@gmail.com <at...@gmail.com> #28Apr 20, 2023 06:37PM

There are some very serious accessibility issues with Bottom Sheet in 1.1.0-alpha-07. Talkback does not correctly find focus when bottom sheet is open

ja...@gmail.com <ja...@gmail.com> #29May 10, 2023 07:02PM

import androidx.compose.material3.BottomSheetScaffold

This import is not working for me

ja...@gmail.com <ja...@gmail.com> #30May 10, 2023 07:05PM

const val composeMaterial3 = "1.0.1"
const val composeVersion = "1.4.3"

compileOptions {
sourceCompatibility JavaVersion.VERSION_17
targetCompatibility JavaVersion.VERSION_17
}
kotlinOptions {
jvmTarget = '17'
}

Using the above version of Material3. Please share any suggestions.