Implement App Continuity and Optimize Large Screen UI of a Gallery App

Objective

Learn how to apply app continuity and large screen optimization on a gallery app for seamless experience on foldable devices.

Overview

Samsung foldable devices have two different physical screens: the cover display and the larger main display. App continuity lets you experience a seamless transition between these displays. When using an app that supports app continuity, you can unfold the device and continue where you left off. With this feature, apps can run without interruption when it receives a configuration change event, such as when a device is folded or unfolded. It is essential to continue the operation by keeping the same state and location of the app after the transition.

Large screen optimization plays another significant role in terms of UX designing for foldable devices. The screens of foldable devices have a wide range of aspect ratios, careful UX design is needed to suit two different size displays.

Set up your environment

You will need the following:

• Java SE Development Kit (JDK) 8 or later
• Android Studio (latest version recommended)
• Samsung Galaxy Fold, Z Fold2, Z Fold3, 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 file for this Code Lab, open your Android Studio and click Open an Existing Project.

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

Handle the configuration change

To have a seamless experience when using a gallery app, the photo that is displayed after folding or unfolding the device should be the same as the previous. You need to store the position or ID of the photo, as Android destroys and recreate the activity when folding and unfolding the phone. Use Bundle with its key/value pair to store and restore the values. In addition, you need to consider the screen rotation in order to keep the app running, as Android restarts the activity of the app after the configuration changes.

Let's first start to prevent the activity from restarting, by handling the configuration change for MainActivity in AndroidManifest.xml file.

android:configChanges="keyboardHidden|orientation|screenSize"

Save the instance state by storing the data

Before the activity is destroyed when the screen changes from main to cover display or vice versa, Android provides us an override method called onSaveInstanceState. It accepts a Bundle as a parameter. Use putInt method to store data into key/value pair.

override fun onSaveInstanceState(outState: Bundle) {
      outState.putInt("Currentposition", currentImagePosition)
      Log.i("TAG", "onSave "+currentImagePosition)
      super.onSaveInstanceState(outState)
}

Retrieve the stored values

When the app is first developed, the savedInstanceState will be null inside the onCreate method. If it is not null, you can retrieve the stored values from the Bundle using getInt and the key name you set up in the previous step while storing.

if(savedInstanceState != null) {
  selectedImageView!!.setImageResource(images[savedInstanceState.getInt("Currentposition")])
  customGalleryAdapter!!.updatePosition(images[savedInstanceState.getInt("Currentposition")])
  currentImagePosition = savedInstanceState.getInt("Currentposition")
  Log.i("TAG", "onSaved " + savedInstanceState.getInt("Currentposition"))
}

Create a layout file for the main display

The next thing to do, is to optimize the app's large screen UI. Here, you will add a navigator for the photos when using the app in the main display, since it has more space.

Android offers an alternate resources option based on various criteria like display size, density, and other more. You can use two different layout files for each display using alternate resources of Android. Create a new directory in res in the form of [resource]-[qualifier] for cover display and main display. The appropriate version of the resource is shown automatically by the system based on the smallest width qualifier of sw. The cover display will be between sw240 and sw480, while the main display will be sw600.

Create a new directory named layout-sw600dp under the res directory and then create an xml file named activity_main.

res/
  layout/   
      activity_main.xml 
  layout-sw600dp/ 
      activity_main.xml

Add the layout code

Add the gallery layout code shown below, in layout-sw600dp/activity_main.xml file.

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:id="@+id/linearLayout"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context="com.xyz.gallery.MainActivity">

   <ImageView
      android:id="@+id/imageView"
      android:layout_width="wrap_content"
      android:layout_height="match_parent"
      android:gravity="center_vertical"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent" />

   <Gallery
      android:id="@+id/allGallery"
      android:layout_width="fill_parent"
      android:layout_height="108dp"
      android:layout_marginBottom="4dp"
      android:gravity="fill"
      android:orientation="horizontal"
      android:padding="10dp"
      android:spacing="5dp"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintHorizontal_bias="0.0"
      app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Run the app

After building the APK, you can run the gallery app and see how it change when you fold and unfold the device. If you don’t have any physical device, you can also test it on a Remote Test Lab device.

You're done!

Congratulations! You have successfully achieved the goal of this Code Lab. Now, you can optimize your app to support continuity and large screen layout 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