\n The dual-screen experience example provides an end-to-end experience centered around a travelling guitar salesperson, with options to find fake guitar stores, read a catalog, browse products, place fake guitar orders, and now, view order history.\n<\/p>\n
\n \n The main goal of this sample is to highlight the different ways developers can take advantage of the dual-screen\/foldable form factor. With these two new Compose additions, we hope that this sample can continue to serve as a great example for an even larger audience of developers. The new version<\/a> of the app is now available in the Google Play Store!\n<\/p>\n \n Before the code refactor, we used fragments for each page.\n<\/p>\n \n Now, every page is wrapped with the \n Within \n \n The documentation recommends using ConstraintLayout when you want to:\n<\/p>\n \n – avoid nesting multiple Columns and Rows\n<\/p>\n \n – position composable relative to other composables with the help of guidelines, barriers, or chains\n<\/p>\n \n If you have a foldable or a dual-screen device, you can create a vertical barrier and place composables relative to it.\n<\/p>\n \n For example, let\u2019s take the fifth page of the catalog<\/a> from our sample.\n<\/p>\n \n This is the layout in dual-landscape orientation: \n<\/p>\n \n Figure 2. Fifth page of the catalog when viewed in the dual-landscape orientation<\/em>\n<\/p>\n \n And this is the layout for dual-portrait orientation:\n<\/p>\n \n \n To create this UI, we used a \n In the first step, we are creating the reference for each TextDescription and RoundedImage.\n<\/p>\n \n In the second step, we are creating the guidelines in order to help us place the composables depending on the layout orientation.\n<\/p>\n \n Let\u2019s constrain the reference of the first TextDescription. The start position will be linked to the start position of the parent, also for the top position but with a margin.\n<\/p>\n \n All good so far, but what if we need to constrain the composable depending on the orientation? Let\u2019s take a close look at the first image reference. We are using the boolean variable \n Figure 4. Fifth page of the catalog with vertical and horizontal guidelines highlighted<\/em>\n<\/p>\n \n This is a visual representation of each reference. For better understanding, we have drawn one red line which represents the horizontalGuideline, and one green line which represents the verticalGuideline. Both are invisible, but in our case, we made them visible to see what happens behind the scenes.\n<\/p>\n \n The start of the first image will be linked to the start position of the parent and the end position will be linked to the vertical guideline. This way we make sure that the image is in the center between the start of the screen and the vertical guideline.\n<\/p>\n \n If the folding feature is horizontal, the bottom position of the image will be linked to the horizontal guideline and the top position will be linked to the bottom position of the first text. If the folding feature is not horizontal, then we link only the top position to the bottom of the first text with a margin.\n<\/p>\n \n After we are done setting up all constraints for the composables, we can pass the ConstraintSet to the ConstraintLayout.\n<\/p>\n \n The order history page is a new fifth destination in the app\u2019s bottom navigation bar. In this tab, users can view details from their previous orders, such as date and price, and they can also choose to re-order customized items.\n<\/p>\n \n There are three main features of this new page:\n<\/p>\n \n The tutorial has an updated step after a user has completed their first order. Instead of directing users back to the store’s product page, it now encourages users to check out the order history page to view the receipt from their first order.\n<\/p>\n \n \n Like the products page, the order history page uses the list detail app pattern<\/a> when shown on dual-screen and foldable devices.\n<\/p>\n \n In the first pane, a list of previous orders is displayed. The orders are represented by a card that contains a preview of which guitars were in the order, when the order was placed, and how much it cost.\n<\/p>\n \n \n In the second pane, a more detailed view of each order can be accessed by clicking on elements from the list pane. The detail view allows users to see more information about items in their order, including the individual order item names, prices, and quantities.\n<\/p>\n \n Within the detail pane, users can also click the View <\/strong>button next to an order item to access the Add to order<\/strong> dialog. This dialog displays all the details a user would see on the products page, including name, rating, price, and description.\n<\/p>\n \n \n It also gives users the opportunity to reorder specific items exactly as they were customized. Let\u2019s say, for instance, a customer really enjoyed a guitar from their previous order, and they now need a replacement. Instead of checking their order history for the exact model, body shape, and color, then navigating back to the products page to input all these customizations, all they have to do is click Add to order<\/strong> in the dialog to add the exact same product to their cart!\n<\/p>\n \n We both learned a lot about Compose by making these updates to the dual-screen experience example and we hope this will help you on your Compose learning journey as well! Here are some of our main takeaways from the experience:\n<\/p>\n Alin: <\/em>Jetpack Compose is the new way of making UI in Android. The downside of it, as with any new technology, is that you have a learning curve. Coming from the old way of making UI in Android (with XML layouts) can be tough, but here are some lessons and best practices that I encountered:\n<\/p>\n \n 1)\tAvoid reading the official documentation of Compose too much. It\u2019s very good to follow the docs, but you must get your hands dirty and code it yourself.\n<\/p>\n \n 2)\tLet\u2019s say you have a composable function and you want to use different background colors or different padding depending on which screen you\u2019re on. A best practice is that you provide a default modifier to your composable function in order to make changes to your composable very easy.\n<\/p>\n \n 3)\tDon’t use the modifier passed as a parameter to a composable function more than once. It should only be applied to the top-level layout in your function\n<\/p>\n Kristen:<\/em> One of the biggest issues I struggled with was rotating the guitar images correctly! I had to do a lot of research and trial\/error, and you can see in the code that I actually rotated the guitar images in two different ways: 1) using the graphicsLayer modifier<\/a>, and 2) using the Canvas composable<\/a>. Depending on how you want to scale an image and align it with other elements, you can choose between these two options. I used the Canvas composable for the Add to order<\/strong> dialog because it gave me greater control over the size of the composable and how padding was added, but the \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>\n![](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2022\/08\/word-image-2726-1.png\")
Catalog page refactor<\/h2>\n
PageLayout<\/code> composable function to hold the content of the page, so we don\u2019t have to set up the bottom page number or the constraints every time.\n<\/p>\n@Composable\r\nfun PageLayout(\r\n modifier: Modifier = Modifier,\r\n pageNumber: Int,\r\n maxPageNumber: Int,\r\n content: @Composable () -> Unit\r\n) {\r\n val constraintSet = getMainConstraintSet()\r\n\r\n ConstraintLayout(constraintSet = constraintSet, modifier = modifier) {\r\n Box(\r\n modifier = Modifier\r\n .layoutId(CONTENT_ID)\r\n .fillMaxHeight()\r\n .padding(bottom = dimensionResource(id = R.dimen.catalog_margin_normal))\r\n ) {\r\n content()\r\n }\r\n BottomPageNumber(\r\n modifier = Modifier.layoutId(BOTTOM_PAGE_NUMBER_ID),\r\n text = stringResource(\r\n id = R.string.catalog_page_no, pageNumber, maxPageNumber\r\n )\r\n )\r\n }\r\n}<\/pre>\nPageLayout<\/code> composable, and throughout most of the refactor, we decided to use the ConstraintLayout<\/code> composable function to create our UI screens.\n<\/p>\nWhat is ConstraintLayout\u00a0?<\/h3>\n
ConstraintLayout<\/code>\u00a0is a layout that is mostly used when building complex layouts. According to the official Android documentation<\/a>, it \u201callows you to place composables relative to other composables on the screen.\u201d\n<\/p>\nWhen should I use ConstraintLayout in Jetpack Compose?<\/h3>\n
Using constraints to place composables<\/h3>\n
![](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2022\/08\/word-image-2726-2.png\")
\n<\/p>\n![](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2022\/08\/word-image-2726-3.png\")
ConstraintSet<\/code> to place TextDescription and RoundedImage, which are just some styled Text and Image composable functions. For each item, we need to set a layout ID in order to create a reference to the item and position it in the layout.\n<\/p>\nmodifier = Modifier.layoutId(FIFTH_PAGE_FIRST_TEXT_ID)<\/pre>\n
val firstTextRef = createRefFor(FIFTH_PAGE_FIRST_TEXT_ID)\r\nval firstImageRef = createRefFor(FIFTH_PAGE_FIRST_IMAGE_ID)\r\nval secondImageRef = createRefFor(FIFTH_PAGE_SECOND_IMAGE_ID)\r\nval secondTextRef = createRefFor(FIFTH_PAGE_SECOND_TEXT_ID)<\/pre>\n
val verticalGuideline = createGuidelineFromStart(0.5f)\r\nval horizontalGuideline = createGuidelineFromTop(0.5f)<\/pre>\n
constrain(firstTextRef) {\r\n start.linkTo(parent.start)\r\n top.linkTo(parent.top, topMargin)\r\n}<\/pre>\nisFeatureHorizontal<\/code> to determine the orientation.\n<\/p>\n![](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2022\/08\/word-image-2726-4.png\")
\n<\/p>\nconstrain(firstImageRef) {\r\n start.linkTo(parent.start)\r\n end.linkTo(verticalGuideline)\r\n if (isFeatureHorizontal) {\r\n bottom.linkTo(horizontalGuideline)\r\n top.linkTo(firstTextRef.bottom)\r\n } else {\r\n top.linkTo(firstTextRef.bottom, topMargin)\r\n }\r\n height = Dimension.preferredWrapContent\r\n width = Dimension.preferredWrapContent\r\n}<\/pre>\nConstraintLayout(\r\n constraintSet = constraintSet,\r\n modifier = modifier\r\n) { }<\/pre>\nNew order history page<\/h2>\n
\n
Update first-run experience<\/h3>\n
![](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2022\/08\/word-image-2726-5.png\")
List detail app pattern<\/h3>\n
![](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2022\/08\/word-image-2726-6.png\")
Add to order dialog<\/h3>\n
![](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2022\/08\/word-image-2726-7.png\")
Lessons learned<\/h2>\n
graphicsLayer<\/code> modifier ending up working better for simpler situations, like in the detail pane.\n<\/p>\nResources and feedback<\/h2>\n