Because of the giant number of Android gadgets, supporting a number of display screen sizes and show modes is a vital a part of trendy Android software improvement. A responsive and adaptable UI gives a seamless consumer expertise for individuals utilizing the applying on completely different gadgets, reminiscent of telephones, foldables, and tablets.

This text provides some suggestions and methods for creating adaptable functions that help options particular to foldable and huge display screen gadgets:

One of many greatest strengths of Android gadgets is customization. With Good Lock, customers can customise One UI to cater to their particular person wants, reminiscent of including widgets to the quilt display screen.

In August 2023, Samsung launched the Galaxy Z Flip5, a foldable smartphone with a canopy display screen show. The three.4-inch cowl display screen can be utilized to offer the consumer direct entry to a very powerful info and performance of their functions. It additionally provides new alternatives for personalisation and personalization. The duvet display screen is designed to show customizable widgets, reminiscent of clocks, wallpapers, notification lists, and calendars. For fundamental details about creating Android widgets, see Create a simple widget.

You can even create widgets on your software that may be displayed on the quilt display screen. For instance, if you’re creating a messaging software, you possibly can improve your software by making a widget that shows latest or unread messages on the quilt display screen.

To allow displaying your widget on the Galaxy Z Flip5 cowl display screen (additionally referred to as the Flex Window):

  1. Create a brand new XML useful resource file inside your software’s res/xml folder. Paste the next code to configure your widget’s show for the Flex Window:
    <samsung-appwidget-provider
        show="sub_screen">
    </samsung-appwidget-provider>
    
  2. In your challenge’s manifest file, add the metadata for the XML file you simply created contained in the <receiver> ingredient on your software widget:
    <meta-data
     android:title="com.samsung.android.appwidget.supplier"
     android:useful resource="@xml/samsung_meta_info_sample_widget" />
    
  3. Within the XML file containing the metadata on your software widget, change the attributes of your widget to those advisable values:
    <appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
        android:initialLayout="@structure/test_widget"
        android:minHeight="352dp"
        android:minWidth="339dp"
        android:resizeMode="vertical|horizontal"
        android:widgetCategory="keyguard">
    </appwidget-provider>
    

When the applying is put in, your widget seems on the checklist of Cowl Display Widgets on the system. The consumer can show the widget on the Flex Window by going to Settings > Cowl Display > Widgets and choosing the widget from the checklist.

To be taught extra about widget improvement for the quilt display screen, see the Develop a widget for Flex Window Code Lab.

Though the quilt display screen is primarily meant for widgets, customers can even use the MultiStar software in Good Lock to launch full functions on the quilt display screen. To launch an software on the quilt display screen:

  1. Set up Good Lock from Galaxy Retailer.
  2. Within the Good Lock software, go to Life Up > MultiStar > I ♡ Galaxy Foldable > Launcher Widget.
  3. From the checklist, choose the applying you wish to launch on the quilt display screen and faucet Allow Launcher Widget.

It’s critical that your functions can adapt to small screens as a lot as giant screens. The subsequent two sections briefly summarize the best way to adapt your functions to each Flex Mode and multi-window mode.

Adapt your software to Flex Mode

Constraint Structure is advisable for implementing responsive UI in your functions. Constraint Structure provides you a flat view hierarchy, avoiding troublesome nested views. You’ll be able to assign a relative measurement and distance between viewgroups, so the parts scale primarily based on the system that the applying is working on.

For example you wish to create an software that shows an inventory of images in the midst of the display screen, equally spaced. To do that, you should utilize pointers, that are digital guides that assist you to to align views.

So as to add pointers and adapt your UI to it:

  1. In Android Studio, go to Helpers > Guideline(Horizontal) or Guideline(Vertical) and drag pointers onto your structure.
  2. Change the worth of app:layout_constraintGuide_begin from a static worth to a proportion worth.
  3. Align your views to the brand new pointers by constraining them to the rules.

For extra info on implementing layouts utilizing pointers and an indication, see Design a Single Responsive Layout for Foldable Phones Using Android Guidelines.

You can even use Android’s Jetpack WindowManager library, which helps numerous type components, together with multi-window, to offer help for Flex Mode in your software:

  1. Add the next dependencies to the applying’s construct.gradle file:

    implementation "androidx.window:window:1.0.0"
    implementation "androidx.lifecycle:lifecycle-runtime-ktx:2.6.1"
    
  2. Set a lifecycle-aware process that may get hold of window structure info from the WindowLayoutInfo object. The checkAndUpdateState() perform is used to replace your UI. Go the newLayoutInfo object to this perform and make the suitable modifications.

    lifecycleScope.launch(Dispatchers.Foremost) {
    lifecycle.repeatOnLifecycle(Lifecycle.State.STARTED) {
        WindowInfoTracker.getOrCreate(this @MainActivity)
            .windowLayoutInfo(this @MainActivity)
            .accumulate {
                    newLayoutInfo -> checkAndUpdateState(newLayoutInfo)
            }
        }
    }
    
  3. The WindowLayoutInfo object accommodates a displayFeatures object that accommodates the present state of your software. The displayFeatures object additionally accommodates the FoldingFeature interface, which describes system states and orientations particular to foldable gadgets:

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

    For extra details about adapting your UI for numerous system states and orientations, see Make your app fold aware.

  4. To configure your software for the present window measurement, whether or not it’s portrait, panorama, folded, unfolded, multi-window or another mode, override the onConfigurationChanged() perform and retrieve the present window measurement from the windowMetricsCalculator interface.

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

To be taught extra about implementing Flex Mode in an current Android challenge, see Implement Flex Mode on a Video Player in Code Lab.

Adapt your software to multi-window mode

Multi-Window mode and app continuity are key foldable system options that contribute to a extra versatile and user-friendly expertise. They improve multitasking capabilities and general usability of functions throughout a number of type components.

Multi-Window mode allows utilizing two or extra functions concurrently on the identical display screen. Functions will also be utilized in pop-up view, as a movable pop-up on prime of one other open software.

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

  1. Add the next attributes to the <exercise> ingredient in your AndroidManifest.xml file:

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

    Including these flags to the configChanges attribute accounts for each related system configuration change, making a extra foldable-aware UI.

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

  2. To recollect the applying state earlier than configuration modifications, it’s essential use lifecycle-aware parts:

    • It can save you your earlier software state in a bundle contained in the onSaveInstanceState() perform as key-value pairs. You’ll be able to then test if a saved software state exists contained in the onCreate() perform. If the savedInstanceState bundle is null, there is no such thing as a saved software state. If it isn’t null, you possibly can retrieve the earlier software state and replace the UI accordingly. For extra info, see Foldable Adaptation Essentials: App Continuity and Multi-Window Handling.

    • Alternatively, you should utilize ViewModels. A ViewModel lets you retailer the applying’s UI state, and in addition gives entry to its core enterprise logic. To create a ViewModel, create a separate class that extends the ViewModel class and initialize MutableState objects that may retailer the state. Create an occasion of your ViewModel in your exercise’s onCreate() perform and use it to replace your UI components. For extra info, see How To Update Your Apps For Foldable Displays.

If you don’t want to help multi-window mode in your software, you possibly can merely set resizeableActivity to false within the <exercise> ingredient contained in the AndroidManifest.xml file.

Conclusion

This text describes some key practices for making a responsive and adaptable UI on your software, reminiscent of enabling cowl display screen widgets and implementing Flex Mode and multi-window mode. Following these practices ensures a flexible and user-friendly expertise on foldable Android gadgets, enhancing multitasking capabilities and the general usability of functions throughout numerous type components.