What is the sample about?<\/strong>\n<\/p>\n \n The sample application provides developers and designers with the possibility to explore the dual screen form factor value for productivity on the go. \n<\/p>\n \n As a user you are going to play the role of a travelling salesperson that is searching to supply super cool guitars to a couple of guitar stores in Redmond. Each store is marked on the map using an orange pin and there will be a summary of its activity to help you in your journey.\n<\/p>\n \n \n As you arrive at the chosen store, leverage your device by using the Catalog<\/b> screen to explore the story for each guitar and present them to the store owner. You can also navigate through the Catalog using the Table of Contents by tapping on each item from the list.\n<\/p>\n \n \n The discussion continues, and the owner decides on some interesting product designs from the list. Thus, you will move to customizing them by trying out different shapes and colors. When the perfect combination is achieved, you can add the products to the order.\n<\/p>\n \n \n Finally, both of you will check the Orders<\/b> screen where you can change the quantity for each guitar, understand the total price, remove items, or add another guitar from the recommendations. When everything looks good, the next step is to submit the order and move to another store.\n<\/p>\n \n (Please keep in mind that the application is just a sample, and it works with fictitious data for informative purposes only.)\n<\/p>\n What is the \u201cDeveloper Mode\u201d?<\/strong>\n<\/p>\n \n Each flow in the application was created to showcase how a specific UI pattern might be used to display more content for a more immersive experience. You can find the name of the pattern right next to the Dev Mode<\/b> button in the toolbar, when the application is spanned across the folding feature.\n<\/p>\n \n \n As a developer or designer, you can check each screen\u2019s resources by tapping the Dev Mode<\/b> button. Here you can explore the UI pattern that was used in that screen, the specific code we used directly from our Github repository or dive in the SDK documentation for even more details.\n<\/p>\n Is the application compatible with other devices?<\/strong>\n<\/p>\n \n Yes. The application can also be installed on other emulators or devices.\n<\/p>\n \n It is compatible with multiple screen sizes, following the official guidance for responsive UI<\/a> and using ConstraintLayout helpers such as Flow, Guideline, Barrier, and Group, to decide the appropriate size of the components. In the case of TextViews, that is further improved by the autosizing feature<\/a> for best look on the content.\n<\/p>\n \n It also supports multi-window mode and takes advantage of the entire large screen on other foldables with the help of the Jetpack Window Manager library and our SDK components. For example, for the Catalog section we are considering both the Activity size (when deciding how many pages to display), and the bounds of the folding feature (which changes some view constraints for a better UI layout). \n<\/p>\n Which components were used from the SDK?<\/strong>\n<\/p>\n \n To handle the navigation both in single screen and spanned mode we used our new Foldable Navigation<\/a> component with FoldableLayout<\/a> as the container of the fragments and foldable BottomNavigationView<\/a> to change the main navigation nodes. The Foldable Navigation sets by default the first fragment on the first side of the fold when the application is rendered across a folding feature. Therefore, by setting the \n In the Orders<\/b> screen, we included the foldable RecyclerView component from the SDK, through the FoldableStaggeredLayoutManager and FoldableStaggeredItemDecoration<\/a>, to prevent having the items of different sizes from being rendered behind the folding feature. The following method is being called for every \n To install the application, access the link below on your preferred device. For the best experience, try it out on a foldable\/dual-screen device. Enjoy the journey and don\u2019t forget to tell us what you think!\n<\/p>\n \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 this sample on GitHub<\/a>.\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![\"\"](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/12\/word-image.png\")
\n<\/p>\n![](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/12\/word-image-1.png\")
\n<\/p>\n![](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/12\/word-image-2.png\")
\n<\/p>\n![](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/12\/word-image-3.png\")
\n<\/p>\nlaunchScreen<\/code> attribute from the Navigation Graph, we managed to have the fragments spanned on both screens (for example for the Extended Canvas UI pattern) or moved to the end screen, as shown in the code below:\n<\/p>\n<fragment\r\n android:id=\"@+id\/fragment_store_map\"\r\nandroid:name=\"com.microsoft.device.samples.dualscreenexperience.presentation.store.map.StoreMapFragment\"\r\n android:label=\"StoreMapFragment\"\r\n tools:layout=\"@layout\/fragment_store_map\"\r\n app:launchScreen=\"both\">\r\n\r\n <action android:id=\"@+id\/action_store_map_to_list\"\r\n app:destination=\"@id\/fragment_store_list\"\r\n app:launchScreen=\"end\" \/>\r\n\r\n <action android:id=\"@+id\/action_store_map_to_details\"\r\n app:destination=\"@id\/fragment_store_details\"\r\n app:launchScreen=\"end\" \/>\r\n\r\n<\/fragment><\/pre>\n
WindowLayoutInfo<\/code> change, so the UI can adapt to it:\n \n<\/p>\nprivate fun setupRecyclerView(windowLayoutInfo: WindowLayoutInfo) {\r\n binding?.orderItems?.apply {\r\n layoutManager = FoldableStaggeredLayoutManager(context, windowLayoutInfo).get()\r\n replaceItemDecorationAt(FoldableStaggeredItemDecoration(windowLayoutInfo))\r\n }\r\n}<\/pre>\nAvailable on Google Play<\/h2>\n
![\"Google](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/12\/google-play-badge.png\"){kind=icon}
<\/a>\n<\/p>\nFeedback and resources<\/h2>\n