Bottom sheets should not be full width on large screens [234927577]

Fixed

Feature Request

Status Update

No update yet.

Description

an...@microsoft.com

created issue #1

Jun 5, 2022 06:47PM

Jetpack Compose version: 1.2.0-beta02 Jetpack Compose component used: androidx.compose.material.ModalBottomSheetLayout Android Studio Build: 2022.1.1 Kotlin version: 1.6.20

Steps to Reproduce or Code Sample to Reproduce:

have a ModalBottomSheetLayout in your application
Open it on a large tablet device, its full width there are no modifiers available to change this without also changing the background scrim.

This makes it not possible to meet the quality guidelines for large screen apps in T2-1 / LS-U2:

Modals, options menus, and other secondary elements are properly formatted on all screen types and device states, for example:
- Bottom sheets are not full width on large screens. (Apply a maximum width to avoid stretching.) See Behavior in Sheets: bottom.

https://developer.android.com/docs/quality-guidelines/large-screen-app-quality?hl=en#T2-1

Comments

jo...@google.com <jo...@google.com> #2Jun 11, 2022 09:40PM

Accepted by jo...@google.com.

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

jo...@google.com <jo...@google.com> #3Aug 11, 2022 05:13PM

After some discussions we have decided that including a Modifier is most likely not the correct approach here, however we are considering different API designs to make restricting the width possible, in addition to implementing a max-width by default.

ma...@google.com <ma...@google.com> #4
Restricted
Nov 30, 2022 05:55AM

Comment has been deleted.

ap...@google.com <ap...@google.com> #5Dec 30, 2022 04:36PM

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

commit 9c998e555f3145c64cd7b092918dc39a80d4162d
Author: Jossi Wolf <jossiwolf@google.com>
Date: Mon Dec 05 17:41:56 2022

Restrict ModalBottomSheetLayout's sheet width to 640dp

This provides a better large screen experience in accordance to Material Design guidelines.

Test: modalBottomSheet_wideScreen_sheetRespectsMaxWidth, modalBottomSheet_narrowScreen_sheetRespectsMaxWidth
Relnote: A `ModalBottomSheetLayout`'s sheet now has a maximum width of 640 dp.
Bug:

b/234927577

Change-Id: I71a4f015f303a2d20c0e8bf5b54ded56533c9701

M compose/material/material/src/androidAndroidTest/kotlin/androidx/compose/material/ModalBottomSheetTest.kt
M compose/material/material/src/commonMain/kotlin/androidx/compose/material/ModalBottomSheet.kt

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

jo...@google.com <jo...@google.com> #6Dec 30, 2022 08:12PM

Marked as fixed.

This change will be included in the next release from now.

na...@google.com <na...@google.com> #7Jan 11, 2023 08:13PM

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

androidx.compose.material:material:1.4.0-alpha04

se...@gmail.com <se...@gmail.com> #8May 24, 2023 03:30AM

On non-compose view, you can override the max width by defining attributes (https://github.com/material-components/material-components-android/blob/master/docs/components/BottomSheet.md#sheet-attributes), and M3 guideline does say this is possible. After this "fix", devs lost control over the max width. Can you add ability to override MaxModalBottomSheetWidth value which is a private value of 640.dp?

ga...@gmail.com <ga...@gmail.com> #9May 25, 2023 01:32AM

I am having the same problem. When the user uses landscape mode, the screen is not displayed normally due to the MaxModalBottomSheetWidth value.

Hopefully, the next update will fix this issue.

Message last modified on May 25, 2023 01:34AM

se...@outlook.de <se...@outlook.de> #10Sep 17, 2023 10:11AM

I also have the problem. In landscape mode, the ModalBttomSheet is left-oriented and displayed with a fixed maximum width. This means that the scrim does not cover the whole display, which is really problematic. Furthermore, the whole thing is not properly centred.
Please let us override the maximum width of the inner ModalBottomSheet, the scrim should go over the whole content.

Just like a dialogue.

jo...@google.com <jo...@google.com> #11Sep 18, 2023 05:57AM

Hi, we currently do not have any work planned on this. Material is opinionated about the max width of the sheet, and Compose Material provides implementations of components adhering to Material specifications.

#9, #10, what you are describing sounds like a bug, please file a separate issue.

Message last modified on Sep 18, 2023 05:58AM

sh...@gmail.com <sh...@gmail.com> #12Nov 6, 2023 10:01PM

Hi,

I understand the opinionated part. Please check my patch proposal (attached):

Default stays the same
Developers can customize the maximum width.

Seems like an easy change that would give a lot of devs a better option than forking the whole compose.

Allow_overriding_default_maximum_width_for_ModalBottomSheetLayout_.patch

1.5 KB

View

Download