search

material-components / material-components-android

Modular and customizable Material Design UI components for Android
Apache License 2.0
16.29k stars 3.06k forks source link

Add new `SideSheetBehavior` component #91

Open sfdexter opened 6 years ago

sfdexter commented 6 years ago

https://material.io/go/design-sheets-side

sabinebarrera commented 5 years ago

@sfdexter There is a need specially for tablet, what is the state of this? Thanks

kyay10 commented 5 years ago

I think it can probably be done by doing something like bottomsheetbehaviour. I will look at the code later today. I will probably figure out something

gaara87 commented 5 years ago

Just out of curiosity, is there anything besides what the drawerlayout already provides that is needed? Or is this ticket/issue meant for just documentation?

yanniks commented 5 years ago

Material.io actually states that this component is already available - is that a mistake or did I miss something?

gaara87 commented 5 years ago

Pretty sure this refers to drawerlayout/navigationview

On Thu, May 30, 2019, 07:57 Yannik Ehlert notifications@github.com wrote:

Material.io https://material.io/design/components/sheets-side.html#implementation actually states that this component is already available - is that a mistake or did I miss something?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/material-components/material-components-android/issues/91?email_source=notifications&email_token=AADJFXPD7N5K5LM2Y2ED2ETPX66MHA5CNFSM4E6FTR5KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODWSENBQ#issuecomment-497305222, or mute the thread https://github.com/notifications/unsubscribe-auth/AADJFXKWTE7FGZY3O4YYSADPX66MHANCNFSM4E6FTR5A .

kenyee commented 5 years ago

Looks like material.io has a nice status table at the top of every component now :-)

Platform Status
Android Planned

At least it's not available on all platforms instead of being available on Flutter and no where else ;-)

Moonglasses commented 3 years ago

Any news on this component? I stumbled upon it right when I'd find it very useful only to realize it's "beta" for over two years now.

cyb3rko commented 1 year ago

The Side sheet is now available in stable version 1.8.0:

Release details: https://github.com/material-components/material-components-android/releases/tag/1.8.0 Developer docs: https://github.com/material-components/material-components-android/blob/master/docs/components/SideSheet.md M3 docs: https://m3.material.io/components/side-sheets/overview

Issue could be closed then, right?

fat-tire commented 1 year ago

I dunno, it's pretty incomplete, and even the 1.9.0-a1 versoin is fairly buggy (stuttering scrolling and jumping around after orientation changes), even though it addresses many issues that were fixed from the 1.8.0 release.

It doesn't yet support things like SideSheetBehavior.EDGE_LEFT. Which I would assume is going to show up soon, especially since the guidelines say it's "usually on the right", which suggests the left is an option, and probably to support RTL languages as well.

Since sidesheets in some ways behave very similarly to navigation drawers, I'm surprised they aren't treated as a special case or subclassed somehow.

afohrman commented 1 year ago

@fat-tire thanks for the feedback. Left edge support is in active development. As for the other issues you mentioned, could you please file separate issues for any bugs you've found? Please include instructions to reproduce the issue, a screenshot/screen recording of the bug, and any necessary code samples.

fat-tire commented 1 year ago

I can look into some reproducible example w/code, but if you haven't yet, try using a sidesheet on a phone in portrait/vertical, then rotate to the horizontal/landscape.

(Be sure that you've set android:configChanges="orientation" for the activity in the manifest so the activity is not destroyed/recreated.)

In my quick testing, the sheet appears on the LEFT side and pops back to the right when you swipe right (as if to close it). If you simply rotate back to the vertical, it remains on the left with the same issue. Tried it on both the emulator and an actual device.

Re: the scrolling "stickiness"-- it seems to be confused about whether a finger/mouse swipe is intended to scroll content within the side sheet or reveal/close the sheet itself. That is, if there is any significant side-to-side component of a vertical fling, the open/close behavior "takes over" and the vertical scrolling stops immediately.

Also, I didn't see in the documentation a setting for automatically responding to changes in the screen size to switch between modal and standard layout per the specs. This might be especially preferred w larger screens like a tablet, or in a windowed system like ChromeOS. Maybe I just missed it, or maybe it's supposed to be implemented manually.

Hope this is helpful. Nice work so far!

fat-tire commented 1 year ago

A little while ago I modified Android Studio Giraffe | 2022.3.1 Canary's drawer demo (one of the ones when you start a new project), replacing the drawer with a sidesheet. Wired up the FAB to expose and hide the sidesheet. The app starts with the sidesheet pre-expanded (I set state in onCreate()).

Notice it starts with the sheet on the LEFT side. Resizing the window leaves it on the left. As soon as I try to close it by sliding-- boom, it moves to the normal right side and behaves normally. If I expand it again with the FAB, it's on the right... until I resize the window-- then bam back to the left side again.

https://user-images.githubusercontent.com/528174/217759842-73085baf-0ffc-4489-b2fa-e61dd9f93f24.mp4

The same behavior happens w/a phone in the emulator when changing orientation, but figured the Desktop view shows the issue more clearly.

I have the source, but there's no way this won't work for you too.

Turns out I got the same behavior even without android:configChanges="orientation", at least on the Desktop.

cyb3rko commented 1 year ago

@fat-tire Have you already tested the SideSheet demo in the M3 Catalog? I did and it turned to deliver pretty good results so far. I haven't found any bugs or jumping side sheets there.

fat-tire commented 1 year ago

I didn't try the sidesheet demo, but I'm pretty sure there's gotta be a bug having to do with when the sheet is first created or when the layout is recalculated. It's clearly aligning to the wrong side. It immediately fixes itself once the sliding action begins but moves again during an orientation change/resize.. 🤷

Incidentally, when I tried viewing this issue on my phone I got a broken video above, but it works in Chromium, so hopefully it's visible to others.

Also, not sure if I was clear above- the 1.9.0-a1 library was used for the demo, not the 1.8.0 release which had many more bugs that were fixed in a1.