Implement Flex Mode on a Video Player


Objective

Learn how to implement Flex mode on a video player app using Android Jetpack Window Manager.

Overview

The Galaxy Z Fold2 or Z Fold3 is a foldable phone with a vertical axis that opens like a book, while the Galaxy Z Flip or Z Flip3 folds horizontally, dividing its screen into upper and lower sections. When the phone is partially folded, it is called Flex mode. Unfolding the phone will return the apps in a full-screen mode.

In Flex mode, the app’s UX separates its controls on the bottom from the rest of the content on the top to fit the partially folded screen. When the phone is unfolded, window components will reoccupy their original positions to fit the full-screen mode, like usual smartphones. It gives a distinguished experience on camera, video call, multimedia, and other apps. To provide users with a convenient and versatile foldable experience, developers need to optimize their apps to meet the Flex mode standard.

Set up your environment

You will need the following:

  • Java SE Development Kit (JDK) 8 or later

  • Android Studio (latest version recommended)

  • Samsung Galaxy Z Fold2, Z Fold3, Z Flip, or Z Flip3

  • 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!

Flex Mode Sample Code
(171.80 KB)

Start your project

After downloading the sample code containing the project files, open your Android Studio and click Open an Existing Project.

Locate the downloaded Android Project from the directory and click OK.

Add Window Manager library into the project

Window Manager, a new Jetpack library introduced by Google, helps application developers support new device form factors.

To add the Window Manager library, go to Gradle Scripts > build.gradle (Module: Video_Player.app) and enter the following to the dependencies block:


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

Create a WindowManager instance from the activity

In MainActivity.kt, let’s obtain an instance of Window Manager:


windowManager = WindowManager(this, null)

The default device information is used if you pass null here. The instance provides display features if you run this on a foldable device. Otherwise, an unknown device state is provided, if you run this on a regular phone.

Register the DeviceState change listener

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


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

Write the callback function

Now, let’s write a callback function to check the posture change of the device:


inner class DeviceStateChangeCallback : Consumer<DeviceState> {
	override fun accept(newDeviceState: DeviceState) { 
		updateStateAndFeatureViews()     
	}
}
  

Check the current posture of the device

Next, let’s make sure that, in the updateStateAndFeatureViews() function, the deviceState.posture is being checked to get the current posture of the device. If you find the posture as POSTURE_HALF_OPENED, the device is currently in Flex mode. You need to implement your Flex mode UX accordingly and can call for that action from here:

	
var state= windowManager.deviceState
	

Run the app

After building the APK, you can run the optimized video player app on a foldable Galaxy device and see how it adapts when the device is on Flex mode. However, if you don’t have a physical device, you can test it on a Remote Test Lab device. Watch the video below and know how to easily test your app via Remote Test Lab.

You're done!

Congratulations! You have successfully achieved the goal of this Code Lab. Now, you can implement Flex mode in your app by yourself! If you're having trouble, you may download this file:

Flex Mode Complete Code
(168.29 KB)

To learn more about developing apps for Galaxy Foldable devices, visit: www.developer.samsung.com/galaxy-z