Develop a widget for Flex Window

Objective

Learn how to create a calendar widget on the Flex Window of Galaxy Z Flip5.

Overview

The Flex Window of Galaxy Z Flip5 provides a wider screen than the previous model, Galaxy Z Flip4. It provides more functionalities, such as having customizable clocks, rich wallpapers, and informative notification list.

The widget that you are going to develop for this Code Lab can provide a simple interface by executing simple tasks directly visible on the Flex Window. It can guide users to open their Z Flip5 to perform complex actions on the main screen.

Set up your environment

You will need the following:

Samsung Galaxy Z Flip5
Android Studio (latest version recommended)
Java SE Development Kit (JDK) 11 or later
Remote Test Lab (if physical device is not available)

Sample Code

Here is a sample code for you to start coding in this Code Lab. Download it and start your learning experience!

Flex Window Widget Sample Code

(404.29 KB)

Start your project

After downloading the sample code containing the project files, open your Android Studio and click Open to open an existing project.

Locate the downloaded Android project (Capsule_SampleWidget) from the directory and click OK.

Make the AppWidgetProvider

NoteTo know the basics about creating a widget in Android, you may refer to this Android developer guide.

The android.appwidget.provider defines the properties of the widget while com.samsung.android.appwidget.provider implements the methods of the AppWidgetProvider class.

To make the AppWidgetProvider, you need to declare the location of the XML file in AndroidManifest.xml. To do this:

Go to app > manifests and open AndroidManifest.xml. Look for the <receiver> tag with the SimpleCalendarWidgetProvider identifier.

Add the following meta-data just above the </receiver> tag:

    <meta-data
	android:name="android.appwidget.provider"
	android:resource="@xml/meta_info_calendar_widget" />
    <meta-data
	android:name="com.samsung.android.appwidget.provider"
	android:resource="@xml/samsung_meta_info_sample_widget" />

Go to app > res > xml and open meta_info_calendar_widget.xml.

Add the following attributes to set the size of the Flex Window and set it as a lock screen:

android:minWidth="352dp"
android:minHeight="339dp"
android:resizeMode="horizontal|vertical"
android:widgetCategory="keyguard"

Add the Samsung AppWidgetProviderInfo meta-data

Go to app > res > xml and open samsung_meta_info_calendar_widget.xml.

Add the following attribute to configure the display of the Flex Window:

<samsung-appwidget-provider
    display="sub_screen">
</samsung-appwidget-provider>

The launchDisplayId indicates whether the widget is on the cover screen or on the main screen. If you want to launch an activity from the widget, simply follow these steps to specify the screen display ID:

Go to app > java > com.samsung.android.samplewidget > provider.
Open SimpleCalendarWidgetProvider.kt and assign 0 to the launchDisplayId if you want to display the widget on the main screen, and assign 1 if you want it to run on the Flex Window. Here, let's start a calendar activity on the main screen:

launchDisplayId = MAIN_SCREEN_ID

Create a widget configuration activity to allow modification of the widget settings.
The AppWidgetProviderInfo object describes the meta-data for the widget, such as its layout and update frequency:

Go to app > res > xml and open meta_info_calendar_widget.xml.
Declare the configuration activity in the <appwidget-provider> tag by placing the android:configure attribute:

android:configure="com.samsung.android.samplewidget.activity.EditSettingActivity"

Create ongoing notifications

First, enable the code to send notification in SimpleCalendarWidgetProvider.kt.
In SimpleCalendarWidgetProvider.kt, call the makeNotification() function from the NotificationUtil class to provide a notification for the sample widget.

val notificationUtil = NotificationUtil(context)
val notification = notificationUtil.makeNotification(PendingIntent.getActivity(
    context,
    0,
    Intent(context, EditSettingActivity::class.java),
    PendingIntent.FLAG_CANCEL_CURRENT or PendingIntent.FLAG_IMMUTABLE
), it.size)
notificationUtil.sendNotification(NotificationUtil.NOTIFICATION_ID, notification)

Set the notification's properties in the same function in NotificationUtil.kt.

.setSmallIcon(R.drawable.ic_cover_screen)
.setColor(Color.parseColor("#338577"))
.setContentTitle(“Sample widget”)
.setOngoing(true)

After creating the notification, it should go to the main window of the Flex Window. You can now check and see that there's an ongoing notification.

NoteThis feature only works with One UI 6.0.

Now, you can build the project in Android Studio and test it on your device. To enable the widget in your Galaxy Z Flip5, you have to:

Go to Settings > Cover screen and tap Widgets.
Enable the widget that you've created in this Code Lab.

You can now see the widget on the Flex Window of your Galaxy Z Flip5.

You can also test other features of the widget included in the sample project.

Background of the widget

In this Code Lab, you can check the sample project on how to change the background of the widget to be opaque or transparent.

Vertical scrolling

Also, vertical scrolling is already implemented in the sample project. You can check its implementation in the code. This allows you to preview more notifications as possible in the Flex Window.

You're done!

Congratulations! You have successfully achieved the goal of this Code Lab. Now, you can develop a widget for the Flex Window by yourself! If you face any trouble, you may download this file:

Flex Window Widget Complete Project

(404.27 KB)

To learn more about developing apps for Galaxy Foldable devices, visit:
www.developer.samsung.com/galaxy-z