Implement App Continuity and Optimize Large Screen UI of a Gallery App
implement app continuity and optimize large screen ui of a gallery app objective learn how to apply app continuity and large screen optimization on a gallery app for seamless experience on foldable devices overview samsung foldable devices have two different physical screens the cover display and the larger main display app continuity lets you experience a seamless transition between these displays when using an app that supports app continuity, you can unfold the device and continue where you left off with this feature, apps can run without interruption when it receives a configuration change event, such as when a device is folded or unfolded it is essential to continue the operation by keeping the same state and location of the app after the transition large screen optimization plays another significant role in terms of ux designing for foldable devices the screens of foldable devices have a wide range of aspect ratios, careful ux design is needed to suit two different size displays set up your environment you will need the following java se development kit jdk 8 or later android studio latest version recommended samsung galaxy fold, z fold2, z fold3, or newer remote test lab if physical device is not available requirements samsung account java runtime environment jre 7 or later with java web start internet environment where port 2600 is available sample code here is a sample code for you to start coding in this code lab download it and start your learning experience! app continuity sample code 2 80 mb start your project after downloading the sample code containing the project file for this code lab, open your android studio and click open an existing project locate the downloaded android project from the directory and click ok handle the configuration change to have a seamless experience when using a gallery app, the photo that is displayed after folding or unfolding the device should be the same as the previous you need to store the position or id of the photo, as android destroys and recreate the activity when folding and unfolding the phone use bundle with its key/value pair to store and restore the values in addition, you need to consider the screen rotation in order to keep the app running, as android restarts the activity of the app after the configuration changes let's first start to prevent the activity from restarting, by handling the configuration change for mainactivity in androidmanifest xml file android configchanges="keyboardhidden|orientation|screensize" save the instance state by storing the data before the activity is destroyed when the screen changes from main to cover display or vice versa, android provides us an override method called onsaveinstancestate it accepts a bundle as a parameter use putint method to store data into key/value pair override fun onsaveinstancestate outstate bundle { outstate putint "currentposition", currentimageposition log i "tag", "onsave "+currentimageposition super onsaveinstancestate outstate } retrieve the stored values when the app is first developed, the savedinstancestate will be null inside the oncreate method if it is not null, you can retrieve the stored values from the bundle using getint and the key name you set up in the previous step while storing if savedinstancestate != null { selectedimageview!! setimageresource images[savedinstancestate getint "currentposition" ] customgalleryadapter!! updateposition images[savedinstancestate getint "currentposition" ] currentimageposition = savedinstancestate getint "currentposition" log i "tag", "onsaved " + savedinstancestate getint "currentposition" } create a layout file for the main display the next thing to do, is to optimize the app's large screen ui here, you will add a navigator for the photos when using the app in the main display, since it has more space android offers an alternate resources option based on various criteria like display size, density, and other more you can use two different layout files for each display using alternate resources of android create a new directory in res in the form of [resource]-[qualifier] for cover display and main display the appropriate version of the resource is shown automatically by the system based on the smallest width qualifier of sw the cover display will be between sw240 and sw480, while the main display will be sw600 create a new directory named layout-sw600dp under the res directory and then create an xml file named activity_main res/ layout/ activity_main xml layout-sw600dp/ activity_main xml add the layout code add the gallery layout code shown below, in layout-sw600dp/activity_main xml file <?xml version="1 0" encoding="utf-8"?> <androidx constraintlayout widget constraintlayout xmlns android="http //schemas android com/apk/res/android" xmlns app="http //schemas android com/apk/res-auto" xmlns tools="http //schemas android com/tools" android id="@+id/linearlayout" android layout_width="match_parent" android layout_height="match_parent" tools context="com xyz gallery mainactivity"> <imageview android id="@+id/imageview" android layout_width="wrap_content" android layout_height="match_parent" android gravity="center_vertical" app layout_constraintend_toendof="parent" app layout_constraintstart_tostartof="parent" app layout_constrainttop_totopof="parent" /> <gallery android id="@+id/allgallery" android layout_width="fill_parent" android layout_height="108dp" android layout_marginbottom="4dp" android gravity="fill" android orientation="horizontal" android padding="10dp" android spacing="5dp" app layout_constraintbottom_tobottomof="parent" app layout_constraintend_toendof="parent" app layout_constrainthorizontal_bias="0 0" app layout_constraintstart_tostartof="parent" /> </androidx constraintlayout widget constraintlayout> run the app after building the apk, you can run the gallery app and see how it change when you fold and unfold the device if you don’t have any physical device, you can also test it on a remote test lab device tipwatch this tutorial video and know how to easily test your app via remote test lab noteapp continuity when folding the device, can be turned on for selected apps in settings if the app supports app continuity to continue using the gallery app on the cover display when you close your phone, go to settings> display > continue apps on cover screen > toggle on gallery app foldable devices let you decide whether you want to see less or more content at the same time in the main display to see the photo navigator added in the app, go to settings> display > screen layout and zoom > see more content at the same time you're done! congratulations! you have successfully achieved the goal of this code lab now, you can optimize your app to support continuity and large screen layout by yourself! if you're having trouble, you may download this file app continuity complete code 24 44 mb to learn more about developing apps for galaxy foldable devices, visit www developer samsung com/galaxy-z