Tutorials Design, Mobile, Foldable

Adapt Your App for Galaxy Flex Mode

Md. Iqbal Hossain

Engineer, Samsung Developer Program

In early 2020, Samsung launched the Galaxy Z Flip foldable phone and Galaxy Z Fold2 foldable device. These groundbreaking devices offer a whole new mobile experience.

The Galaxy Z Flip introduced a new mode called Flex Mode, which allows you to use apps when your phone is partially folded. Samsung supports Flex Mode for Galaxy Z Flip and Galaxy Z Fold2. The app's UX is reoriented to fit the folded screen. When the phone is unfolded, components reoccupy their original positions to fit the full screen, like current traditional smartphones.

To provide users with a convenient and versatile foldable experience, developers need to optimize their apps to meet the Flex Mode standard. Google has also introduced a new Jetpack library, called WindowManager, that targets developers to support this new form factor and provide a universal API interface.

In this article, we discuss some APIs of Google’s new WindowManager library that optimize apps for Galaxy Z Flip and Galaxy Z Fold2.

Flex Mode

Application developers need to think out-of-the-box while designing the UX for Flex Mode. For example, a camera app UX can be divided into two parts. The developer could add the camera preview at the top and controls of the camera app at the bottom screen. Camera application developers also need to bear in mind the aspect ratio for the contents. In Flex Mode, the top screen allows developers to record videos or capture photos in different aspect ratios, including 1:1, 9:16, 3:4, 9:22 and 16:9.

Figure 1: Camera app in Flex Mode on the Galaxy Z Flip



Developers also need to reconsider the UX design for video chatting applications. The Google Duo app is optimized for the Galaxy Z Flip and Galaxy Z Fold2, as shown in the images below. The UX is divided into two parts for use in Flex Mode, with the upper part containing the video while the lower part contains the control buttons.

Figure 2: Optimized Google Duo app for the Galaxy Z Flip



Figure 3: Optimized Google Duo app for Galaxy Z Flip and Galaxy Z Fold2



Flex Mode in the YouTube app is implemented following the basic Flex Mode principle of the upper half showing the content and the lower half containing the control features, as show in the images below.

Figure 4: YouTube in full screen mode and Flex Mode in the Galaxy Z Flip



Figure 5: YouTube in Flex Mode in the Galaxy Z Fold2



Use your creativity to design your app depending upon your application scenario and use case. For example, Flex Mode can allow you to send messages or browse the web without holding the phone. You can set the phone somewhere flat, like on a table, and use the bottom half of the screen to navigate. Unfold the phone to use apps in full screen mode, and partially fold it again to return to Flex Mode.

Prerequisites

  1. Google Maven repository to your project for the dependency of WindowManager
  2. Android SDK 28 or later
  3. Add the dependencies in the build.gradle
implementation "androidx.window:window:1.0.0-alpha01"

Implementation

Step 1
Create a WindowManager instance from an activity.

val windowManager = WindowManager(this, null)

The default device information is used if you pass null, as in the example above. The instance provides no display features and an unknown device state if you run this on a regular phone. Custom implementation can be done using androidx.window.WindowBackend to emulate any foldable device (check out Google's implementation here).

Step 2

We need to check the display feature before getting into the actions for the Galaxy Z Fold2. If the device does not have the Type_Fold type, we don’t need to always imply a new form factor, but can simply check device features by calling getType().

Note: Nowadays, there are different types (folds, hinges, curved areas, or cutouts) of smartphone displays available in the market. First, we need to check the display type. In this example, we are dealing with a Fold display. The current version of the Jetpack library supports only TYPE_FOLD and TYPE_HINGE devices.

Step 3

To determine changes in the device state (for example CLOSED, OPENED, HALF_OPENED), we need to register the DeviceState change listener.

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

Step 4

Now let’s write a callback function to check the posture change of the device. Inside the callback, we just need to check deviceState.posture to get current posture of the device. If the posture is POSTURE_HALF_OPENED, the device is currently in Flex Mode and you need to implement your Flex Mode UX accordingly by calling for that action from here.

val handler = Handler(Looper.getMainLooper())
val mainThreadExecutor = Executor { r -> handler.post(r) }
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
  }
}
val windowManager = WindowManager(this, null)
windowManager.registerDeviceStateChangeCallback(
    mainThreadExecutor,
    callback
)
windowManager.unregisterDeviceStateChangeCallback(callback)

Testing and demo

For the demo, let’s use a sample application by Google. This example creates a music/video player application and it has a UX as shown below. It is visible in smartphones and in the Galaxy Z Flip when you are in full screen mode.

Figure 6: UX in full screen mode on the Galaxy Z Flip



In Flex Mode, the display is divided into two parts, as shown below. Content is shown on the top screen and the content title and controls are shown on the bottom screen.

Figure 7: UX in Flex Mode on the Galaxy Z Flip



Figure 8 : Display features in OPENED and HALF_OPENED device states on the Galaxy Z Flip



Figure 9: Display features in OPENED and HALF_OPENED device states on the Galaxy Z Fold2



Figures 8 and 9 demonstrate the display features in normal mode (OPENED) and Flex Mode (HALF_OPENED) of the Galaxy Z Flip and Galaxy Z Fold2. The deviceState.posture (described in Step 4) is outlined in red. This value confirms if the device is in normal mode (deviceState.posture=OPENED) or Flex Mode (deviceState.posture=HALF_OPENED).

Remote Test Lab demo

You may test Flex Mode using Remote Test Lab (RTL) if you don't have a Samsung foldable device. If you select Galaxy Z Fold2 or Galaxy Z Flip as a test device, then there are some controlling buttons. While you are in normal mode (full screen or OPENED), a button is visible to go to Flex Mode. When in Flex Mode (HALF_OPENED), a button is visible to go to normal mode.

Figure 10: Basic RTL features for foldable phones



Figure 11: Display features in OPENED and HALF_OPENED device states on the Galaxy Z Flip in RTL



Figure 12: Display features in OPENED and HALF_OPENED device states on the Galaxy Z Fold2 in RTL



Figures 11 and 12 demonstrate the display features in normal mode (OPENED) and Flex Mode (HALF_OPENED) on the Galaxy Z Flip and Galaxy Z Fold2 in RTL.

Conclusion

This article demonstrates steps to optimize your apps for foldable devices such as the Galaxy Z Flip and Galaxy Z Fold2. You can also check the sample app developed by Google for the full implementation. You can also check out more about Galaxy Z here.

If you have questions about developing for the Galaxy Z Flip or Galaxy Z Fold2, please visit our Developer Forums.

Recent Posts