{"id":1415,"date":"2021-03-25T12:11:17","date_gmt":"2021-03-25T19:11:17","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/surface-duo\/?p=1415"},"modified":"2021-05-21T10:23:01","modified_gmt":"2021-05-21T17:23:01","slug":"jetpack-compose-foldable-samples","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/surface-duo\/jetpack-compose-foldable-samples\/","title":{"rendered":"Jetpack Compose foldable and dual-screen development"},"content":{"rendered":"

\n Hi Android developers,\n<\/p>\n

\n We talked about using Jetpack Compose<\/a>, the new Android UI toolkit for Microsoft Surface Duo development in a previous blog post<\/a>. Now, Jetpack Compose is in beta. Combined with the use of Jetpack Window Manager<\/a>, Jetpack Compose is more flexible for developing apps for dual-screen devices and even easier to extend to other foldable devices. You can check out the new dual-screen Codelab<\/a> for using Jetpack Window Manager to learn more. Today, we would like to showcase some examples of dual-screen development using Jetpack Compose in different use cases. \n<\/p>\n

\n When building or migrating applications for foldable and dual-screen devices, how to best leverage the dual-screen on these new form factors from a design perspective can be a challenge. We introduced five app design patterns<\/a> which can be used in some common scenarios to help you expand your imagination.\n<\/p>\n

\n Figure 1: dual-screen app patterns<\/em>\n<\/p>\n

Extended Canvas<\/h2>\n

\n The Extended Canvas<\/a> pattern is the simplest but still a powerful dual-screen pattern, which can be used in an application requiring a bigger canvas, such as a map, spreadsheet, or drawing. In an application with this pattern, zooming and dragging features are normally expected. In Jetpack Compose, the implementation of gestures<\/a> is quite different from the traditional way in that no listener is required. \n<\/p>\n

\n Figure 2: Extended Canvas Compose code sample<\/em><\/p>\n

\n In the Extended Canvas Compose Sample<\/a>, transformable<\/a> modifier is used to detect panning and zooming changes. Additionally, PointerInputScope<\/a> with the helper function detectDragGestures<\/a> is used to control the whole zooming and dragging flow so we can handle zooming and dragging at the same time.\n<\/p>\n

Modifier.graphicsLayer(\r\n        scaleX = maxOf(minScale, minOf(maxScale, scale)),\r\n        scaleY = maxOf(minScale, minOf(maxScale, scale)),\r\n    )\r\n    .offset { IntOffset(offset.x.roundToInt(), offset.y.roundToInt()) }\r\n    .transformable(state = state)\r\n    .pointerInput(Unit) {\r\n        detectDragGestures(\r\n            onDrag = { _, dragAmount ->\r\n                offset = offset.plus(dragAmount)\r\n            }\r\n        )\r\n    }<\/pre>\n<\/p>\n
List-Detail<\/h2>\n
\n  The List-Detail<\/a> pattern includes a list view and a detailed view for content. When an item in the list is selected, the details pane is updated. This pattern is ideal for a wider viewing area and is frequently used for email, image gallery, address books, and so on. \n<\/p>\n
\"Surface<\/a>Figure 3: List-Detail Compose code sample<\/em><\/p>\n
\n  As we mentioned in the previous blog post, to layout two views to fit a dual-screen (left\/right) configuration, using the weight<\/a> modifier inside RowScope<\/a> is an easy solution to accomplish this. As you can see, the value of the weight modifier is set to 1 for both of the two child elements, which means the parent Row<\/a> will be divided in half which aligns the two columns equally within the same space.\n<\/p>\n
Row(\r\n    modifier = Modifier.fillMaxSize(),\r\n    horizontalArrangement = Arrangement.spacedBy(20.dp)\r\n) {\r\n    ListViewSpanned(\r\n        modifier = Modifier\r\n            .fillMaxHeight()\r\n            .weight(1f)\r\n    )    \r\n    DetailView(\r\n        modifier = Modifier\r\n            .fillMaxHeight()\r\n            .weight(1f)\r\n    )   \r\n}<\/pre>\n
\n  When we build an application for foldable or dual-screen devices, single-screen scenario should always be kept in mind. For the application with a List-Detail pattern, the single-screen mode should provide a navigation between the list<\/code> view and detail<\/code> view. The Navigation component provides support for Jetpack Compose<\/a> applications with the following dependencies.\n<\/p>\n
dependencies {\r\n      implementation \"androidx.navigation:navigation-compose:1.0.0-alpha09\"\r\n  }<\/pre>\n
\n  In the ListDetail Compose Sample<\/a>, two route strings, list<\/code> and detail<\/code>, are created inside NavHost<\/a> to define the path to two composable, which are the two views showing at the same time when in dual-screen mode.\n<\/p>\n
val navController = rememberNavController()\r\nNavHost(\r\n    navController = navController,\r\n    startDestination = \"list\"\r\n) {\r\n    composable(\"list\") {\r\n        ListViewUnspanned(\r\n            navController = navController\r\n        )\r\n    }\r\n    composable(\"detail\") {\r\n        DetailViewUnspanned(\r\n            modifier = Modifier.fillMaxSize(),\r\n            navController = navController\r\n        )         \r\n    }        \r\n}<\/pre>\n
Two Page<\/h2>\n
\n  The Two Page<\/a> pattern provides a book-like paging experience, which is perfect for a reading application. There is no official ViewPager component in Jetpack Compose currently. So, we borrow the Pager<\/code> implementation in the Jetpack Compose official sample JetCaster<\/a>, and modify it to accommodate the dual-screen scenario inside the Two Page Compose Sample<\/a> as shown below. \n<\/p>\n
\n  \"Surface<\/a>Figure 4: Two Page Compose code sample<\/em>\n<\/p>\n
\n  We introduce a new property isDualMode<\/code> to identify whether the application is in dual-screen mode or single-screen mode. Since we would open the two pages at the same time in dual-screen mode, we can stop scrolling when the paging reaches the second to last page.\n<\/p>\n
var isDualMode: Boolean = false \/\/ support dual-screen mode\r\nsuspend fun snapToOffset(offset: Float) {\r\n    val max = if (currentPage == minPage) 0f else 1f\r\n    val lastPage = if (isDualMode) maxPage - 1 else maxPage\r\n    var min = if (currentPage == lastPage) 0f else -1f\r\n\r\n    _currentPageOffset.snapTo(offset.coerceIn(min, max))\r\n}<\/pre>\n
\n  We also need to adjust the layout to fit two screens with the hinge\/seam in between, if available. We can obtain the hinge size from FoldingFeature<\/a> inside Jetpack Window Manager<\/a>, then pass it as a new parameter pagePadding<\/code> into ViewPager<\/a> we create.\n<\/p>\n
var padding = if (currentPage < page && state.isDualMode) pagePadding else 0\r\nval xItemOffset = ((page + offset - currentPage) * placeable.width + padding).roundToInt()\r\nplaceable.place(\r\n    x = xItemOffset,\r\n    y = yCenterOffset\r\n)<\/pre>\n
Dual View<\/h2>\n
\n  The Dual View<\/a> pattern can be used to compare two versions of the same type of content side-by-side, like two images, lists, or documents. In the Dual View Compose Sample<\/a>, we layout a list view and a map view together, like what we did in the List-Detail Compose sample above.\n<\/p>\n
\n  \nFigure 5: Dual View Compose code sample<\/em>\n<\/p>\n
\n  The zooming and dragging is also provided for the map view here, the same as the Extended Canvas Compose sample. But we also need to make sure that the map view doesn\u2019t cross the hinge from the right screen to the left screen and cover the list view when zooming or panning. To achieve this, the map view is put in a Box<\/a> with clipToBounds<\/a> modifier.\n<\/p>\n
Box(modifier = modifier.then(Modifier.clipToBounds())) {\r\n    scalableImageView(imageId = selectedMapId, isWide = isWide)\r\n}<\/pre>\n
\n  For the single screen mode of Dual View, a List\/Map button in the top bar is created to switch between these two types of content with NavController<\/a>.\n<\/p>\n
TopAppBar(\r\n    title = {\r\n        Text(text = stringResource(R.string.app_name)\r\n    },\r\n    actions = {\r\n        IconButton(\r\n            onClick = {\r\n                navController.popBackStack()\r\n            }\r\n        ) {\r\n            Icon(painter = painterResource(id = R.drawable.ic_list))    \r\n        }\r\n    }\r\n)<\/pre>\n
Companion Pane<\/h2>\n
\n  The Companion Pane<\/a> pattern provides primary\/secondary pane when the app is spanned to dual-screen. Media editing or game controls applications can benefit from this pattern. In the Companion Pane Compose Sample<\/a>, there are four different containers built to hold four different layouts based on the device orientation and state:<\/p>\n