Forum Discussion

tscholze's avatar
tscholze
Iron Contributor
Apr 09, 2022
Solved

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 ...
  • khalper's avatar
    khalper
    Apr 14, 2022

    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.

Yuranranran's avatar
Yuranranran
Former Employee
Apr 14, 2022

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.

 

https://docs.microsoft.com/en-us/dual-screen/design/dual-view: list view and map view

https://docs.microsoft.com/en-us/dual-screen/design/extended-canvas: map view with https://material.io/components/sheets-bottom

 

 

We would also recommend you check out more Surface Duo related UIUX pattern here to help visualize:

https://docs.microsoft.com/en-us/dual-screen/design/extended-canvas

https://docs.microsoft.com/en-us/dual-screen/design/list-detail

https://docs.microsoft.com/en-us/dual-screen/design/two-page

https://docs.microsoft.com/en-us/dual-screen/design/dual-view

https://docs.microsoft.com/en-us/dual-screen/design/companion-pane

Since these are the design patterns, we think can best optimized you App in Surface Duo.

 

tscholze 

tscholze's avatar
tscholze
Iron Contributor
Apr 15, 2022

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?

  • khalper's avatar
    khalper
    Icon for Microsoft rankMicrosoft
    Apr 15, 2022

    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 🙂

    • tscholze's avatar
      tscholze
      Iron Contributor
      Apr 21, 2022

      Hi khalper,

      thanks for your deep intention to help :). Awesome!

       

      I know it is more an UI / UX question than a SDK one but this is the point my pet project is struggling with.

       

      You are absolutely correct. The map is center of the app, than there are two types of "content" that has to be shown.

       

      Navigated pages aka 'Settings'

      These are the pages of the app which are not map related like the settings or the about page. But these are quite small and would never fill a screen of the duo.

       

      User taps on a map marker

      At first I thought I open a map overlay but than my second idea was to use a bottom sheet instead - as I mentioned inspired by you.

      The information of the sheet would differ highly which type of marker the user tapped. E.g. a "accident" marker would just show some texts, etc but a webcam marker would show the actual webcam feed (due to the Ukraine war, the API stopped delivering such information).

       

      Grr, it bothers me hard that my app seems to lack some UI/UX knowledge / basement which I can build on.

       

      Thanks for all your help!

       

      • khalper's avatar
        khalper
        Icon for Microsoft rankMicrosoft
        Apr 25, 2022

        tscholze 

        No problem, we're always glad to hear updates on your project!

        Thanks for explaining the other screens more, in that case I think you would probably want to add a "Settings" icon to the TopAppBar, since that information is static and accessible at any time. For the map markers, since the information changes depending on which marker is tapped, I agree that a sheet would make sense - one benefit of using Compose is that you can create a base composable with all of the common formatting and then just pass in the dynamic content you want to show!

        And don't worry about that, it sounds like you're already learning a lot with this project! When in doubt, I would say that the Material Design documentation is always a good resource 🙂

Resources