Quantcast
Jump to content

Seamless UI Experience of Your App for Samsung Galaxy Z Fold2


Recommended Posts

2020-11-26-01-banner.png

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.

2020-11-26-01-01.jpg
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");
    }
}
2020-11-26-01-02.jpg 2020-11-26-01-03.jpg

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.

2020-11-26-01-04.jpg 2020-11-26-01-05.jpg

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

2020-11-26-01-06.jpg

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>

2020-11-26-01-07.jpg

Figure 5: Display cutout Default mode

2020-11-26-01-08.jpg
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.

View the full blog at its source

Link to post
Share on other sites


Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...


×
×
  • Create New...