Seamless UI Experience of Your App for Samsung Galaxy Z Fold2
maintaining the legacy of foldable technology, samsung recently released the new galaxy z fold2. this device is designed to provide a new and seamless experience to users with its infinity flex display. as a developer, you can adjust your app to provide the best ui experience to your users. in this blog, we will demonstrate how a stopwatch app can be modified to adjust with galaxy z fold2 devices. the stopwatch app is pretty simple, having three functionalities—start, pause and reset the time. figure 1: stopwatch app example in order to provide a seamless experience to the user, we have to ensure app continuity, adjust the activity according to the ui, support multi-resume in multi-window, and check the display cutout. so let’s get started. app continuity like the previous galaxy z fold, the new galaxy z fold2 has two separate physical screens. the cover display is 2260 x 816 pixels and the main display is 2208 x 1768 pixels. to provide a seamless experience to the user while folding and unfolding the device, the app must maintain its continuity by preventing data loss. you can ensure continuity by using the onsaveinstancestate() method. first, save the data of the current state with onsaveinstancestate(). for the stopwatch app, the time that has passed is saved in seconds before the activity is paused. @override public void onsaveinstancestate(bundle savedinstancestate) { savedinstancestate.putint("seconds", seconds); savedinstancestate.putboolean("running", running); savedinstancestate.putboolean("wasrunning", wasrunning); } then restore the data of the activity using the oncreate() function. @override protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); if (savedinstancestate != null) { seconds = savedinstancestate.getint("seconds"); running = savedinstancestate.getboolean("running"); wasrunning = savedinstancestate.getboolean("wasrunning"); } } figure 2: continuity of the stopwatch while folding and unfolding the device ensure dynamic resizing of your app if you want your app to support multi-window mode, define the activity as resizable. this can be done by setting the resizableactivity attribute to true in manifest.xml. this ensures the maximum compatibility with both the cover screen and the main screen of the device. <activity android:name=".mainactivity" android:resizeableactivity="true"> … </activity> another approach is to define an aspect ratio for your app. galaxy z fold2’s cover screen has a ratio of 25 : 9 whereas the main screen has a ratio of 22.5 : 18. to be compatible with the device, you should test your apps for these ratios and that they fill up the entire display. you can use the minaspectratio or the maxaspectratio flag to constrain your app within the feasible aspect ratios. please note that, if the resizableactivity attribute is set to true, the minaspectratio and the maxaspectratio flag are ignored. figure 3: dynamically resizable app in pop-up view and split-window view multi-resume for multi-window up to android 9, only one of the activities visible in the multi-window operation is allowed to stay in the resumed state. all other activities are put into the paused state. therefore, you have to force your app to be in the resumed state by adding the following in the manifest.xml file. <meta-data android:name="android.allow_multiple_resumed_activities" android:value="true" /> however, starting from android 10, all activities visible in multi-window are allowed to stay in the resumed state. you no longer need to force your app to have multi-resume behavior. however, there are some cases where an app can be in the paused state in android 10, in which case you need to enforce the multi-resume behavior: • in a minimized split-screen (with launcher on the side), the top activity isn't resumed because it's not focusable • in picture-in-picture mode, the activity isn't resumed because it's not focusable • when activities are covered by other transparent activities in the same stack figure 4: multi-resume in multi-window display cutout the main display of the galaxy z fold2 has a punch hole in the upper right side. you can set a display cutout mode according to your content style. by default, the content is rendered into the cutout area while in portrait mode and letterboxed while in landscape mode. if you want your content to be rendered into the cutout area in both portrait and landscape modes, you can define the mode as shortedges. in the sample app, the cutout mode is set to shortedges in the style.xml file. the sample app is set to full screen and display cutout mode is set to shortedges. <item name="android:windowlayoutindisplaycutoutmode">shortedges</item> <item name="android:windowtranslucentnavigation">true</item> figure 5: display cutout default mode figure 6: display cutout in shortedges mode hopefully this blog helps you to update your app for the galaxy z fold2 and give the user a better ui experience. to check out the sample app, click here. you can also view samsung’s official documentation for galaxy z devices. if you have any questions regarding foldable ui, feel free to post it in the samsung developers forums.