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.
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"
-
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