{"id":684,"date":"2020-09-01T13:00:04","date_gmt":"2020-09-01T20:00:04","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/surface-duo\/?p=684"},"modified":"2021-05-21T10:26:32","modified_gmt":"2021-05-21T17:26:32","slug":"jetpack-compose-dual-screen-sample","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/surface-duo\/jetpack-compose-dual-screen-sample\/","title":{"rendered":"Jetpack Compose on Microsoft Surface Duo"},"content":{"rendered":"

\nHello, Android dual-screen developers!\n<\/p>\n

\nToday we are going to talk about how to use the new UI framework, Jetpack Compose<\/a> to build a dual-screen app on the Surface Duo. Jetpack Compose is a new Declarative UI Framework in Android. Instead of using the traditional XML layouts, the developer calls the Composable functions to get the UI elements and modify them. Although Google just released the alpha for Jetpack Compose<\/a>, we still believe it is a good idea to leverage it in the development for dual-screen apps.\n<\/p>\n

\n Here is a simple sample<\/a> we built on Surface Duo to demonstrate the use of Jetpack Compose. The sample is using the List-Detail<\/a> app pattern to show a list of image thumbnails on the single screen. After spanning the app into dual-screen mode, the full image will be shown on the other screen. Selecting the image item on the list will update the full image accordingly.\n<\/p>\n

\n \"Dual-screen\n<\/p>\n

\n Figure 1: Screenshot of the sample built with Jetpack Compose<\/i>\n<\/p>\n

Prerequisites<\/strong>\n<\/p>\n

Jetpack Compose requires Android Studio 4.2 Canary 8<\/b> which you can download from developer.android.com<\/a>. The following items are also required:<\/p>\n\n\n\n\n\n\n\n
\nItem<\/th>\nVersion\n<\/th>\n<\/tr>\n
\n Jetpack Compose<\/td>\n1.0.0-alpha01 \n<\/td>\n<\/tr>\n
\n Kotlin<\/td>\n1.4.0\n<\/td>\n<\/tr>\n
\n Gradle<\/td>\n6.6-rc-6\n<\/td>\n<\/tr>\n
\n Android Gradle plugin<\/td>\n4.2.0-alpha08\n<\/td>\n<\/tr>\n
\n AndroidX WindowManager<\/td>\n1.0.0-alpha01\n<\/td>\n<\/tr>\n<\/table>\n

<\/p>\n

Detect dual-screen mode<\/strong>\n<\/p>\n

\n To detect whether or not the app is in dual-screen mode is one of the key points to consider when developing an app on Surface Duo. In the sample, the AndroidX WindowManager<\/a> is used to detect the screen mode. After the view is attached to the window, the WindowManager<\/a> registers a callback for layout changes of the window. \n<\/p>\n

override fun onAttachedToWindow() {\r\n    super.onAttachedToWindow()\r\n    windowManager.registerLayoutChangeCallback(mainThreadExecutor, layoutStateChangeCallback)\r\n}\r\noverride fun onDetachedFromWindow() {\r\n    super.onDetachedFromWindow()\r\n    windowManager.unregisterLayoutChangeCallback(layoutStateChangeCallback)\r\n}<\/pre>\n
\nA callback class, LayoutStateChangeCallback<\/code>, is created to handle the WindowLayoutInfo<\/a> as shown below. Using DisplayFeature<\/a> inside WindowLayoutInfo<\/a> to detect that the app is spanned in dual-screen mode. Check out the sample code below:\n<\/p>\n
inner class LayoutStateChangeCallback : Consumer {\r\n    override fun accept(newLayoutInfo: WindowLayoutInfo) {\r\n       \tval isScreenSpanned = newLayoutInfo.displayFeatures.size > 0\r\n       \tappStateViewModel.setIsScreenSpannedLiveData(isScreenSpanned)\r\n    }\r\n}\r\n<\/pre>\n
\n  After you have created the callback class, save the screen mode in the ViewModel<\/a> with LiveData<\/a> to allow the UI to update accordingly.\n<\/p>\n
LiveData and State Management<\/strong>\n<\/p>\n
\nReacting to state changes is at the very heart of Jetpack Compose. When the composable is subscribed to a state, the function is updated when the value of the state is updated. With observeAsState<\/a>, we can subscribe to the state of LiveData<\/a> in the ViewModel<\/a> and get the value from the function. Every time there is a new value posted into the <\/em>LiveData<\/em><\/a>, the returned <\/em>State<\/em><\/a> is updated, causing recomposition of every <\/em>State.value<\/em><\/a> usage.<\/em>\n<\/p>\n
val isScreenSpannedLiveData = appStateViewModel.getIsScreenSpannedLiveData()\r\nval isScreenSpanned = isScreenSpannedLiveData.observeAsState(initial = false).value<\/pre>\n
Material Design<\/strong>\n<\/p>\n
\n  Jetpack Compose is a combination of 7 Maven Group IDs<\/a> within androidx<\/code>:\n<\/p>\n