Tutorials Design, Mobile, Foldable

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.

Sample App - App Continuity and Multi-Window
(20.15MB) Oct 18, 2021

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.

Recent Posts