Tutorials Foldable, Mobile

Best Practices of App Development for Various Screen Sizes—Powered by Good Lock

Samiul Hossain

Engineer, Samsung Developer Program

Due to the large variety of Android devices, supporting multiple screen sizes and display modes is an essential part of modern Android application development. A responsive and adaptable UI provides a seamless user experience for people using the application on different devices, such as phones, foldables, and tablets.

This article offers some tips and tricks for developing adaptable applications that support features specific to foldable and large screen devices:

Display widgets and applications on the cover screen using Good Lock

One of the biggest strengths of Android devices is customization. With Good Lock, users can customize One UI to cater to their individual needs, such as adding widgets to the cover screen.

In August 2023, Samsung released the Galaxy Z Flip5, a foldable smartphone with a cover screen display. The 3.4-inch cover screen can be used to provide the user direct access to the most important information and functionality of their applications. It also offers new opportunities for customization and personalization. The cover screen is designed to display customizable widgets, such as clocks, wallpapers, notification lists, and calendars. For basic information about creating Android widgets, see Create a simple widget.

You can also create widgets for your application that can be displayed on the cover screen. For example, if you are developing a messaging application, you can enhance your application by creating a widget that displays recent or unread messages on the cover screen.

To enable displaying your widget on the Galaxy Z Flip5 cover screen (also called the Flex Window):

  1. Create a new XML resource file inside your application's res/xml folder. Paste the following code to configure your widget's display for the Flex Window:
    <samsung-appwidget-provider
    display="sub_screen">
</samsung-appwidget-provider>
  2. In your project's manifest file, add the metadata for the XML file you just created inside the <receiver> element for your application widget:
    <meta-data
 android:name="com.samsung.android.appwidget.provider"
 android:resource="@xml/samsung_meta_info_sample_widget" />
  3. In the XML file containing the metadata for your application widget, change the attributes of your widget to these recommended values:
    <appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
    android:initialLayout="@layout/test_widget"
    android:minHeight="352dp"
    android:minWidth="339dp"
    android:resizeMode="vertical|horizontal"
    android:widgetCategory="keyguard">
</appwidget-provider>

When the application is installed, your widget appears on the list of Cover Screen Widgets on the device. The user can display the widget on the Flex Window by going to Settings > Cover Screen > Widgets and selecting the widget from the list.

To learn more about widget development for the cover screen, see the Develop a widget for Flex Window Code Lab.

Although the cover screen is primarily meant for widgets, users can also use the MultiStar application in Good Lock to launch full applications on the cover screen. To launch an application on the cover screen:

  1. Install Good Lock from Galaxy Store.
  2. In the Good Lock application, go to Life Up > MultiStar > I ♡ Galaxy Foldable > Launcher Widget.
  3. From the list, select the application you want to launch on the cover screen and tap Enable Launcher Widget.

It is vital that your applications can adapt to small screens as much as large screens. The next two sections briefly summarize how to adapt your applications to both Flex Mode and multi-window mode.

Adapt your application to Flex Mode

Constraint Layout is recommended for implementing responsive UI in your applications. Constraint Layout gives you a flat view hierarchy, avoiding troublesome nested views. You can assign a relative size and distance between viewgroups, so the components scale based on the device that the application is running on.

Let's say you want to create an application that displays a list of pictures in the middle of the screen, equally spaced. To do this, you can use guidelines, which are virtual guides that help you to align views.

To add guidelines and adapt your UI to it:

  1. In Android Studio, go to Helpers > Guideline(Horizontal) or Guideline(Vertical) and drag guidelines onto your layout.
  2. Change the value of app:layout_constraintGuide_begin from a static value to a percentage value.
  3. Align your views to the new guidelines by constraining them to the guidelines.

For more information on implementing layouts using guidelines and a demonstration, see Design a Single Responsive Layout for Foldable Phones Using Android Guidelines.

You can also use Android's Jetpack WindowManager library, which supports various form factors, including multi-window, to provide support for Flex Mode in your application:

  1. Add the following dependencies to the application's build.gradle file:

    implementation "androidx.window:window:1.0.0"
implementation "androidx.lifecycle:lifecycle-runtime-ktx:2.6.1"

  2. Set a lifecycle-aware task that can obtain window layout information from the WindowLayoutInfo object. The checkAndUpdateState() function is used to update your UI. Pass the newLayoutInfo object to this function and make the appropriate changes.

    lifecycleScope.launch(Dispatchers.Main) {
lifecycle.repeatOnLifecycle(Lifecycle.State.STARTED) {
    WindowInfoTracker.getOrCreate(this @MainActivity)
        .windowLayoutInfo(this @MainActivity)
        .collect {
                newLayoutInfo -> checkAndUpdateState(newLayoutInfo)
        }
    }
}

  3. The WindowLayoutInfo object contains a displayFeatures object that contains the current state of your application. The displayFeatures object also contains the FoldingFeature interface, which describes device states and orientations specific to foldable devices:

    • If the displayFeatures object is null, the device is closed or folded.
    • If FoldingFeature.State is HALF_OPENED and FoldingFeature.Orientation is VERTICAL, the device is a Galaxy Flip device in Flex Mode.
    • If FoldingFeature.State is HALF_OPENED and FoldingFeature.Orientation is HORIZONTAL, the device is a Galaxy Fold device in Flex Mode.
    • If FoldingFeature.State is Flat, the device is fully open.

    For more information about adapting your UI for various device states and orientations, see Make your app fold aware.

  4. To configure your application for the current window size, whether it is portrait, landscape, folded, unfolded, multi-window or any other mode, override the onConfigurationChanged() function and retrieve the current window size from the windowMetricsCalculator interface.

    override fun onConfigurationChanged(newConfig: Configuration) {
super.onConfigurationChanged(newConfig)
val windowMetrics = WindowMetricsCalculator.getOrCreate()
    .computeCurrentWindowMetrics(this@MainActivity)
val bounds = windowMetrics.getBounds()
...
}

To learn more about implementing Flex Mode in an existing Android project, see Implement Flex Mode on a Video Player in Code Lab.

Adapt your application to multi-window mode

Multi-Window mode and app continuity are key foldable device features that contribute to a more versatile and user-friendly experience. They enhance multitasking capabilities and overall usability of applications across multiple form factors.

Multi-Window mode enables using two or more applications simultaneously on the same screen. Applications can also be used in pop-up view, as a movable pop-up on top of another open application.

To implement support for multi-window mode and app continuity:

  1. Add the following attributes to the <activity> element in your AndroidManifest.xml file:

    android:configChanges="screenSize|smallestScreenSize|screenLayout"
android:resizeableActivity="true"

    Adding these flags to the configChanges attribute accounts for every relevant device configuration change, creating a more foldable-aware UI.

    Setting resizeableActivity to true allows the activity to be launched in split-screen and pop-up mode.

  2. To remember the application state before configuration changes, you need to use lifecycle-aware components:

    • You can save your previous application state in a bundle inside the onSaveInstanceState() function as key-value pairs. You can then check if a saved application state exists inside the onCreate() function. If the savedInstanceState bundle is null, there is no saved application state. If it is not null, you can retrieve the previous application state and update the UI accordingly. For more information, see Foldable Adaptation Essentials: App Continuity and Multi-Window Handling.

    • Alternatively, you can use ViewModels. A ViewModel allows you to store the application's UI state, and also provides access to its core business logic. To create a ViewModel, create a separate class that extends the ViewModel class and initialize MutableState objects that can store the state. Create an instance of your ViewModel in your activity's onCreate() function and use it to update your UI elements. For more information, see How To Update Your Apps For Foldable Displays.

If you do not want to support multi-window mode in your application, you can simply set resizeableActivity to false in the <activity> element inside the AndroidManifest.xml file.

Conclusion

This article describes some key practices for creating a responsive and adaptable UI for your application, such as enabling cover screen widgets and implementing Flex Mode and multi-window mode. Following these practices ensures a versatile and user-friendly experience on foldable Android devices, enhancing multitasking capabilities and the overall usability of applications across various form factors.

Related content

Recent Posts