\n Not to be confused with our own Microsoft Compose SDK TwoPaneLayout component<\/a>, TwoPane from Accompanist is a fold-aware UI component that works great for cases when you always want to show two pieces of content.\n<\/p>\n \n If you\u2019re unfamiliar with Accompanist, it\u2019s a group of support\/utility libraries built for Jetpack Compose. These libraries are considered to be more experimental, which is why they\u2019re not yet part of AndroidX, but according to Google<\/a>, the eventual goal is to \u201cupstream them into the official toolkit, at which point they will be deprecated and removed from Accompanist\u201d.\n<\/p>\n \n Figure 1. Picture of the Accompanist overview page.<\/em>\n<\/p>\n \n Right now, Accompanist offers the following libraries:\n<\/p>\n \n In this blog post, we\u2019ll focus on Adaptive, the last library, but if you want to learn more about the others, you can check out these FAQS<\/a> or this library review<\/a>.\n<\/p>\n \n The TwoPane component from the Adaptive Accompanist library helps you place exactly two<\/strong> groups of content on the screen and it uses Jetpack Window Manager to provide foldable support.\n<\/p>\n \n For those of you who are familiar with our Microsoft TwoPaneLayout component, you may notice that the main difference here is that TwoPane always shows these two groups of content<\/strong>, whereas with TwoPaneLayout, you show only one group of content at a time when no fold is present. As mentioned in the TwoPane API documentation<\/a>:\n<\/p>\n \u201cThe TwoPane layout will always place both first and second, based on the provided strategy and window environment. If you instead only want to place one or the other, that should be controlled at a higher level and not calling TwoPane if placing both is not desired.\u201d<\/em>\n<\/p>\n \n You can import the latest version of the Adaptive library in your project:\n<\/p>\n \n Note that the latest version depends on Compose \n To use the TwoPane component in your Compose apps, you need to pass Composable content to the \n The If instead I wanted vertical arrangement and the \n \n The Adaptive library provides a handy utility function that will extract the list of display features from your activity using Jetpack Window Manager, so all you need to pass into your TwoPane component is the following:\n<\/p>\n \n The optional \n \n To help ourselves understand the library better and the different configuration options, we created a simple TwoPane sample<\/a>!\n<\/p>\n \n \n In the sample, you can change the \n Whether it\u2019s using Jetpack Window Manger, TwoPane, TwoPaneLayout, or any other custom components, we hope you\u2019re taking advantage of all these great foldable Compose resources to enhance your apps!\n<\/p>\n \n You can read more about Jetpack Compose for foldable devices in the Surface Duo developer documentation<\/a>. \n<\/p>\n \n If you have any questions or would like to tell us about your dual-screen applications, use the\u202ffeedback forum<\/a>\u202for message us on Twitter\u202f@surfaceduodev<\/a>.\u202f\u00a0\n<\/p>\nAccompanist libraries<\/h2>\n
![\"\"](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2022\/09\/graphical-user-interface-text-application-email-1.png\")
\n<\/p>\n\n
Use the TwoPane component<\/h2>\n
implementation \"com.google.accompanist:accompanist-adaptive:0.26.3-beta\"<\/pre>\n
1.3.0-beta02<\/code>, so you\u2019ll have to make sure all your dependencies are up to date!\n<\/p>\nTwoPane properties<\/h3>\n
first<\/code> and second<\/code> slots, as well as specify a TwoPaneStrategy<\/code> and a list of displayFeatures<\/code>. There are also other option properties, including a Modifier<\/code> and a FoldAwareConfiguration<\/code>.\n<\/p>\n@Composable()\r\n fun TwoPane(\r\n first: @Composable() () -> Unit,\r\n second: @Composable() () -> Unit,\r\n strategy: TwoPaneStrategy,\r\n displayFeatures: List<DisplayFeature>,\r\n modifier: Modifier = Modifier,\r\n foldAwareConfiguration: FoldAwareConfiguration = FoldAwareConfiguration.AllFolds\r\n)<\/pre>\n
TwoPaneStrategy<\/h4>\n
TwoPaneStrategy<\/code> describes how the content will be placed when no fold is detected; you can choose from either vertical or horizontal arrangement, and then you can also pass in an offset or a ratio that describes how much space each group of content will occupy and a dp value for the size of the gap between each group of content. For example, if I want the first<\/code> content to take up 30% of the screen in a side-by-side arrangement, I would use the following strategy:\n<\/p>\nHorizontalTwoPaneStrategy(splitFraction = 0.3f)<\/pre>\n
first<\/code> content to always be 300 dp from the bottom of the screen with a gap of 30 dp in between first<\/code> and second<\/code>, I would use this strategy:\n<\/p>\nVerticalTwoPaneStrategy(splitOffset = 300.dp, offsetFromTop = false, gapHeight = 30.dp)<\/pre>\n
![\"Animation](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2022\/09\/animation-of-a-the-twopane-widget-on-a-single-scre.gif\")
\nDisplay features<\/h4>\n
displayFeatures = calculateDisplayFeatures(activity = this@MainActivity)<\/pre>\n
FoldAwareConfiguration<\/h4>\n
FoldAwareConfiguration<\/code> parameter can be used like the PaneMode<\/a> from our TwoPaneLayout component, as it lets you control when a fold affects your layout. The configuration can be set to FoldAwareConfiguration.AllFolds<\/code>, FoldAwareConfiguration.HorizontalFoldsOnly<\/code>, or FoldAwareConfiguration.VerticalFoldsOnly<\/code>.\n<\/p>\n![\"Animation](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2022\/09\/animation-of-the-twopane-sample-spanned-across-bot.gif\")
\nTwoPane sample<\/h2>\n
![](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2022\/09\/word-image-2777-4.png\")
\nTwoPaneStrategy<\/code> and the FoldAwareConfiguration<\/code> to see how it affects the way content is laid out.\n<\/p>\nResources and feedback<\/h2>\n