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.
Foldable devices let you decide whether you want to see less or more content at the same time in the main display. To see the photo navigator added in the app, go to Settings> Display > Screen Layout and zoom > See more content at the same time.
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