Implement Flex Mode on a Video Player

Objective

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

Overview

The Galaxy Z Fold4, or its previous versions, is a foldable phone with a vertical axis that opens like a book. At the same time, the Galaxy Z Flip4, or its predecessors, 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 full-screen mode.

In Flex mode, the app's UI 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 reoccupy their original positions to fit the full-screen mode, like usual smartphones. It gives an outstanding experience on camera, video calls, 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 Foldable device:
  • Galaxy Z Fold2, Z Fold3, or newer
  • Galaxy Z Flip, Z Flip3, or newer
• 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!

Start your project

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

Locate the downloaded Android Project (VideoPlayer-main) from the directory and click OK.

Add the Maven repository and WindowManager library

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

To add a dependency on WindowManager, you must first add the Maven central repository to the project. Go to Gradle Scripts > build.gradle (Project: Video_Player) and enter the following in the allprojects block.

mavenCentral()

Then, go to Gradle Scripts > build.gradle (Module: Video_Player.app) and add the WindowManager library to the dependencies block.

implementation "androidx.window:window:1.0.0"
implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.6.1'

Set up a flow to collect data from WindowLayoutInfo

In the MainActivity.kt, add a lifecycle-aware coroutine to obtain information from WindowLayoutInfo. The coroutine executes each time the lifecycle starts.

lifecycleScope.launch(Dispatchers.Main) {
    lifecycle.repeatOnLifecycle(Lifecycle.State.STARTED) {
        WindowInfoTracker.getOrCreate(this@MainActivity)
            .windowLayoutInfo(this@MainActivity)
            .collect {
                    newLayoutInfo -> updateStateAndFeatureViews(newLayoutInfo)
            }
    }
}

Determine the device posture and update the UI

Next, in the updateStateAndFeatureViews() function, check the current posture of the device and update the UI accordingly for Flex mode.

• When the device is currently folded, the displayFeatures is null.

  if(newLayoutInfo.displayFeatures.isEmpty())
  

• When the device is currently in Flex mode or partially folded, the device posture is HALF_OPENED. Using the device posture and orientation, implement your Flex mode UI.

  if (it.state == FoldingFeature.State.HALF_OPENED && it.orientation == FoldingFeature.Orientation.VERTICAL) {
      updateUIforFold()
  }else if (it.state == FoldingFeature.State.HALF_OPENED && it.orientation == FoldingFeature.Orientation.HORIZONTAL){
      updateUIforFlip()
  }
  

• When the device is unfolded, the device posture is FLAT.

  else if(it.state == FoldingFeature.State.FLAT) 
  

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 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:

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