{"id":1708,"date":"2021-07-15T12:38:17","date_gmt":"2021-07-15T19:38:17","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/surface-duo\/?p=1708"},"modified":"2021-07-15T12:38:17","modified_gmt":"2021-07-15T19:38:17","slug":"jetpack-compose-twopanelayout-preview","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/surface-duo\/jetpack-compose-twopanelayout-preview\/","title":{"rendered":"New TwoPaneLayout Compose library preview"},"content":{"rendered":"

\n Hello Android developers!\n<\/p>\n

\n Google just announced the first release candidate for Compose<\/a> on 07\/01. We are getting one big step closer to stable this month! In previous blogs, Jetpack Compose on foldable and dual-screen development<\/a> and Jetpack Compose on Microsoft Surface Duo,<\/a> <\/a>we mentioned that there are two main steps you can implement to develop or enhance your application to leverage these new form factors using this new UI toolkit:\n<\/p>\n

    \n
  1. \n Integrate Jetpack Window Manager to detect the information of the device and the bounds of the hinge\/folding line.\n<\/li>\n
  2. \n Update the UI based on the device orientation and the information from Jetpack Window Manager.\n<\/li>\n<\/ol>\n

    TwoPaneLayout preview<\/h2>\n

    \n Today we are introducing a new library, TwoPaneLayout<\/strong>, which can help you simplify this implementation. You can easily integrate the library when using Compose to build a two-pane layout. TwoPaneLayout provides a layout container to hold two different layouts horizontally or vertically. It will switch automatically based on the device orientation. The two panes will be placed side-by-side according to the hinge (width may not be zero) on a dual-screen device or the folding line on a foldable device, if the layout parameter \u201cweight\u201d is not configured, otherwise the two panes will be divided based on the parameter configuration. \n<\/p>\n

    \n Figure 1: TwoPaneLayout on Foldable\/Dual-screen devices<\/em>\n<\/p>\n

    \n When the foldable and dual-screen devices become unfolded or unspanned, or the app is running on a regular single-screen device, the two-pane layout would be converted to a single-pane layout without any extra effort. And we also scale the library to support large-screen devices, such as a tablet, which can provide a split-view style to enable multi-tasking on one large display area.\n<\/p>\n

    \n Figure 2: TwoPaneLayout on single-screen device<\/em>\n<\/p>\n

    \n Figure 3: TwoPaneLayout on large-screen device (such as a tablet)<\/em>\n<\/p>\n

    \n Two-pane layout can be used in many scenarios on foldable, dual-screen, and large-screen devices, including list detail<\/a>, dual view<\/a>, companion pane<\/a>, and the three design pattern we mentioned before. With them, the applications can display list and detail content, or content with control, or list and map at the same time, regardless of the device orientation.\n<\/p>\n

    Try it out! <\/strong><\/h2>\n

    \n The TwoPaneLayout is very easy to use. You can integrate it into your Android Studio project in four steps:\n<\/p>\n

      \n
    1. \n

      \nIn the top-level build.gradle<\/strong> file, make sure you have mavenCentral()<\/strong> repository\n<\/p>\n

      repositories {\r\n     google()\r\n     mavenCentral()\r\n }<\/pre>\n<\/li>\n
    2. \n
      In the module-level build.gradle<\/strong> file, add the following dependency<\/p>\n
      implementation \"com.microsoft.device.dualscreen:twopanelayout:1.0.0-alpha02\"<\/pre>\n<\/li>\n
    3. \n
      Also ensure the compileSdkVersion<\/strong> and targetSdkVersion<\/strong> are set to API 30<\/strong> or newer in the module-level build.gradle<\/strong> file.<\/p>\n
      android {\r\n    compileSdkVersion 30\r\n \r\n    defaultConfig {\r\n        targetSdkVersion 30\r\n    }\r\n    ...\r\n}<\/pre>\n<\/li>\n
    4. \n
      Start building your layout using TwoPaneLayout with just one line of code. Then you can have two different customized layouts showing side-by-side or above-and-below, or a single prioritized layout.\n<\/p>\n
      \n  Here is a small code sample<\/a> to demonstrate the use of TwoPaneLayout:<\/strong> \n<\/p>\n
      TwoPaneLayout {\r\n    Text(\r\n        text = stringResource(R.string.first_pane_text),\r\n        modifier = Modifier.fillMaxSize().background(color = Color.Cyan)\r\n    )\r\n    Text(\r\n        text = stringResource(R.string.second_pane_text),\r\n        modifier = Modifier.fillMaxSize().background(color = Color.Magenta)\r\n    )\r\n}  <\/pre>\n<\/li>\n<\/ol>\n
      \n  There are two child elements which are two Composable text labels created and placed inside TwoPaneLayout. The library will position the elements based on the order, which means the first element will be placed in the first pane and the second element will be placed in the second pane. Since no \u201cweight\u201d is configured, the first child element will be prioritized in the single-screen mode.\n<\/p>\n
      \n  If running the sample on a single-screen device, foldable, or dual-screen device, such as Surface Duo, or a tablet, you can see the two panes will be displayed accordingly based on the device type, state, and orientation without any code changes.\n<\/p>\n
      \n\"TwoPaneLayout<\/a>Figure 4: Sample without \u201cweight\u201d configured on a single-screen device<\/em>\n<\/p>\n
         \n  Figure 5: Sample without \u201cweight\u201d configured on a dual-screen device (Surface Duo)<\/em>\n<\/p>\n
      \n  \"Foldable<\/a><\/br>Figure 6: Sample without \u201cweight\u201d configured on a foldable device rotated 90 degrees<\/em>\n<\/p>\n
      \n  If we updated the above code by adding the layout parameter weight<\/code>, the two panes will be adjusted proportionally based on that. And in the single-screen mode, the element with higher weight will be prioritized to show.\n<\/p>\n
      TwoPaneLayout {\r\n    Text(\r\n        text = stringResource(R.string.first_pane_text),\r\n        modifier = Modifier.fillMaxSize().background(color = Color.Cyan).weight(.3f)\r\n    )\r\n    Text(\r\n        text = stringResource(R.string.second_pane_text),\r\n        modifier = Modifier.fillMaxSize().background(color = Color.Magenta).weight(.7f)\r\n    )\r\n}  <\/pre>\n
      \n  \"Surface<\/a>Figure 7: Sample with \u201cweight\u201d configured on a single-screen device<\/em>\n<\/p>\n
      \n \"Android<\/a>
      Figure 8: Sample with \u201cweight\u201d configured on a large-screen device (tablet)<\/em>\n<\/p>\n
      Resources and feedback<\/strong>\n<\/p>\n
      \n  The source code here is available on GitHub<\/a>; we\u2019d love to hear your feedback or contributions to the project.\n<\/p>\n
      \n  Check out the Surface Duo developer documentation<\/a> and past blog posts<\/a> for links and details on all our samples.\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  You can also chat with us on Twitch<\/a> on Friday, July 16th at 11am PST, where you can ask questions about Jetpack Compose or any other aspect of developing dual-screen apps for the Surface Duo!<\/p>\n","protected":false},"excerpt":{"rendered":"
      Hello Android developers! Google just announced the first release candidate for Compose on 07\/01. We are getting one big step closer to stable this month! In previous blogs, Jetpack Compose on foldable and dual-screen development and Jetpack Compose on Microsoft Surface Duo, we mentioned that there are two main steps you can implement to develop […]<\/p>\n","protected":false},"author":30456,"featured_media":1713,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[692,473,46],"class_list":["post-1708","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-surface-duo-sdk","tag-jetpack-compose","tag-kotlin","tag-surface-duo"],"acf":[],"blog_post_summary":"
      Hello Android developers! Google just announced the first release candidate for Compose on 07\/01. We are getting one big step closer to stable this month! In previous blogs, Jetpack Compose on foldable and dual-screen development and Jetpack Compose on Microsoft Surface Duo, we mentioned that there are two main steps you can implement to develop […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/1708","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\/30456"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/comments?post=1708"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/1708\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media\/1713"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media?parent=1708"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/categories?post=1708"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/tags?post=1708"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}