Analytics-Backed App Widget Development - Served with Jetpack Glance

①ウィジェットを開発する動機
- ウィジェットの歴史と変遷
- ウィジェットをおくことによるメリット
- 事業への貢献
- アプリ機能への貢献
②データに基づく開発施策と効果検証
- 開発施策
- 現状のウィジェット分析
- 新ウィジェットの開発
- ユーザーへのウィジェット訴求
- 効果検証と意思決定
③実装（Jetpack Glance）におけるヒントと留意点
- 慣れ親しんだJetpack Composeとの違い
- 従来のウィジェットからJetpack Glanceへの置き換え
- Android12以上/Android11以下での差分
- ウィジェット設置プレビューのポイント

Transcript

1. 1 Miyabi Gouji / Yuri Ogura Analytics-Backed App Widget Development - Served with Jetpack Glance 1
2. 2 Presenters & Agenda
3. 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
4. We are hiring https://hack.nikkei.com/jobs/android/ 4
5. 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
6. Agenda • Part 1 : Motivation for Developing Widgets • Part2 : Data Analysis and Strategy • Part3 : Tips for Implementing Widgets 6
7. 7 Motivation for Developing Widgets Part1
8. 8 What’s widget?
9. 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
10. 10 Why discuss Android widget now?
11. Why discuss Android widget now? Several notable changes in recent years: • Android 12 (2021) • Jetpack Glance (2023) 11
12. 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
13. • 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
14. 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
15. 15 https://www.ac-illust.com/main/detail.php?id=22846665
16. 16 Are there any benefits to developing widgets? • For business • For app functionality
17. 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
18. 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
19. 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
20. • 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
21. Data Analysis and Strategy Part2 21
22. 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
23. 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
24. • 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
25. 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
26. 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
27. 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 %
28. 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%
29. 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
30. Widget improvement strategy 30
31. • 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
32. 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
33. 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
34. 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
35. 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
36. 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
37. 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
38. 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
40. • 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
41. • 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)
42. • 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
43. • 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
44. • 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
45. • 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
46. • 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
47. • 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
48. 48 Tips for Implementing Widgets Part3
49. 49 I’m ready to start creating widgets with Jetpack Glance. Where should I begin?
50. 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
51. 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
52. 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
53. 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
54. 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
55. 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
56. 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
57. 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
58. 58 Can we replace a RemoteViews widget with a Jetpack Glance widget?
59. RemoteViews widget Updating Jetpack Glance widget 59
60. Replacement of RemoteViews widget with Jetpack Glance <receiver android:name=".widget.NewsWidgetProvider" …> … </receiver> class NewsWidgetProvider : GlanceAppWidgetReceiver() class NewsWidgetProvider : AppWidgetProvider() AndroidManifest. xml Receiver class Keep the receiver’s `android:name` in the AndroidManifest unchanged RemoteViews Glance Keep 60
61. 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
62. 62 Is there anything we should know about OS version differences?
63. OS version differences - (1) Widget appearance Android 12 and above • Dynamic color • Rounded corners Android11 Android12 63
64. 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
65. 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
66. Rounded corners（Android 12 and above） OS version differences - (1) Widget appearance Auto-apply 66 GlanceModifier.cornerRadius()
67. 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
68. Android 11 Pixel 4 OS version differences - (2) Widget picker Android 12 Pixel 4 68
69. Android 11 Pixel 4 OS version differences - (2) Widget picker Android 12 Pixel 4 Label ✅ ✅ ✅ 69
70. <receiver android:name=".widget.NewsWidgetProvider" android:exported="true" android:label="@string/news_widget_label" > … </receiver> OS version differences - (2) Widget picker Label AndroidManifest.xml 70
71. 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
72. Android 11 Pixel 4 OS version differences - (2) Widget picker Android 12 Pixel 4 Description ❌ ✅ 72
73. <appwidget-provider xmlns:android="http://schemas.android.com/…" android:description="@string/news_widget_description" android:initialLayout="@layout/glance_default_loading_layout" … /> OS version differences - (2) Widget picker AppWidgetProviderInfo XML - v31 Description Works on Android 12 and above 73
74. Android 11 Pixel 4 Android 12 Pixel 4 ✅ ✅ OS version differences - (2) Widget picker Preview 74
75. 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
76. 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
77. 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
78. 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
79. 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
80. 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
81. 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
82. • 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
83. 83 Conclusion and Resources
84. 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 😉 🫶
85. • 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
86. 86 Thank you