Forum Discussion
UI question on foldable: How to display a small amount of content on top of an extended canvas?
Hi team,
during my current pet project I learn, that my UI / UX understanding and how thing should work under Android is still not competitive (and useful) that's why I ask you, the awesome Surface Duo community.
You see my following app screenshot. Its foldable emulator because there is sadly no M1 Surface Duo emulator, yet.
I use the navigation rail und the left to trigger some actions. But all pages - besides the "Map" are quite small - on the huge Surface Duo displays.
For this task I assume that its a Surface Duo, spanned displays and in Landscape mode (as it always is).
That's why I do not want a page transition to another view, I thought I use a "BottomSheetScaffold" but a little bot of the sheet is always visible in "collapsed" mode.
Another Idea was a simple "Drawer". But the drawer should be on the right screen and not 90% width of display, that's why this idea was always a fail.
My latest idea was a "Sheet" that moves from the bottom up - like a BottomSheet but not edge to edge and not visible if not active - if the user taps at e.g. "About". The sheet should have some elevation, maybe a close button, etc.
What do you think? I had a look at the samples but I was not able to find such scenario, maybe I overlooked something.
Thanks for your help and keep up with your amazing work,
- Tobi
Hi Tobias,
Thanks for your question!
To be honest, I also am not an expert in Android components/Material Design, but from what you have described, it sounds like a Sheet would fit your needs. We do use a custom component similar to a BottomSheet/Drawer in the NavigationRail Compose sample, but like you mentioned, some content is still shown when the component is collapsed, so that wouldn't fit your exact use case.
6 Replies
Hi Tobias,
Following what khalper had said, there can also be some other options that fit your use case on an UIUX design standpoint.
For example, these three below are some of the UIUX design patterns we think are good fits for map use cases.
Dual view: list view and map view
Extended canvas: map view with bottom sheets
 
We would also recommend you check out more Surface Duo related UIUX pattern here to help visualize:
Extended canvas dual-screen user experience - Dual-screen | Microsoft Docs
List detail dual-screen user experience - Dual-screen | Microsoft Docs
Two page dual-screen user experience - Dual-screen | Microsoft Docs
Dual view dual-screen user experience - Dual-screen | Microsoft Docs
Companion pane dual-screen user experience - Dual-screen | Microsoft Docs
Since these are the design patterns, we think can best optimized you App in Surface Duo.
Yuranranran / khalper Tank you so much for your feedback!
To be honest, I just learned that a bottom sheet exists from using your navigation rail sample khalper - you are my entry in "how to 'design' for Android" :).
But it seems I should give it another try.
*Upcoming question*
Is it "allowed" that a Navigation Rail Item tap opens "just" a bottom sheet instead of a "full" page navigation?
khalperMicrosoft
Haha well I'm glad the sample was helpful to you in that way!
Now that you mention it, it is recommended to use a navigation rail for primary app destinations, but if the content doesn't take up the whole screen, I'm not sure if it would count as a destination.
Yuran and I discussed this some more and we think that some alternative solutions could be Floating Action Buttons or buttons in the TopAppBar. It seems like the map is your main screen and that the About/Settings views have minimal content that can temporarily overlay the map, so maybe something like that would work better for you. A Sheet could still work to show that content, or maybe even a Dialog.
In the end, though, it's totally up to you! We couldn't find any specific official guidance for this use case, and navigation rails are recommended for large screens, so whichever approach you like best will work just fine 🙂
- khalper
Hi Tobias,
Thanks for your question!
To be honest, I also am not an expert in Android components/Material Design, but from what you have described, it sounds like a Sheet would fit your needs. We do use a custom component similar to a BottomSheet/Drawer in the NavigationRail Compose sample, but like you mentioned, some content is still shown when the component is collapsed, so that wouldn't fit your exact use case.
