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)
}
}
}
updateStateAndFeatureViews()
is a user-defined function and is not included in the WindowManager library. In this Code Lab, it needs to be called to check the device posture.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() }
VERTICAL
, whereas a Galaxy Flip's device orientation is HORIZONTAL
.-
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