\n The value of isSeparating<\/em> will be \n The value of isSeparating<\/em> will be \n Is this field and the value it holds valid for all kinds of foldable devices, no matter how many physical displays or types of hinges they have? Yes, this field has you covered no matter what the foldable device is. One field to rule them all! \ud83d\ude0a\n<\/p>\n \n Wait, wait! too fast Cesar! Ok, ok, let\u2019s take a step back. \n<\/p>\n \n Until very recently, we had just one kind of device: single-screen. A single-screen device could be a phone with a small display, a tablet with a large one, or a TV with an even larger one. No matter the size, it was a continuous display without anything that could occlude its content and without the possibility to change its posture; it was just flat.\n<\/p>\n \n Now, foldable devices have entered the game. Foldable devices, as you may know, currently have one display that can be folded or two independent displays that can be folded through a physical hinge. Foldable devices can also have different postures – not just different orientations (portrait and landscape), but different postures – such as mirroring a tabletop, a book, a tent, etc. A foldable device can take these different postures because of its FoldingFeature, which is where the device folds. As briefly mentioned above, we currently have two kinds of FoldingFeatures:\n<\/p>\n \n In this new scenario, where devices can have multiple displays and\/or displays that can be folded, we should provide UIs that handle these new scenarios and configurations, especially those that take advantage of the more available display area to provide a fantastic user experience.\n<\/p>\n \n Figure 1. Some of the postures that a foldable device can take.<\/em>\n<\/p>\n \n Let\u2019s think about a foldable that is folded 90 degrees and that takes a tabletop posture. In this posture, content that is located in the folded area is pretty much unusable, and users won\u2019t be able to see the content there correctly nor able to interact with its UI. The same happens when the foldable device takes a different posture, such as book, where now the FoldingFeature is vertical, and the content located there is not accessible nor visible correctly.\n<\/p>\n \n And what about Surface Duo that has two physical displays separated by a physical hinge? In the case of this device, the FoldingFeature is always separating the content when the app is spanned across displays and uses the whole display area. The device can also take the same postures that we have mentioned above, such as tabletop and book (and even more!), and in these postures there is also content that is not accessible nor visible.\n<\/p>\n \n Here is where isSeparating from Jetpack Window Manager will help you!\n<\/p>\n \n As we have mentioned briefly in the introduction, isSeparating <\/em>is part of Jetpack Window Manager. This field will help us to understand when a FoldingFeature is separating the content. \n<\/p>\n \n When is the content separated in a foldable device?\n<\/p>\n \n The value of isSeparating<\/em> will be true <\/em>or false<\/em> depending on whether the content is separated or not.\n<\/p>\n \n Do you want to see the internals of that field? Let\u2019s see:\n<\/p>\n Figure 2. isSeparating field (<\/em>find the source code in the AndroidX repository<\/em><\/a>)<\/em>\n<\/p>\n \n As you can see the code is simple but very powerful! \n<\/p>\n \n If you have been following us, you may know how Jetpack Window Manager works and how to get its WindowLayoutInfo<\/a>, but once again, first thing we have to do is to register for changes:\n<\/p>\n Figure 3. Initializing Window Manager<\/em>\n<\/p>\n \n As you can see, once we get new WindowLayoutInfo (inside collect<\/em>), we will handle the UI and apply the changes we want depending on if the content is separated by the FoldingFeature or not.\n<\/p>\n \n In the function updateCurrentLayout<\/em>:\n<\/p>\n Figure 4. Using isSeparating to know whether the content is separated or not<\/em>\n<\/p>\n \n Easy, right? As you can see, we just get the foldFeature value and see the value isSeparating<\/em> has, and with that we then know whether the content is being separated or not so we can decide whether or not to make changes in our UI.\n<\/p>\n \n Remember that isSeparating<\/em> works for all foldable devices<\/strong>! No matter the hinge, the display, the posture the device has, etc. isSeparating<\/em> will tell you whether the content is being separated or not.\n<\/p>\n \n Do you want to see in action how isSeparating works, and how we can enhance the UI to provide a better user experience in all scenarios?\n<\/p>\n \n We have created a very simple application<\/a> where we change the UI depending on whether the content is being separated or not. To make the app we have relied heavily on a couple of components: MotionLayout<\/a> and ReactiveGuide<\/a>. These components will help us to build a dynamic UI that can be adapted whenever there is a FoldingFeature that separates the content and adds a bit of motion, making it easier to see the applied changes.\n<\/p>\n \n The app basically shows text when its content is not separated, and when it is, the UI is adapted to show new text on the other side of the FoldingFeature that indicates if the FoldingFeature is in a horizontal or vertical orientation.\n<\/p>\n \n Let\u2019s see the app in action in a couple of animations:\n<\/p>\n \n Figure 5. Sample app running in a foldable device<\/em>\n<\/p>\n \n As you see above, when we run the app in a foldable device, when the FoldingFeature is not separating the content (the device is in a flat posture), we see just one text (\u201cisSeparating?\u201d).\n<\/p>\n \n But when we change its posture to half-open, so the device is folded 90 degrees adopting a tabletop posture, isSeparating<\/em> value will be true<\/em> and we will adjust the UI accordingly showing a different one.\n<\/p>\n \n Let\u2019s see now the same app running on Surface Duo, a dual-screen device:\n<\/p>\n \n Figure 6. Sample app running in a dual-screen device.<\/em>\n<\/p>\n \n In dual-screen devices, when the app runs in single-screen mode, there is no interaction with the FoldingFeature, hence the content is not separated, so we show just the initial text; but when the app is spanned across displays, as we have mentioned before, since the device has two physical displays separated by a physical hinge, its content is always separated, and we show the different UI.\n<\/p>\n \n Google has started to use isSeparating<\/em> as well in the apps that are getting enhanced with foldable support. Jetcaster<\/a> is a sample podcast app built with Jetpack Compose<\/a> that uses Jetpack Window Manager to make its UI foldable aware. They recently updated the app to use isSeparating<\/a> to create a UI that is enhanced whenever the FoldingFeature separates the content, so now Jetcaster works well on all kinds of foldable devices.\n<\/p>\n \n Google has also very recently updated their fantastic foldable docs<\/a> covering also isSeparating<\/em> functionality and the values that can get depending on the different scenarios (that we also have seen in this blog post).\n<\/p>\n \n We also provide a lot of other different samples where we use Jetpack Window Manager and isSeparating<\/em> to enhance dynamically the apps\u2019 UI, and in fact, most of them are more complex and more-real scenarios than the basic sample we have seen here. Many of them are in our WindowManager samples repo<\/a>, and also our Jetpack Compose libraries repo<\/a> make use of the field.\n<\/p>\n \n We also have you covered in terms of docs. We have a complete section<\/a> where we cover Jetpack Window Manager (including isSeparating<\/em>) and libraries around it such as SlidingPaneLayout<\/a>.\n<\/p>\n \n The code for the isSeparating-sample<\/a> is available on GitHub.\n<\/p>\n \n If you have any questions, or would like to tell us about your apps, use the feedback forum<\/a> or message us on Twitter @surfaceduodev<\/a>.\n<\/p>\n \n Finally, please join us for our dual-screen developer livestream<\/a> at 11am (Pacific time) each Friday \u2013 mark it in your calendar and check out the archives on YouTube<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":" Hello Android developers, Today we are going to talk about a very useful field that is part of Jetpack Window Manager library. This field is called isSeparating, and will help you to understand when there is content separated by a FoldingFeature on a foldable device. The value of isSeparating will be false if there is […]<\/p>\n","protected":false},"author":30297,"featured_media":2402,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[31,706,473,46],"class_list":["post-2398","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-surface-duo-sdk","tag-dual-screen-development","tag-jetpack-window-manager","tag-kotlin","tag-surface-duo"],"acf":[],"blog_post_summary":" Hello Android developers, Today we are going to talk about a very useful field that is part of Jetpack Window Manager library. This field is called isSeparating, and will help you to understand when there is content separated by a FoldingFeature on a foldable device. The value of isSeparating will be false if there is […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/2398","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/users\/30297"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/comments?post=2398"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/2398\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media\/2402"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media?parent=2398"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/categories?post=2398"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/tags?post=2398"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}false<\/code> if there is no content that is separated by a hinge or a fold.\n<\/p>\ntrue<\/code> if there is content that is separated by a hinge or a fold.\n<\/p>\nUnderstanding the different foldable scenarios that we have<\/h2>\n
\n
![\"Three](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2022\/04\/shape-description-automatically-generated-2.png\")
\n<\/p>\nisSeparating<\/h2>\n
\n
override val isSeparating: Boolean\r\n get() = when {\r\n type == Type.HINGE -> true\r\n type == Type.FOLD && state == FoldingFeature.State.HALF_OPENED -> true\r\n else -> false\r\n }<\/pre>\nHow can we use isSeparating in our apps?<\/h2>\n
lifecycleScope.launch(Dispatchers.Main) {\r\n lifecycle.repeatOnLifecycle(Lifecycle.State.STARTED {\r\n WindowInfoTracker.getOrCreate(this@MainActivity)\r\n .windowLayoutInfo(this@MainActivity)\r\n .collect {newLayoutInfo ->\r\n updateCurrentLayout(newLayoutInfo)\r\n }\r\n }\r\n}<\/pre>\nprivate fun updateCurrentLayout(newLayoutInfo: WindowLayoutInfo) {\r\n for (displayFeature in newLayoutInfo.displayFeatures) {\r\n val foldFeature = displayFeature as? FoldingFeature\r\n foldFeature?.let {\r\n if (it.isSeparating) {\r\n \t\t\/\/The content is separated by the FoldingFeature.\r\n \t\t\/\/Here is where you should adapt your UI.\r\n } \r\n else {\r\n \t\t\/\/The content is not separated.\r\n \t\t\/\/Users can see and interact with your UI properly.\r\n }\r\n }\r\n }\r\n}<\/pre>\nisSeparating-sample app<\/h2>\n
![](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2022\/04\/word-image.gif\")
\n<\/p>\n![\"Animation](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2022\/04\/word-image-1.gif\")
\n<\/p>\nMore samples and docs?<\/h2>\n
Resources and feedback<\/h2>\n