![](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/07\/word-image-9.png\")
\n<\/p>\n\n Hello Android developers! \n<\/p>\n
\n A common \u201cfirst app\u201d for new developers is a simple to-do list app \u2013 it typically incorporates data entry, database storage, multiple views, and simple navigation, so it\u2019s great for learning. The app I\u2019m sharing today, called TwoDo, is exactly that, except it is also built for dual-screen devices like Microsoft Surface Duo. It will ultimately be used in a Microsoft Learn module to show developers how they can use Jetpack Window Manager to create dual-screen app experiences.\n<\/p>\n
\n TwoDo is a basic to-do list app that leverages the dual-screen layout of foldable mobile devices like Surface Duo. The user can view a list of tasks on one screen and create\/edit tasks and view their details on the other screen. \n<\/p>\n
\n \n<\/p>\n
Figure 1: Dual-screen to-do list experience<\/em>\n<\/p>\n \n The app has two activities: a splash activity (MainActivity.kt), and the TwoDo activity (TwoDoActivity.kt). The splash activity serves as a \u201cwelcome\u201d screen for TwoDo, while the TwoDo activity is the actual to-do list.\n<\/p>\n \n The splash activity shows how to create a dual-screen app in its simplest form. The welcome message appears normally, but when spanned, a logo appears on the other screen. Jetpack Window Manager is used to detect the fold. When the fold is detected, its position is calculated and sent to the ReactiveGuide, which the logo is constrained to. MotionLayout handles the animation of the logo appearing on the right screen. A more detailed explanation of this technique can be found in a previous blog: ExoPlayer video on dual-screen and foldable devices<\/a>.\n<\/p>\n \n \n The TwoDo activity leverages SlidingPaneLayout for its dual-screen capabilities and Android Room for storing task data on the device.\n<\/p>\n \n The layout associated with this activity, activity_two_do.xml, has a SlidingPaneLayout root view. SlidingPaneLayout is a Jetpack Window Manager feature that provides a horizontal pane layout. This is perfect for many dual-screen applications because it can handle moving between panes in single-screen mode and showing both panes at once when the app is spanned across both screens. SlidingPaneLayout must be provided with two children views \u2013 one for each pane. In TwoDo, the first child view is a Relative Layout that contains the title text, button, and a RecyclerView that loads the list of tasks. The second child view is a FragmentContainerView, which loads a create\/edit task fragment or a logo fragment if we are not creating or editing a task. The following code snippet is the SlidingPaneLayout xml used in TwoDo.\n<\/p>\n \n \n Tasks are stored on the device using Android Room<\/a>. A task consists of four data fields: uid, name, notes, and complete (boolean). We can create an Entity with these fields with Room, which defines the table and its columns. In this case, our table\u2019s PrimaryKey is the uid, and it is automatically generated by Room as we insert tasks. From there, we create a DAO, or data access object. In the Task DAO, we can define methods that access the database, such as queries for getting tasks, and creating\/updating\/deleting tasks. Android Room automatically generates the implementation of these methods at compile time. We can ultimately use these implementations for accessing the database through a ViewModel. The TwoDo activity and its associated fragments all use the same ViewModel instance to ensure they are all using the same set of data. The following code snippet is the TaskDao Kotlin file.\n<\/p>\n \n The code for the TwoDo sample<\/a> is available on GitHub.\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>. You can read more about Jetpack Window Manager and other samples in our past blog posts<\/a>.\n<\/p>\n \n Finally, please join us for our dual screen developer livestream<\/a> at 11am (Pacific time) each Friday \u2013 mark it in your calendar and check out the archives on YouTube<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":" Hello Android developers! A common \u201cfirst app\u201d for new developers is a simple to-do list app \u2013 it typically incorporates data entry, database storage, multiple views, and simple navigation, so it\u2019s great for learning. The app I\u2019m sharing today, called TwoDo, is exactly that, except it is also built for dual-screen devices like Microsoft Surface […]<\/p>\n","protected":false},"author":65067,"featured_media":1757,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[706,473,46],"class_list":["post-1750","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-surface-duo-sdk","tag-jetpack-window-manager","tag-kotlin","tag-surface-duo"],"acf":[],"blog_post_summary":" Hello Android developers! A common \u201cfirst app\u201d for new developers is a simple to-do list app \u2013 it typically incorporates data entry, database storage, multiple views, and simple navigation, so it\u2019s great for learning. The app I\u2019m sharing today, called TwoDo, is exactly that, except it is also built for dual-screen devices like Microsoft Surface […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/1750","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/users\/65067"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/comments?post=1750"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/1750\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media\/1757"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media?parent=1750"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/categories?post=1750"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/tags?post=1750"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Technical Details<\/h2>\n
Splash Activity \u2013 Jetpack WM, MotionLayout, and ReactiveGuide<\/h3>\n
![](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/07\/word-image-2.gif\")
<\/br>Figure 2: The splash activity separates the welcome message and the logo onto each screen<\/em>\n<\/p>\nTwoDo Activity \u2013 SlidingPaneLayout and Room<\/h3>\n
<androidx.slidingpanelayout.widget.SlidingPaneLayout 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\/sliding_pane_layout\"\r\n android:layout_width=\"match_parent\"\r\n android:layout_height=\"match_parent\"\r\n tools:context=\".TwoDoActivity\">\r\n\r\n <RelativeLayout\r\n android:id=\"@+id\/side_pane_content\"\r\n android:layout_width=\"400dp\"\r\n android:layout_height=\"match_parent\"\r\n android:layout_gravity=\"start\"\r\n android:orientation=\"vertical\">\r\n\r\n <TextView\r\n android:id=\"@+id\/twodo_title\"\r\n android:layout_width=\"wrap_content\"\r\n android:layout_height=\"wrap_content\"\r\n android:layout_margin=\"10dp\"\r\n android:text=\"@string\/task_list_title\"\r\n android:textSize=\"30sp\"\r\n android:textStyle=\"bold\" \/>\r\n\r\n <androidx.recyclerview.widget.RecyclerView\r\n android:id=\"@+id\/recycler_view\"\r\n android:scrollbars=\"vertical\"\r\n android:layout_width=\"match_parent\"\r\n android:layout_height=\"match_parent\"\r\n android:layout_below=\"@id\/twodo_title\">\r\n\r\n <\/androidx.recyclerview.widget.RecyclerView>\r\n\r\n <com.google.android.material.floatingactionbutton.FloatingActionButton\r\n android:id=\"@+id\/fab\"\r\n android:layout_width=\"wrap_content\"\r\n android:layout_height=\"wrap_content\"\r\n android:layout_alignParentBottom=\"true\"\r\n android:layout_alignParentStart=\"true\"\r\n android:layout_margin=\"@dimen\/fab_margin\"\r\n android:backgroundTint=\"?colorPrimary\"\r\n app:tint=\"@android:color\/white\"\r\n app:srcCompat=\"@drawable\/ic_plus_24\" \/>\r\n\r\n <\/RelativeLayout>\r\n\r\n <androidx.fragment.app.FragmentContainerView\r\n android:id=\"@+id\/task_container\"\r\n android:layout_width=\"460dp\"\r\n android:layout_height=\"match_parent\"\r\n android:layout_weight=\"1\" \/>\r\n\r\n<\/androidx.slidingpanelayout.widget.SlidingPaneLayout><\/pre>\n
![](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/07\/word-image-3.gif\")
Figure 3: TwoDo task list demo<\/em>\n<\/p>\n@Dao\r\ninterface TaskDao {\r\n\r\n @Query(\"SELECT*FROM twodo_table ORDER BY uid ASC\")\r\n fun getTwoDoList(): LiveDataFeedback and Resources<\/h2>\n