Slide 1
Slide 1 text
1
Miyabi Gouji / Yuri Ogura
Analytics-Backed App Widget Development
- Served with Jetpack Glance
1
Slide 2
Slide 2 text
2
Presenters & Agenda
Slide 3
Slide 3 text
Presenters
Miyabi Gouji Yuri Ogura
● Software engineer at Nikkei Inc.
● Nikkei app / Paper Viewer app development
● App user analysis
● Planning of app development projects
3
Slide 4
Slide 4 text
We are hiring
https://hack.nikkei.com/jobs/android/
4
Slide 5
Slide 5 text
Introduction
Ways to communicate with users outside the app
● Notification
○ Check out our presentation at DroidKaigi 2023
https://2023.droidkaigi.jp/timetable/494363/
● Widget
○ Today’s theme
5
Slide 6
Slide 6 text
Agenda
● Part 1 : Motivation for Developing Widgets
● Part2 : Data Analysis and Strategy
● Part3 : Tips for Implementing Widgets
6
Slide 7
Slide 7 text
7
Motivation for Developing Widgets
Part1
Slide 8
Slide 8 text
8
What’s
widget?
Slide 9
Slide 9 text
What’s widget?
● Can be added to the home screen
● Provides a quick way to access the app’s
content or actions without opening the app itself
● Introduced in 2008
● 84% of Android users said
they use at least 1 widget (Google I/O 2021)
https://www.youtube.com/watch?v=cHv84zXZf6E
9
Slide 10
Slide 10 text
10
Why discuss
Android widget now?
Slide 11
Slide 11 text
Why discuss Android widget now?
Several notable changes in recent years:
● Android 12 (2021)
● Jetpack Glance (2023)
11
Slide 12
Slide 12 text
Recent changes (1) - Android 12
Useful Discoverable Beautiful
● Adding interactivity
● Reconfiguration
● Deferred
configuration
● Improved
widget picker
● Preview layout
● Device Themeing
● Rounded corners
● Flexible Layout
● Smoother transition
12
Slide 13
Slide 13 text
● Jetpack Compose's declarative UI approach
● Internally converted into RemoteViews
● Enables feature-rich widgets with less code compared to RemoteViews*
Recent changes (2) - Jetpack Glance
1.0.0 stable
Sep. 2023
1.1.0 stable
Jun. 2024
13
* In this session, "RemoteViews" refers to widgets implemented without using Glance
Slide 14
Slide 14 text
Version1.1.0 (June 12, 2024)
● Introduce GlanceAppWidgetUnitTest
○ Test the logic without inflating the view
● Handle errors
○ Display error layout
○ Override default error handling code
● Introduce new components
etc…
Recent changes (2) - Jetpack Glance
14
Slide 15
Slide 15 text
15
https://www.ac-illust.com/main/detail.php?id=22846665
Slide 16
Slide 16 text
16
Are there any benefits
to developing widgets?
● For business
● For app functionality
Slide 17
Slide 17 text
Enhance user engagement and retention
● Increase app visibility on the user's device
● Encourage users to revisit the app frequently
● Improve the overall user experience
Benefits (1) - for business
17
Slide 18
Slide 18 text
https://blog.duolingo.com/widget-feature/
Benefits (1) - for business
Case of Duolingo, a language learning app
● Display learners' current streaks
● Alert them when their streaks are at risk
As a result, widget users showed
significantly higher retention rates
Great example of how widgets
enhance user engagement and retention
18
Slide 19
Slide 19 text
Active widgets avoid App Standby Buckets restrictions (Android 9 and above)
● Each app is placed in one of five priority buckets based on user activity
○ Active / Working Set / Frequent / Rare / Restricted (Android 12 and above)
● Apps in lower-priority buckets face restrictions on jobs, alarms, network
and Firebase Cloud Messaging (Android 12 and below)
● Active widgets help keep apps in higher-priority buckets,
avoiding these restrictions
Benefits (2) - for app functionality
19
https://developer.android.com/topic/performance/power/power-details
Slide 20
Slide 20 text
● Android widgets have a long history and are an essential feature for
Android users
● The wave of widget development is here:
○ Numerous changes in Android 12
○ Introduction of Jetpack Glance
● Widgets offer benefits:
○ Enhance user engagement and retention
○ Avoid App Standby Buckets restrictions
Part 1 Summary
20
Slide 21
Slide 21 text
Data Analysis and Strategy
Part2
21
Slide 22
Slide 22 text
22
Existing widgets
📰 Article List Widget
Feature
● List of the top major articles in Nikkei
● Get a list of the latest articles every 30
minutes
● Tap to open article screen
※ Prepared for upcoming improvements
by updating to a Glance-based widget in
advance
Old Article List Widget
Latest Article List Widget
Slide 23
Slide 23 text
23
Specifications and measurements of the article list
widget implemented using Jetpack Glance
Designs
● 2-pane layout as large screen support
● Dynamic color support
Measurement
● Widget size
● Layout
○ 1-pane or 2-pane
● Dark mode usage
Slide 24
Slide 24 text
● Installation rate of about 1/7th compared
to iOS
○ Android widgets have existed since
the early days of app releases. iOS
has been around since 2020
● In iOS, widgets can be automatically
placed through Smart Stacks
● Stock price widget also implemented on
iOS
24
Old article list widget analysis (1)
Percentage of widget installation to active users
※ iOS data includes installation through Smart Stacks
Android iOS
Slide 25
Slide 25 text
25
Old article list widget analysis (2)
● Reverse trend compared to the
installation rate
● Usage rate about 8 times
higher than iOS
○ Only those who really want
to use it are installing it
Widget utilization as a percentage of the number of widgets installed
※ iOS data includes installation through Smart Stacks
Android iOS
Slide 26
Slide 26 text
26
Old article list widget analysis (3)
● Android shows a discrepancy
with overall app trends
○ Widget users are
concentrated on the left side
● In iOS, there is no discrepancy in
attribute trends between widget
users and app users
Trends by User Attributes
Slide 27
Slide 27 text
27
Latest article list widget analysis (1)
● Widget UU decreased
● Number of deletions also increased
● Possibly because the design was
changed significantly and the
minimum vertical size was
increased, the widget was more
likely to be deleted
● The proportion of deletions was
large because there was no
promotion and no increase in new
installations
Number of widget unique users
New installation and deletion rates
old version new version
old version new version
37.1
%
42.4
%
57.6
%
62.9
%
Slide 28
Slide 28 text
28
Latest article list widget analysis (2)
● More than 95% of users with 1
pane
● Most of the users use a height of
106dp or higher. Few users set
the height smaller than the
default value
● Some users use only one pane
with only one article visible
○ Adjust header height lower
based on this analysis
Percentage of widget layout type
Percentage of widget height
New Version Old Version
UU num
>= 106dp
< 106dp
16.2
%
15.7
%
83.8
%
84.3
%
UU num
4.19
%
4.05
%
95.8
%
96%
Slide 29
Slide 29 text
29
Consideration
● Low installation rate compared to iOS
○ Low awareness rate due to lack of promotion
● High usage rate among those who have set it up
○ Highly engaged people are installing it
○ May be able to increase app usage more by encouraging installation
● Higher installation rate among light users compared to core users of the app
○ May be related to awareness. Possibility that many users are unaware of
the existence of widgets
● Improving only the widget will not increase the number of new users who install
the widget
● Widget height could be improved from analysis
Slide 30
Slide 30 text
Widget improvement strategy
30
Slide 31
Slide 31 text
● Target users
○ All users
○ Registered paying members
○ Users with specific attributes
31
Determining KPI
● Target indicators
○ The number of widget installations
○ The number of widget usages
○ The number of articles viewed by widget users
● Expanding awareness is a
priority issue
● Referring to iOS, some
improvement in installation rate
can be expected for Android
● Expanding awareness is a
priority issue
Slide 32
Slide 32 text
Specific plans for the project
1. Promotion
2. New widgets to match the widget's promotion
3. Widget installation screen in the app
What we develop
Slide 33
Slide 33 text
33
Specific plans for the project (1)
1. Promotion
What you need to know
● The existence of widgets within this app
● What can be done with the widget
● How to install widgets
Slide 34
Slide 34 text
34
Specific plans for the project (2)
1. Promotion
How
● Putting in app onboarding
○ We have experienced that putting the app settings in the onboarding
does not give good results
● Post a popup or banner in the leads that all users go through
○ No need to put out a widget to users who don't want it
● Promote to users who use functions similar to those of the widget
○ Avoid over-communication
Slide 35
Slide 35 text
35
Specific plans for the project (3)
2. Develop new widgets to match the widget's promotion
Why
The existing widget functions are used by almost all users of the main
article list at the top of the page, so we felt it would be difficult to extract
and promote to a more specific user base
What
● Stock price information
● Stock price index
● Search( + 4 tab launcher)
● Low cost of development and
maintenance
● Available to all users
Slide 36
Slide 36 text
36
Specific plans for the project (4)
4x2 Search & Menu
4x1 Search Only
4x1 Search only Small
Preview
● The height of the screen
will be smaller when it is
used in landscape mode
● Add the smallest size of
4x1 to prevent layout
collapse
Slide 37
Slide 37 text
37
Specific plans for the project (5)
1. Promotion
Notify users using search of the search
widget's presence
Promotion UI on the search results screen
● Add a banner as an element of the search
results list
● After tapping the banner, users are redirected
to the widget installation screen
Slide 38
Slide 38 text
38
Specific plans for the project (6)
3. Widget installation screen in the app
How to install widgets
● Long press on the application icon
● Long press on the home screen
Many people don't realize it.
Additional installation points in the
application
Slide 39
Slide 39 text
39
Slide 40
Slide 40 text
● Increased number of article list
widgets installed
● More than the number of
search menu additions
40
Analysis of new widgets and promotion (1)
Increase of widget installation
Search Menu Widget
News Headline Widget
Before After
Slide 41
Slide 41 text
● 30% of users who tapped the promotion banner installed one of the
widgets.
● Considering that the set-up rate from the promotion to turn on
notifications was about 5%, this had a very positive impact ※
※ Implemented a measure to display a popup that prompts users to set
up notifications only once when they come to a specific section
https://speakerdeck.com/miyabigouji/pushtong-zhi-xu-nuo-lu-xiang-shan
g-henoapuroti?slide=57
41
Analysis of new widgets and promotion (2)
Slide 42
Slide 42 text
● About half of banner users
installed it from the settings
screen within the app
○ Increased awareness
among people who do not
use search
42
Analysis of new widgets and promotion (3)
Route of flow to widget installation screen
Promotion Banner
Setup screen
Slide 43
Slide 43 text
● Search widget generally
consistent with overall app
trends
● It is thought that the promotion
increased awareness and
matched the trend of all apps
● The trend of the article list
widget got a little closer to the
trend of the application.
43
Analysis of new widgets and promotion (4)
Before
Trends in Widgets and app
Article Widget
Article Widget
Slide 44
Slide 44 text
● Most default type search menu
● Within the menu, the top and Paper
buttons were frequently pressed
44
Analysis of new widgets and promotion (5)
Widget type
Search Menu Search
Search Small
Number of button taps in menus
Search Menu
Search
Search Menu: search and launcher function (4x2)
Search: Only search function (4x1)
Search Small: Minimum size for search only (4x1) ForYou Follow
Scrap
Nikkei
Logo
Paper Search Top
Slide 45
Slide 45 text
● Promotion had a certain level of effectiveness
○ A high percentage of users installed the widget by limiting the target
of appeal
● Placing the widget installation screen in the app increased the number
of installations
○ It is possible that the widget installation screen played a role in
appealing to users
● The default size search menu widget was used the most
○ A certain number of users use only the search widget
45
Consideration
Slide 46
Slide 46 text
● Widget placement effect seen on search screen promotions
○ Add promotion of article list widget
○ In addition, develop a function to select a section when installing
the article list widget
○ Promote to users who use sections other than the top
○ Promote new features to existing widget users
46
Next improvement strategies
Slide 47
Slide 47 text
● Analysis of existing widgets revealed low awareness of Android widgets
○ The same could be read from the deviation from the distribution of the
attributes of the app users
● The installation rate increased from the promotion for awareness
○ The widget installation rate from the promotion banner tap was 30%, a
very high figure
○ Unnecessary promotions were avoided by limiting the target of
promotions
● Many visitors came directly to the widget installation screen added to the app
● Post-measurement analysis led to the next strategy
47
Part2 Summary
Slide 48
Slide 48 text
48
Tips for Implementing Widgets
Part3
Slide 49
Slide 49 text
49
I’m ready to start creating
widgets with Jetpack Glance.
Where should I begin?
Slide 50
Slide 50 text
Getting started with Jetpack Glance widget
Note : As of today (Android Studio Koala
Feature Drop (2024.1.2)),
you cannot create Glance widgets directly
from the “New” option in Android Studio.
This option generates traditional
RemoteViews widgets
👇 Begin with the official documentation and Codelab
● https://developer.android.com/develop/ui/compose/glance
● https://developer.android.com/codelabs/glance
50
Slide 51
Slide 51 text
Differences from Jetpack Compose - import
import androidx.glance.GlanceModifier
import androidx.glance.LocalContext
import androidx.glance.text.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.material3.Text
Uses different composables from Compose
due to the limitations of AppWidgets and RemoteViews
Glance
Compose
51
Slide 52
Slide 52 text
Differences from Jetpack Compose - Glance Modifier
@Composable
fun Sample() {
Column {
Text("💚", Modifier.align(Alignment.End))
Text("😀😀😀😀😀")
}
}
Glance Modifier offers fewer types of modifier functions
Compose
52
align
Slide 53
Slide 53 text
Differences from Jetpack Compose - Glance Modifier
@Composable
fun Sample() {
Column {
Box(
contentAlignment = Alignment.TopEnd,
modifier = GlanceModifier.fillMaxWidth()
) {
Text("💚")
} Text("😀😀😀😀😀")
}
}
Glance Modifier offers fewer types of modifier functions
53
align
Glance
Slide 54
Slide 54 text
Differences from Jetpack Compose - Glance Modifier
Modifier.padding(30.dp).size(150.dp, 100.dp)
Modifier.size(150.dp, 100.dp).padding(30.dp)
The order of modifier functions is not considered in some cases
Compose
54
padding
Slide 55
Slide 55 text
Differences from Jetpack Compose - Glance Modifier
GlanceModifier.padding(30.dp).size(150.dp, 100.dp)
GlanceModifier.size(150.dp, 100.dp).padding(30.dp)
The order of modifier functions is not considered in some cases
55
Glance
padding
Slide 56
Slide 56 text
Differences from Jetpack Compose - Glance Modifier
GlanceModifier.padding(30.dp).size(150.dp, 100.dp)
GlanceModifier.size(210.dp, 160.dp).padding(30.dp)
Implement “Modifier.padding().size()” in Glance
Box(GlanceModifier.padding(30.dp)) {
???(GlanceModifier.size(150.dp, 100.dp))
}
Not intended
✅
Adjust size
or
Wrap in Box
56
padding
The order of modifier functions is not considered in some cases
Slide 57
Slide 57 text
Differences from Jetpack Compose
Other cases where Glance differs from Compose
Since the following features are not available in Glance,
they cannot be implemented exactly like in Compose:
● BoxWithConstraints
● LocalDensity
● AsyncImage (Coil)
etc…
57
Slide 58
Slide 58 text
58
Can we replace a
RemoteViews widget with
a Jetpack Glance widget?
Slide 59
Slide 59 text
RemoteViews widget Updating Jetpack Glance widget
59
Slide 60
Slide 60 text
Replacement of RemoteViews widget with Jetpack Glance
…
class NewsWidgetProvider : GlanceAppWidgetReceiver()
class NewsWidgetProvider : AppWidgetProvider()
AndroidManifest.
xml
Receiver class
Keep the receiver’s `android:name` in the AndroidManifest unchanged
RemoteViews
Glance
Keep
60
Slide 61
Slide 61 text
main/AndroidManifest.xml
NewsWidgetProvider
Replacement of RemoteViews widget with Glance - Nikkei App
main/AndroidManifest.xml
In development Before release
NewsWidgetProvider
debug/AndroidManifest.xml
Glance
NewsWidgetProvider
❌
NewsWidgetProvider
Delete
Move &
Rename
Remote
Views
Glance
61
Slide 62
Slide 62 text
62
Is there anything
we should know about
OS version differences?
Slide 63
Slide 63 text
OS version differences - (1) Widget appearance
Android 12 and above
● Dynamic color
● Rounded corners
Android11 Android12
63
Slide 64
Slide 64 text
https://developer.android.com/design/ui/mobile/guides/widgets/style#dynamic_themes
OS version differences - (1) Widget appearance
Dynamic color（Android 12 and above）
64
Slide 65
Slide 65 text
Widget appearance - Dynamic color
override suspend fun provideGlance(context: Context, id: GlanceId) {
provideContent {
GlanceTheme(
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S)
GlanceTheme.colors
else
MyAppWidgetGlanceColorScheme.colors
) {
MyContent()
}
}
}
OS version differences - (1) Widget appearance
Dynamic color（Android 12 and above）
65
Slide 66
Slide 66 text
Rounded corners（Android 12 and above）
OS version differences - (1) Widget appearance
Auto-apply
66
GlanceModifier.cornerRadius()
Slide 67
Slide 67 text
GlanceModifier.background(ImageProvider(R.drawable.bg_rounded_corners))
W Cannot set the rounded corner of views before Api 31.
OS version differences - (1) Widget appearance
Caution : Specifying GlanceModifier.cornerRadius() on Android11 and below
will output the following log
Rounded corners
(If you want to achieve rounded corners even on Android 11 and below…)
67
Slide 68
Slide 68 text
Android 11
Pixel 4
OS version differences - (2) Widget picker
Android 12
Pixel 4
68
Slide 69
Slide 69 text
Android 11
Pixel 4
OS version differences - (2) Widget picker
Android 12
Pixel 4
Label
✅
✅
✅
69
Slide 70
Slide 70 text
…
OS version differences - (2) Widget picker
Label
AndroidManifest.xml
70
Slide 71
Slide 71 text
OS version differences - (2) Widget picker
Differences：Labels on Android 11 and below have shorter character limits
Label
Android 11/ Pixel 4 Android 12 / Pixel 4
71
Slide 72
Slide 72 text
Android 11
Pixel 4
OS version differences - (2) Widget picker
Android 12
Pixel 4
Description
❌ ✅
72
Slide 73
Slide 73 text
OS version differences - (2) Widget picker
AppWidgetProviderInfo XML - v31
Description Works on Android 12 and above
73
Slide 74
Slide 74 text
Android 11
Pixel 4
Android 12
Pixel 4
✅
✅
OS version differences - (2) Widget picker
Preview
74
Slide 75
Slide 75 text
OS version differences - (2) Widget picker
Three ways to provide
Android 11
and below
Android
12, 13, 14
Android15
a. previewImage ✅ ✅ ✅
b. previewLayout ❌ ✅ ✅
c. 🆕
Generated Previews
❌ ❌ ✅
Preview
75
Slide 76
Slide 76 text
OS version differences - (2) Widget picker
● 😢 Need to prepare a screenshot
● 😢 Does not adjust to changes in display/text, dark mode, or
dynamic color
android:previewImage="@drawable/example_preview"
a. previewImage (Works on any OS version)
Preview
AppWidgetProviderInfo XML
76
Slide 77
Slide 77 text
OS version differences - (2) Widget picker
a. previewImage (Works on any OS version)
Preview
Considerations for Android 11 and below
● Likely to be displayed smaller than
the actual widget size
● Contents of tall or wide images are
particularly difficult to see
77
Slide 78
Slide 78 text
b. previewLayout (Works on Android 12 and above)
OS version differences - (2) Widget picker
Preview
android:previewLayout="@layout/example_widget"
AppWidgetProviderInfo XML - v31
● 😀 No need to prepare a screenshot
● 😀 Adjusts to changes in display/text size, dark mode, and dynamic color
78
Slide 79
Slide 79 text
OS version differences - (2) Widget picker
● 😀 No need to prepare a screenshot
● 😀 No need to prepare an XML layout
● 😀 Adjusts to changes in display/text size, dark mode, and dynamic color
● 😀 Can show real data in widget previews:
○ Personalized information
○ Recent information
c. Generated Previews API (Works on Android 15)
Preview
79
Slide 80
Slide 80 text
OS version differences - (2) Widget picker
AppWidgetManager.getInstance(context).setWidgetPreview(
ComponentName(context, GlanceWidgetReceiver::class.java),
AppWidgetProviderInfo.WIDGET_CATEGORY_HOME_SCREEN,
remoteViews,
)
val remoteViews = MyGlanceAppWidget().compose(context = context)
With a Glance widget, first convert it to RemoteViews
c. Generated Previews API (Works on Android 15)
Preview
At any time (ex. when the app first launches)
80
Slide 81
Slide 81 text
Note: There is a limit on the update frequency with `setWidgetPreview`
● Up to 2 times per hour (Android 15 / Pixel 7)
● Success or failure can be checked by the return value
OS version differences - (2) Widget picker
c. Generated Previews API (Works on Android 15)
Preview
81
Slide 82
Slide 82 text
● Due to the limitations of AppWidgets and RemoteViews, Composable
functions in Jetpack Glance differ from those in Jetpack Compose
● You can update RemoteViews widgets to Glance widgets,
allowing existing users to seamlessly receive the new widget
● Understand the version differences between the widget itself and
the widget picker to implement them correctly
Part 3 Summary
82
Slide 83
Slide 83 text
83
Conclusion and Resources
Slide 84
Slide 84 text
Key takeaways
● Changes in Android12
● Jetpack Glance
● Enhances user
engagement
● Avoids App Standby
Buckets rectrictions
Motivation Strategies Implementation
● Analysis
● Strategy Planning
● Effectiveness
Evaluation
● Differences from
Jetpack Compose
● Replacement
● Widget appearance
● Widget picker
84
We hope this will help your analysis-backed widget development 😉
🫶
Slide 85
Slide 85 text
● https://developer.android.com/develop/ui/views/appwidgets/overview
● https://developer.android.com/design/ui/mobile/guides/widgets
● https://developer.android.com/develop/ui/compose/glance
● https://developer.android.com/about/versions/12/features/widgets
● https://developer.android.com/about/versions/15/features#gen-previews
Resources
85
Slide 86
Slide 86 text
86
Thank you