ModalDrawerLayout variation for opposite side opening drawer [Feature Request] [174514369]

Assigned

Feature Request

Status Update

No update yet.

Description

tr...@gmail.com

created issue #1

Dec 1, 2020 12:56AM

Compose version: 1.0.0-alpha07
Android Studio version: 4.2.0 Canary 16

We need a variation (override or boolean parameter) of ModalDrawerLayout for opening the drawer on the opposite side of the screen. I realize that material guidelines specify that a drawer should open on the same side as the TopAppBar navigation icon. However, in the design our our app we need a non-standard drawer which opens from the other side of the screen.

I tried copying the standard ModalDrawerLayout and modifying it to open from the opposite side, but was unsuccessful in the attempt. Also, this is a poor solution, even if I got it working, because we would then loose out on all ModalDrawerLayout bug fixes and improvements in the future.

Comments

tr...@gmail.com <tr...@gmail.com> #2Dec 1, 2020 01:07AM

Instead of changing the API, maybe this could be accomplished by a new Modifier?

cl...@google.com <cl...@google.com> Dec 1, 2020 11:07AM

Reassigned to ma...@google.com.

ma...@google.com <ma...@google.com> #3Dec 1, 2020 01:37PM

Thanks, this is in our roadmap, no ETA though. It will be most probably a new @Composable since it's a separate component in material library: https://material.io/components/sheets-side

tr...@gmail.com <tr...@gmail.com> #4Mar 19, 2021 02:51PM

Is there any update on this, now that Compose is in Beta?

ma...@google.com <ma...@google.com> #5Mar 19, 2021 03:04PM

Hello. We don't have any ETA yet still, but it is certainly NOT coming as a 1.0 stable API.

Given that Drawer implementation is fairly simple, I recommend to implement it on your own for now to unblock yourself

tr...@gmail.com <tr...@gmail.com> #6Apr 7, 2021 07:07PM

Ok, so I took your advice and copied ModalDrawer and modified it quite easily to be anchored to the end/right of the parent/screen. I called it ModalDrawerEnd. This worked fine with Compose 1.0.0-beta03. However, today I updated to 1.0.0-beta04 but it is now broken. This is because I can no longer send the DrawerState to Modifier.swipeable. I tried to make the same change that you did to send drawerState.swipeableState to this modifier. But now I get an error that swipeableState is internal. So, Compose 1.0.0-beta04 breaks me forceing me to go back to 1.0.0-beta03, unless your team can quickly publish your own version of ModalDrawerEnd. The changes needed from ModalDrawer composable were very minor and I'm happy to share them with you if you would like.

tr...@gmail.com <tr...@gmail.com> #7Apr 7, 2021 10:13PM

Ah, I see the cause of the problem. DrawerState used to extend SwipableState in beta03 but in beta04 that state is now an internal member. So what do you recommend that I do, or is this something you can fix for me in the next beta?

tr...@gmail.com <tr...@gmail.com> #8Apr 8, 2021 03:10AM

I don't like it, but I was able to solve the problem by duplicating and renaming DrawerState into my own code.

ma...@google.com <ma...@google.com> #9Apr 8, 2021 09:49AM

What's the reason you don't like having your own state for your own component? swipeableState is an implementation detail and we intentionally removed it from the Drawer. Apologies if that caused inconveniences.

We do not really intent to reuse states between different components since they are semantically specific most of the time, so the separate state for a separate component sounds like an idiomatic way of doing things.

Let me know if you have any other thoughts in this regard, thanks!

tr...@gmail.com <tr...@gmail.com> #10Apr 9, 2021 08:17PM

My main dislike is that I have to copy more and more of your code. My real concern is that my solution is a "copy and mutate" of your code, so it won't continue to get any of your updates and improvements, without some extra work on my part for each release. But until your libraries provide a solution which meets our needs, I guess it's okay. I'll do the best I can to keep them in-sync.

Message last modified on Apr 9, 2021 08:17PM

ma...@google.com <ma...@google.com> #11Apr 12, 2021 10:38AM

I understand the frustration, indeed it's a fair amount of code to copy, sorry about that.

That being said, it might be a good feature to contribute to if you are up for it. This way you get it working, while getting all the updates from our side when it lands :)

ma...@google.com <ma...@google.com> Apr 12, 2021 10:39AM

Reassigned to je...@google.com.

tr...@gmail.com <tr...@gmail.com> #12Apr 12, 2021 05:09PM

I would be happy to contribute my changes back. How do you suggest that I do that? I checked here:

https://android.googlesource.com/platform/frameworks/support/ but it doesn't look like you are currently accepting changes to the compose material library. I can just post the file here since it's all in a single file. However, if I was doing this as internal code, I would have done this using a small modifier (which enables only the few minor changes needed to ModalDrawer) rather than making a new composable. I can't do that as an external contribution however. So my current solution is a separate composable.

Message last modified on Apr 12, 2021 05:10PM

ma...@google.com <ma...@google.com> #13Apr 12, 2021 06:05PM

Yeah, we're working on it, but so far we don't support code pulling from github for material and foundation. Please, refer to the https://source.android.com/setup/contribute for more info about how to contribute to AOSP. It's harder as it's not done through github, but I'm happy to provide you with any guidance and help you might need. Just write to the malkov@google.com or hit me up in a kotlin lang slack.

That being said, don't feel pressured to contribute, if the code works for your local codebase it's fine too :)

ni...@google.com <ni...@google.com> #14Jun 15, 2021 01:09PM

Status: New

Resetting assignee to `None` in preparation of the triage bash on Thursday June 17th. Please reach out to nickanthony@ if you have any questions.

ma...@google.com <ma...@google.com> Jun 17, 2021 03:26PM

Assigned to je...@google.com.

tr...@gmail.com <tr...@gmail.com> #15Jan 14, 2022 09:27PM

Is there any update to this request yet? Could it perhaps be added to Compose 1.2?

ma...@google.com <ma...@google.com> #16Jan 17, 2022 10:06AM

Reassigned to co...@google.com.

Connie, could you please handle this request and see if it fits and when? thanks

co...@google.com <co...@google.com> #17Jan 17, 2022 03:40PM

To confirm:

Since Material spec explicitly state: Don’t open a navigation drawer from the right side of the screen unless the app is set to a right-to-left language. Therefore, adding functionality to open the modal drawer from the opposite direction would be a non-starter.
Adding a new side sheet component. Make sense but there are currently no plans to do so in the first half of 2022

You offered to contribute in comment #12, are you still interested?

ra...@gmail.com <ra...@gmail.com> #18Mar 20, 2022 03:40PM

Below code open ModalDrawer from right/end side

CompositionLocalProvider(LocalLayoutDirection provides LayoutDirection.Rtl) {
ModalDrawer(
drawerState = drawerState,
modifier = Modifier.fillMaxSize(),
drawerContent = {
MyDrawerContent()
}
) {
CompositionLocalProvider(LocalLayoutDirection provides LayoutDirection.Ltr) {
BodyContent()
}
}
}

For Double Drawer Layout (two drawers which opens from right side and left side) see :-

https://stackoverflow.com/questions/68689100/how-to-add-two-modal-drawer-in-same-screen/71548390#71548390

Message last modified on Mar 21, 2022 12:09AM

co...@google.com <co...@google.com> #19Dec 13, 2022 06:50PM

Reassigned to an...@google.com.

Aneesha,

Please help prioritize the M3 side drawer component for 2023.