{"id":2254,"date":"2022-02-17T12:08:11","date_gmt":"2022-02-17T20:08:11","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/surface-duo\/?p=2254"},"modified":"2022-02-17T12:08:11","modified_gmt":"2022-02-17T20:08:11","slug":"foldable-navigation-component-update","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/surface-duo\/foldable-navigation-component-update\/","title":{"rendered":"Foldable Navigation component update"},"content":{"rendered":"

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

\n We\u2019re excited to announce the release of our latest SDK component, Foldable Navigation Component, which is an extension of Jetpack Navigation Component<\/a> and is now available for foldable devices.\n<\/p>\n

How to add Foldable Navigation Component to your project<\/h2>\n
dependencies {\r\n   def nav_version = \"1.0.0-alpha2\"\r\n   implementation \"com.microsoft.device.dualscreen:navigation-fragment-ktx:$nav_version\"\r\n   implementation \"com.microsoft.device.dualscreen:navigation-ui-ktx:$nav_version\"\r\n}<\/pre>\n
How it works<\/h2>\n
\n  Jetpack Navigation Component is a set of tools, libraries, and guidance to help developers create quality apps, simplifies the navigation between fragments or activities, and provides a way to visualize the navigation flow for the entire app.\n<\/p>\n
\n  Instead of having only a single fragment on the display area, this navigation component splits the display into two areas (physical or not, depending on the device manufacturer) and shows two fragments at once, one for each display area. To achieve this, we are using the FoldableLayout in the background. Read the FoldableLayout documentation<\/a> for more information. \n<\/p>\n
Single-screen navigation<\/h2>\n
\n  If the app is opened in the single-screen mode, then our navigation component has exactly the same behavior as the Jetpack Navigation component. The magic happens only when the app is rendered across a folding feature.\n<\/p>\n
\n  \"Surface<\/a>\n<\/p>\n
Dual-screen navigation<\/h2>\n
\n  When you are opening the app for the first time, only one fragment (A) will be displayed on the first side of the fold and the other side of the fold will be blank. \n<\/p>\n
\n  From this state, if you navigate to another fragment (B), then the new fragment will be opened on the end screen. Now, you\u2019ll have fragment A on the first display area and fragment B on the second display area.\n<\/p>\n
\n  If you are navigating to a third fragment (C), then fragment B will be moved to the first display area and the second display area will present the newly added fragment C.\n<\/p>\n
\n  You can navigate further, and open other fragments and the behavior will be the same; all fragments will be shifted from the end display area to the first one.\n<\/p>\n
\n  \"Diagram\n<\/p>\n
\n  You can change this behavior with the launchScreen attribute like this:\n<\/p>\n
<navigation xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n      xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\r\n      xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\n      android:id=\"@+id\/home\"\r\n      app:startDestination=\"@+id\/titleScreen\">\r\n      <fragment\r\n          android:id=\"@+id\/titleScreen\"\r\n          android:name=\"com.microsoft.device.dualscreen.navigation.sample.homescreen.TitleFragment\"\r\n          android:label=\"@string\/title_home\"\r\n          tools:layout=\"@layout\/fragment_title\">\r\n          <action\r\n              android:id=\"@+id\/action_title_to_about\"\r\n              app:launchScreen=\"end\"<\/strong>\r\n              app:destination=\"@id\/aboutScreen\"\r\n              app:enterAnim=\"@anim\/slide_in_right\"\r\n              app:exitAnim=\"@anim\/slide_out_left\"\r\n              app:popEnterAnim=\"@anim\/slide_in_right\"\r\n              app:popExitAnim=\"@anim\/slide_out_left\" \/>\r\n      <\/fragment>\r\n  <\/navigation><\/pre>\n
\n  Possible values for\u00a0launchScreen\u00a0are:\n<\/p>\n