Adapt Your App to Foldable Devices for an Optimal User Experience

[Samsung Newsroom]

Foldable technology for mobile is a groundbreaking experience not only for users but also for developers. The presence of many form factors like immersive display, app continuity, Flex mode and UX optimization challenge developers to think outside of the box to adapt to this technology. In this blog, we discuss a checklist to provide a better understanding about the adaptation, modification and design changes that are required. So, let's go through each point, one-by-one.

Large screen optimization

Samsung foldable devices have two different physical screens: the cover display and the main display. As the cover display is much smaller than the main display, large screen optimization is one of the key areas of designing UX for foldable devices. In a nutshell, your app can utilize the extra space in the main display by showing more information. Just having a different UI design with the same information can do the trick of optimization as well.

Large screen optimization of a note app

To implement this scenario, define different layout files for each display using the alternate resources option. For example, if you want to define a different UI for the main display, create a new directory named layout-sw600dp under the res directory and then create an xml file named activity_main. Then add the layout code as required.

UI is designed separately for the main display and the cover display

Flex mode optimization

In Galaxy Z series devices, Samsung introduced a new mode called Flex mode. This mode allows users to use apps while the book-like phone is partially folded. Creative design can really make your app stand out from others in Flex mode.

Google Duo app in Flex mode in Galaxy Z series devices

Using Google’s new Jetpack library, WindowManager, you can detect the current posture of a Galaxy Z series device and update the UI accordingly by following these steps:

Step 1: Add the dependencies in the build.gradle.

implementation "androidx.window:window:1.0.0-alpha01"

Step 2: Define a WindowManager instance.

val windowManager = WindowManager(this, null)

Step 3: Register the DeviceState change listener. The listener notices changes in the device state (for example CLOSED, OPENED, HALF_OPENED).

windowManager.registerDeviceStateChangeCallback( 
mainThreadExecutor /* Executor */, 
callback /* Consumer<DeviceState> */
)

Step 4: Write a callback function to check deviceState.posture to get the current posture of the device. If the posture is POSTURE_HALF_OPENED, the app UI gets updated for Flex mode.

val callback = Consumer<DeviceState> { deviceState ->
  if (deviceState.posture == DeviceState.POSTURE_HALF_OPENED) {
    // Display is folded, show Split UX
  } else {
    // Display is not folded, show Full Screen UX
  }
}

Check out the CodeLab challenge on Flex mode for a more hands-on experience.

App continuity

While folding and unfolding the device, the app must prevent data loss thus ensuring its continuity. This is achievable by using the onSaveInstanceState() method. First, save the data to retain the current state with onSaveInstanceState().

@Override
public void onSaveInstanceState(Bundle savedInstanceState)
{
    //Save the current state
}

Then, restore the data in the onCreate() function.

@Override
protected void onCreate(Bundle savedInstanceState)
{
    if (savedInstanceState != null) {
        //restore the previous state
    }
}

Stopwatch app continuity while unfolding device

To have a better understanding of implementing app continuity, see the CodeLab challenge on app continuity.

Responsive UI layout

To adapt to new form factors such as a diverse aspect ratio, Flex mode, multi-window, and pop-up window, utilize the following guidelines :

• Design a responsive UI layout for your app using ConstraintLayout.
• Define the activity of your app as resizable, to ensure the maximum compatibility of your app with both the cover display and the main display of the device. Set the resizableActivity attribute to true in Manifest.xml.

<activity android:name=".MainActivity" android:resizeableActivity="true">
  
…
</activity>

Responsive layout of the Spotify app

Cutout and punch hole of the main display

The main display of a Galaxy Z Fold is covered by an area on the top-right side called the “L-cut” whereas the Galaxy Z Fold2 and Fold3 have a punch hole in the upper right side and the Galaxy Z Flip devices have a punch hole in the middle. Some portion of your app’s UI could be covered by the L-cut or the punch hole.

Content is covered by the L-cut in a Galaxy Fold device in landscape mode

To avoid such a scenario, depending on your UI content style, define a display cutout mode. For example, the content is letterboxed in landscape mode whereas it is rendered into the cutout area in portrait mode by default. Define the display cutout mode in the style.xml as shortEdges so that your content is rendered into the cutout area in both portrait and landscape modes.

<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>

Display cutout in the default mode and the shortEdges mode, respectively

Last but not the least, you can test your app on our device cloud, Samsung Remote Test Lab, to make sure you have implemented all the checkpoints discussed in this blog. You can also participate in our Codelab challenges to have a clear understanding of the implementation details.

In this blog we have discussed about how to adapt your app for foldable devices. We hope it is a good guide for you to start with. You can also check out Samsung’s official documentation and reach out to our developer community if you have any queries.

View the full blog at its source