{"id":2123,"date":"2022-01-13T11:00:12","date_gmt":"2022-01-13T19:00:12","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/surface-duo\/?p=2123"},"modified":"2022-01-14T11:02:57","modified_gmt":"2022-01-14T19:02:57","slug":"jetpack-window-manager-release-candidate","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/surface-duo\/jetpack-window-manager-release-candidate\/","title":{"rendered":"Jetpack Window Manager release candidate"},"content":{"rendered":"

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

\n Google recently updated a number of dual-screen and foldable packages \u2013Window Manager<\/a>, SlidingPaneLayout<\/a>, Navigation<\/a>, and Preference<\/a> \u2013 to release candidate. These components can be used to create unique user experiences on the Microsoft Surface Duo and other foldable devices.\n<\/p>\n

Jetpack Window Manager<\/h2>\n

\n The WindowInfoTracker<\/strong><\/a> class provides an API for your app to respond each time the layout changes and is affected by a hinge or fold. There are a number of examples in the Window Manager samples repo<\/a> which use the library as shown here:\n<\/p>\n

    \n
  1. \n Add the package in your build.gradle file:<\/p>\n
    implementation 'androidx.window:window:1.0.0-rc01<\/pre>\n<\/li>\n
  2. \n  Get an instance of WindowInfoTracker<\/strong> and then use a\u00a0lifecycleScope\u00a0to collect an updated\u00a0WindowLayoutInfo<\/strong>\u00a0and make changes to the user interface accordingly:<\/p>\n
    override fun onCreate(savedInstanceState: Bundle?) {\r\n    super.onCreate(savedInstanceState)\r\n\r\n    lifecycleScope.launch(Dispatchers.Main) {\r\n          lifecycle.repeatOnLifecycle(Lifecycle.State.STARTED) {\r\n            WindowInfoTracker.getOrCreate(this@MainActivity)\r\n\t\t   .windowLayoutInfo\r\n            .collect { newLayoutInfo ->\r\n              for (displayFeature : DisplayFeature in newLayoutInfo.displayFeatures) {\r\n                  if (displayFeature is FoldingFeature) {\r\n                      \/\/ do something with hinge\/fold\r\n                  }\r\n              }\r\n          }\r\n    }\r\n}<\/pre>\n<\/li>\n<\/ol>\n
    Sliding Pane Layout<\/h2>\n
    \n  See our earlier blog post<\/a> for details on how SlidingPaneLayout behaves on different devices and postures. To use the latest: \n<\/p>\n
      \n
    1. \n  Add the package in your build.gradle file:<\/p>\n
      implementation 'androidx.slidingpanelayout:slidingpanelayout:1.0.0-rc01<\/pre>\n<\/li>\n
    2. \n  Add the layout to your view XML<\/p>\n
      <androidx.slidingpanelayout.widget.SlidingPaneLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\nandroid:id=\"@+id\/sliding_pane_layout\"\r\nandroid:layout_width=\"match_parent\"\r\nandroid:layout_height=\"match_parent\">\r\n<!-- first child -->\r\n<!-- second child -->\r\n<\/androidx.slidingpanelayout.widget.SlidingPaneLayout>\r\n<\/pre>\n
      \n  \"Adapting\n<\/p>\n
      Navigation<\/h2>\n
      \n  Jetpack Navigation component also got a new update (2.4.0-rc01)<\/a> that makes it fold and large-screen aware: the component uses now SlidingPaneLayout internally. Since we already have seen what this component does (just above), it\u2019s easy to see how the Navigation component can benefit of it: we can now navigate from A to B destinations following a list-detail pattern.\n<\/p>\n
      \n  On single-screen devices, single-screen mode on Surface Duo, or multi-window mode on other foldable devices, we go from A to B destinations showing independent panes at a time (B overlaps A when visible). But on spanned mode on foldables or large-screen devices with more display area, we can now go from A to B destinations showing both at the same time (showing two panes).\n<\/p>\n
      \n  Follow these steps to add foldable-aware navigation to your project:\n<\/p>\n
        \n
      1. \n  Add the dependency in your build.gradle file:<\/p>\n
        implementation(\"androidx.navigation:navigation-fragment-ktx:2.4.0-rc01\")<\/pre>\n<\/li>\n
      2. \n  We have to create a Fragment that extends from AbstractListDetailFragment<\/a> and implement onCreateListPaneView<\/a> to supply custom view for the list pane. Then we provide a custom NavHostFragment<\/a> by overriding onCreateDetailPaneNavHostFragment<\/a> where we indicate the navigation path we want to follow.<\/p>\n
        class TwoPaneFragment : AbstractListDetailFragment() {\r\n\r\n    private lateinit var binding: ListPaneBinding\r\n\r\n    override fun onCreateListPaneView(\r\n        inflater: LayoutInflater,\r\n        container: ViewGroup?,\r\n        savedInstanceState: Bundle?\r\n    ): View {\r\n        binding = ListPaneBinding.inflate(inflater, container, false)\r\n        return binding.root\r\n    }\r\n\r\n    override fun onCreateDetailPaneNavHostFragment(): NavHostFragment {\r\n        return NavHostFragment.create(R.navigation.two_pane_navigation)\r\n    }\r\n...\r\n}<\/pre>\n<\/li>\n<\/ol>\n
        \nFor more information you can have a look at a sample we have created<\/a> where we showcase an easy-to-follow navigation flow.\n<\/p>\n
        \n  \n<\/p>\n
        Preference<\/h2>\n
        \n  Very similar to what Jetpack Navigation component got in its new update, Jetpack Preference is now fold and large-screen aware too. Its latest update (1.2.0-rc01)<\/a> uses SlidingPaneLayout internally, and, as you may guess, on foldable and large-screen devices, where there is more display area, preferences are shown in a list-detail manner. Very useful!\n<\/p>\n
        \n  Follow these steps to add foldable-aware preferences to your project:\n<\/p>\n
          \n
        1. \n  Add the dependency in your build.gradle file:<\/p>\n
          implementation(\"androidx.preference:preference-ktx:1.2.0-rc01\")<\/pre>\n<\/li>\n
        2. \n  We have to create a Fragment that extends from PreferenceHeaderFragmentCompat<\/a> and implement onCreatePreferenceHeader<\/a> where we will supply preference headers that will be used as the list pane: <\/p>\n
          class TwoPanePreference : PreferenceHeaderFragmentCompat() {\r\n\r\n    override fun onCreatePreferenceHeader(): PreferenceFragmentCompat {\r\n        return MainPreferenceFragment()\r\n    }\r\n}<\/pre>\n<\/li>\n
        3. \n
          \n  We will set them either by calling setPreferenceFromResource<\/a> or setPreferenceScreen<\/a>.\n<\/p>\n
          class MainPreferenceFragment : PreferenceFragmentCompat() {\r\n\r\n    override fun onCreatePreferences(savedInstanceState: Bundle?, rootKey: String?) {\r\n        setPreferencesFromResource(R.xml.preferences, rootKey)\r\n    }\r\n}<\/pre>\n<\/li>\n<\/ol>\n
          \n  For more information you can have a look at a sample we have created<\/a> where we showcase a preference screen scenario that is easy to understand.\n<\/p>\n
          \n  \n<\/p>\n
          Resources and feedback <\/h2>\n
          \n  Check out the Surface Duo developer documentation<\/a> and past blog posts<\/a> for links and details on all our samples. You can find our Jetpack Window Manager samples<\/a> 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  This week the Twitch stream<\/a> will be live at the Europe-friendly time of 13:00h CET (12 noon GMT) \u2013 join the team to chat live about this sample app. The stream will be replayed at our usual time of 11am Pacific time for those in the Americas.<\/p>\n","protected":false},"excerpt":{"rendered":"
          Hello Android developers! Google recently updated a number of dual-screen and foldable packages \u2013Window Manager, SlidingPaneLayout, Navigation, and Preference \u2013 to release candidate. These components can be used to create unique user experiences on the Microsoft Surface Duo and other foldable devices. Jetpack Window Manager The WindowInfoTracker class provides an API for your app to […]<\/p>\n","protected":false},"author":30297,"featured_media":2126,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[705,706,473],"class_list":["post-2123","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-surface-duo-sdk","tag-java","tag-jetpack-window-manager","tag-kotlin"],"acf":[],"blog_post_summary":"
          Hello Android developers! Google recently updated a number of dual-screen and foldable packages \u2013Window Manager, SlidingPaneLayout, Navigation, and Preference \u2013 to release candidate. These components can be used to create unique user experiences on the Microsoft Surface Duo and other foldable devices. Jetpack Window Manager The WindowInfoTracker class provides an API for your app to […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/2123","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=2123"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/2123\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media\/2126"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media?parent=2123"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/categories?post=2123"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/tags?post=2123"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}