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.

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

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

Thanks for the report!

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

deleted

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

Marked as fixed.

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).

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