Splitting Examples

[supertx2]

Hi,

In https://docs.microsoft.com/en-us/dual-screen/introduction you guys talk about Masking and Splitting but I didn't find any examples how to 'Split'. Is this something that we have to manually do or some feature that we can toggle?

[CesarValiente]

Hello, thanks for your question and highlight this.

In fact, basically all libraries that this repo contains, their focus is to split the content between the screens, so you have content A in the left screen and content B in the right screen, while there is not any information occluded by the hinge.
(e.g. BottomNavigation allows you to move the bottom navigation to the left screen, to the right screen or spanned across displays while placing the bottom-options avoiding the hinge).

Google also provides support here. The main library (which we use as well in our libraries under the hood), is Jetpack WindowManager. This library will provide you information about where the FoldingFeature is located (its boundaries), so you can then move around your UI avoiding it. This library works for all foldable devices.
Another very useful library is Jetpack SlidingPaneLayout, where, if you follow a list-detail pattern for your app, this library will help you a lot providing support for foldable devices (including dual-screen) and large-screen devices.
Please, check out also our blog site to keep up to date. We have already posted content regarding these libraries and where every week we post something new regarding foldables development.

Hope all the info helps.
Please, let us know if you have more queries.

Thanks,
Cesar

[supertx2]

Hi Cesar,

Imagine the scenario that the device in vertical or horizontal with an image or a pdf page fit to the screen height, the hinge is hiding content, currently the user will have to zoom and scroll to see the content under the hinge.

[CesarValiente]

Yes, in that scenario that you mention, the hinge would be hiding part of the content. What you could do instead, is to implement better ways to show that content on foldable devices. E.g. you could follow a list-detail pattern, where the list of images is located in the left screen, and when a user taps on an image, that specific image is displayed on the right screen, in that way users would benefit or a better and improved navigation having a bigger display area.

[supertx2]

I'm trying to adapt a manga reader, as a user I will want to take advantage of both screens to be able to read without the need to zoom

[CesarValiente]

You totally can achieve that, but you will have to think differently regarding how you show the content to users that have foldable devices. The key is to enhance your current app and adapt it to provide a better experience for users that have those devices. For instance, as a manga reader, you could take advantage of having two different displays to show the pages of manga, one on each side.

As an example:

Source: https://www.reddit.com/r/Surface/comments/ium243/surface_duo_is_probably_the_perfect_comicmanga/?utm_source=share&utm_medium=web2x&context=3

This is also what Amazon Kindle app does on Surface Duo:

[supertx2]

Yes, with two different pages is easy to work with the hinge,

See the example below, the text is cut off, in this case splitting instead of masking would be the desired result

[CesarValiente]

Yes, I see. In this case if you can split the manga into two fragments, you also could split the content when the hinge is placed horizontally. For instance, our SurfaceDuoLayout helps with that, you have containers that you can use to place your content (e.g.. one fragment on the top screen, other in the bottom screen when in landscape mode).

If you have the content in just one fragment and/or as one view, then yes, some content could be hidden under the hinge as you have shown it here.

Currently we don't provide an alternative to render/not-render under the hinge, just the tools/libraries that Google and we provide. But we do, definitely, take this feedback. Thanks for that!

[supertx2]

I see, splitting the manga was my initial thought,
When I saw the Splitting in the documentation I thought that we had some easy way to achieve that.
Thanks for the help!

[CesarValiente]

Sure thing! anytime! Please, feel free to drop us a line again whenever you have a question, issue, etc. happy to help. I will move this issue to the discussions section (https://github.com/microsoft/surface-duo-sdk/discussions)