Foldable Adaptation Essentials: App Continuity and Multi-Window Handling
Md. Iqbal Hossain
Engineer, Samsung Developer Program
App continuity and multi-window are key features of foldable smartphones. With app continuity, you can seamlessly go from the small screen to the large screen without the need to reopen the app that you were using. With multi-window, you can reply to an email in a pop-up window while using other apps and it is even easier to make dinner plans over text while checking your calendar. The large display is called the Main Display, while the inner small display is called the Cover Display. In this blog, we learn how to adapt these essential features in our app.
Figure 1: Multi-Window and Pop-Up Window
Let us find out how much needs to be changed to take advantage of these features.
App Continuity
Moving an app between the two displays affects the size, density, and aspect ratio of the display it can use. Moreover, your app data needs to be preserved during the transition to provide a seamless experience.
This is what happens during the transition
The activity is destroyed and recreated whenever the device is folded or unfolded. To implement this, app data needs to be stored and then used to restore the previous state.
The app data can be stored in two ways. In this blog, we have stored the app data using the onSaveInstanceState() method of Android. The other way is to use ViewModel which is shown in the blog How To Update Your Apps For Foldable Displays.
For our example, we have used an app, where we need to store the current score of two teams before the activity is destroyed so that we can restore the score when the activity is recreated after the screen transition (this sample app is provided at the end of this blog). We store the scores in a Bundle inside onSaveInstanceState, using two key-value pairs.
override fun onSaveInstanceState(outState: Bundle) {
scoreView1 = findViewById(R.id.team1Score) as TextView
scoreView2 = findViewById(R.id.team2Score) as TextView
outState.putString("score1", tempScore1.toString())
outState.putString("score2", tempScore2.toString())
super.onSaveInstanceState(outState)
}
We can check inside the onCreate function if the savedInstanceState is null. If it is null, then the activity has just been launched without a saved prior state. If it is not null, then we should retrieve the value from the savedInstanceState Bundle and restore the value to the UI in order to provide an immersive experience to the users.
if(savedInstanceState != null){
var text1: String? = savedInstanceState.getString("score1")
var text2: String? = savedInstanceState.getString("score2")
scoreView1?.text = text1
scoreView2?.text = text2
team1Score = text1?.toInt()!!
team2Score = text2?.toInt()!!
}
Demonstration
App Continuity
Figure 2: Screen Transition
Multi-Window and Multi-Tasking
Another vital feature of foldable devices is multi-window. Two or more apps can run in split-screen (multi-window) mode on the Main Display of foldable devices. Users can create their own layouts with up to three app windows on the screen. Pop-Up view is another option, which lets you temporarily use another app without closing the current app, such as to quickly view a message while enjoying a movie. To implement these features, the developer needs to focus on Responsive Layout while designing their UI.
To implement multi-window and enable multi-tasking, we need to use the following FLAGS: screenSize, smallestScreenSize, and screenLayout. If you want to manually handle these changes in your app you must declare those FLAGS values in the android:configChanges attributes. You can declare multiple configuration values in the attribute by separating them with a pipe (|) character. You can check out details for each value here.
In addition, we need to set android:resizeableActivity as true, which allows the activity to be launched in split-screen and free-form (pop-up) modes. If the attribute is set to false, the activity does not support multi-window mode.
<activity android:name=".MainActivity" android:configChanges="screenSize|smallestScreenSize|screenLayout" android:resizeableActivity="true">
Demonstration
Multi-Window
Figure 3: Multi-Window
Pop-Up Window
Figure 4: Pop-Up Window
Sample App
A sample app has been developed to illustrate how to implement app continuity and multi-window. In this app, a simple UI is designed to keep score of two teams playing a game. To adapt this app for foldable UI, some configurations have been changed by following the official guide.
Conclusion
Foldable devices provide a richer experience than phones. To take advantage of the features of foldable devices, new form factors should be added to the app configuration. Implementing app continuity enables users to enjoy uninterrupted experiences. And, with adjustable split-screen capabilities, users can enjoy up to three active windows simultaneously.
If you have questions about developing for Galaxy Z devices, please visit our Developer Forums.
