Take a look at Jetpack Glance, London 10.22

Jetpack Glance is the new shiny library in the Jetpack family for creating widgets. At first glance, it resembles a Jetpack Compose, but in many cases, it is really different. Learn those differences and create beautiful widgets easily.
During this talk, I will describe how the Jetpack Glance works, what are the differences between it and RemoteViews widgets. You will also learn why we still need some XMLs, how to manage the state, and periodic updates.

Transcript

1. Take a look at Jetpack Glance Piotr Prus Android Dev @Tilt GDG 3City Organizer
2. Agenda: • Introduction to widgets • Widget providers • Composing widget UI • State management • Trigger widget update • Change state outside widget class • Initial con fi guration of widget (Con fi guration Activity) • App launch from widget • Why we still need XML • Thoughts and conclusion
3. Introduction to widgets
4. Widgets 84 % API 1 RemoteViews Jetpack Glance
6. androidx.glance:glance-appwidget:1.0.0-alpha05
7. androidx.glance:glance-appwidget:1.0.0-alpha05 alpha01 -> December 15, 2021
8. androidx.glance:glance-appwidget:1.0.0-alpha05 android { buildFeatures { compose = true } composeOptions { kotlinCompilerExtensionVersion = "1.1.0-beta03" } kotlinOptions { jvmTarget = "1.8" } }
9. Widget providers
10. class TestWidgetProvider : AppWidgetProvider() { override fun onReceive(context: Context?, intent: Intent?) { super.onReceive(context, intent) } override fun onUpdate( context: Context?, appWidgetManager: AppWidgetManager?, appWidgetIds: IntArray? ) { super.onUpdate(context, appWidgetManager, appWidgetIds) } }
11. class TestWidgetProvider : AppWidgetProvider() { override fun onReceive(context: Context?, intent: Intent?) { super.onReceive(context, intent) } override fun onUpdate( context: Context?, appWidgetManager: AppWidgetManager?, appWidgetIds: IntArray? ) { super.onUpdate(context, appWidgetManager, appWidgetIds) } }
12. class TestWidgetProvider : AppWidgetProvider() { override fun onReceive(context: Context?, intent: Intent?) { super.onReceive(context, intent) } override fun onUpdate( context: Context?, appWidgetManager: AppWidgetManager?, appWidgetIds: IntArray? ) { super.onUpdate(context, appWidgetManager, appWidgetIds) } }
13. class TestWidgetProvider : AppWidgetProvider() { override fun onReceive(context: Context?, intent: Intent?) { super.onReceive(context, intent) } override fun onUpdate( context: Context?, appWidgetManager: AppWidgetManager?, appWidgetIds: IntArray? ) { super.onUpdate(context, appWidgetManager, appWidgetIds) } }
14. class TestWidgetProvider : AppWidgetProvider() { override fun onReceive(context: Context?, intent: Intent?) { super.onReceive(context, intent) } override fun onUpdate( context: Context?, appWidgetManager: AppWidgetManager?, appWidgetIds: IntArray? ) { super.onUpdate(context, appWidgetManager, appWidgetIds) } } class WeatherWidgetReceiver : GlanceAppWidgetReceiver() { override val glanceAppWidget: GlanceAppWidget get() = WeatherWidget() }
15. Composing widget UI
16. data class WidgetState( val data: WeatherItem, val loading: Boolean, ) data class WeatherItem( val address: String? = null, val latitude: Double, val longitude: Double, val temperature: Int, val windSpeed: Int )
17. class WeatherWidget : GlanceAppWidget() { @Composable override fun Content() {} }
18. class WeatherWidget(private val state: WidgetState) : GlanceAppWidget() { @Composable override fun Content() {} }
19. class WeatherWidget(private val state: WidgetState) : GlanceAppWidget() { @Composable override fun Content() { Box( modifier = GlanceModifier.fillMaxSize() .background(ImageProvider(resId = R.drawable.shape_widget_small)) .appWidgetBackground(), contentAlignment = Alignment.Center ) { WidgetBody(state = state) } } }
20. class WeatherWidget(private val state: WidgetState) : GlanceAppWidget() { @Composable override fun Content() { Box( modifier = GlanceModifier.fillMaxSize() .background(ImageProvider(resId = R.drawable.shape_widget_small)) .appWidgetBackground(), contentAlignment = Alignment.Center ) { WidgetBody(state = state) } } }
21. class WeatherWidget(private val state: WidgetState) : GlanceAppWidget() { @Composable override fun Content() { Box( modifier = GlanceModifier.fillMaxSize() .cornerRadius(8.dp) .appWidgetBackground(), contentAlignment = Alignment.Center ) { WidgetBody(state = state) } } }
22. class WeatherWidget(private val state: WidgetState) : GlanceAppWidget() { @Composable override fun Content() { Box( modifier = GlanceModifier.fillMaxSize() .cornerRadius(8.dp) .appWidgetBackground(), contentAlignment = Alignment.Center ) { WidgetBody(state = state) } } } Min API 31
23. @Composable fun WidgetBody(state: WidgetState) { Column() { Row() { Image() Spacer() Text() Spacer() Image() } Spacer() Row() { Image() Spacer() Text() Spacer() Image() Spacer() Text() } } }
24. @Composable fun WidgetBody(state: WidgetState) { Column() { Row() { Image() Spacer() Text() Spacer() Image() } Spacer() Row() { Image() Spacer() Text() Spacer() Image() Spacer() Text() } } } import androidx.glance.Image import androidx.glance.layout.Column import androidx.glance.layout.Row import androidx.glance.layout.Spacer import androidx.glance.text.Text
25. Glance components: • Column • LazyColumn • Row • Box • Image • CircularProgressIndicator • Text • Button • Spacer Glance modi fi er: • Height • Width • Size • Padding • Background • Corner radius • Visibility • Clickable
26. Image( modifier = GlanceModifier.size(12.dp), provider = ImageProvider(resId = R.drawable.outline_location_on_24), contentDescription = "Location icon" ) Spacer(modifier = GlanceModifier.width(4.dp)) Text( modifier = GlanceModifier.fillMaxWidth().defaultWeight(), text = state.data.address ?: "null", style = TextStyle( fontWeight = FontWeight.Normal, fontSize = 10.sp, textAlign = TextAlign.Start, color = ColorProvider(day = Color.Black, night = Color.White) ), maxLines = 1 )
27. Image( modifier = GlanceModifier.size(12.dp), provider = ImageProvider(resId = R.drawable.outline_location_on_24), contentDescription = "Location icon" ) Spacer(modifier = GlanceModifier.width(4.dp)) Text( modifier = GlanceModifier.fillMaxWidth().defaultWeight(), text = state.data.address ?: "null", style = TextStyle( fontWeight = FontWeight.Normal, fontSize = 10.sp, textAlign = TextAlign.Start, color = ColorProvider(day = Color.Black, night = Color.White) ), maxLines = 1 )
28. Image( modifier = GlanceModifier.size(12.dp), provider = ImageProvider(resId = R.drawable.outline_location_on_24), contentDescription = "Location icon" ) Spacer(modifier = GlanceModifier.width(4.dp)) Text( modifier = GlanceModifier.fillMaxWidth().defaultWeight(), text = state.data.address ?: "null", style = TextStyle( fontWeight = FontWeight.Normal, fontSize = 10.sp, textAlign = TextAlign.Start, color = ColorProvider(day = Color.Black, night = Color.White) ), maxLines = 1 )
29. Image( modifier = GlanceModifier.size(12.dp), provider = ImageProvider(resId = R.drawable.outline_location_on_24), contentDescription = "Location icon" ) Spacer(modifier = GlanceModifier.width(4.dp)) Text( modifier = GlanceModifier.fillMaxWidth().defaultWeight(), text = state.data.address ?: "null", style = TextStyle( fontWeight = FontWeight.Normal, fontSize = 10.sp, textAlign = TextAlign.Start, color = ColorProvider(day = Color.Black, night = Color.White) ), maxLines = 1 )
30. Image( modifier = GlanceModifier.size(12.dp), provider = ImageProvider(resId = R.drawable.outline_location_on_24), contentDescription = "Location icon" ) Spacer(modifier = GlanceModifier.width(4.dp)) Text( modifier = GlanceModifier.fillMaxWidth().defaultWeight(), text = state.data.address ?: "null", style = TextStyle( fontWeight = FontWeight.Normal, fontSize = 10.sp, textAlign = TextAlign.Start, color = ColorProvider(day = Color.Black, night = Color.White) ), maxLines = 1 )
31. Image( modifier = GlanceModifier.size(12.dp), provider = ImageProvider(resId = R.drawable.outline_location_on_24), contentDescription = "Location icon" ) Spacer(modifier = GlanceModifier.width(4.dp)) Text( modifier = GlanceModifier.fillMaxWidth().defaultWeight(), text = state.data.address ?: "null", style = TextStyle( fontWeight = FontWeight.Normal, fontSize = 10.sp, textAlign = TextAlign.Start, color = ColorProvider(day = Color.Black, night = Color.White) ), maxLines = 1 )
32. Image( modifier = GlanceModifier.size(12.dp), provider = ImageProvider(resId = R.drawable.outline_location_on_24), contentDescription = "Location icon" ) Spacer(modifier = GlanceModifier.width(4.dp)) Text( modifier = GlanceModifier.fillMaxWidth().defaultWeight(), text = state.data.address ?: "null", style = TextStyle( fontWeight = FontWeight.Normal, fontSize = 10.sp, textAlign = TextAlign.Start, color = ColorProvider(day = Color.Black, night = Color.White) ), maxLines = 1 )
33. Image( modifier = GlanceModifier.size(12.dp), provider = ImageProvider(resId = R.drawable.outline_location_on_24), contentDescription = "Location icon" ) Spacer(modifier = GlanceModifier.width(4.dp)) Text( modifier = GlanceModifier.fillMaxWidth().defaultWeight(), text = state.data.address ?: "null", style = TextStyle( fontWeight = FontWeight.Normal, fontSize = 10.sp, textAlign = TextAlign.Start, color = ColorProvider(day = Color.Black, night = Color.White) ), maxLines = 1 )
34. Image( modifier = GlanceModifier.size(12.dp), provider = ImageProvider(resId = R.drawable.outline_location_on_24), contentDescription = "Location icon" ) Spacer(modifier = GlanceModifier.width(4.dp)) Text( modifier = GlanceModifier.fillMaxWidth().defaultWeight(), text = state.data.address ?: "null", style = TextStyle( fontWeight = FontWeight.Normal, fontSize = 10.sp, textAlign = TextAlign.Start, color = ColorProvider(day = Color.Black, night = Color.White) ), maxLines = 1 )
35. Image( modifier = GlanceModifier.size(12.dp), provider = ImageProvider(resId = R.drawable.outline_location_on_24), contentDescription = "Location icon" ) Spacer(modifier = GlanceModifier.width(4.dp)) Text( modifier = GlanceModifier.fillMaxWidth().defaultWeight(), text = state.data.address ?: "null", style = TextStyle( fontWeight = FontWeight.Normal, fontSize = 10.sp, textAlign = TextAlign.Start, color = ColorProvider(day = Color.Black, night = Color.White) ), maxLines = 1 )
36. . . . Spacer(modifier = GlanceModifier.width(4.dp)) Text( modifier = GlanceModifier.fillMaxWidth().defaultWeight(), text = state.data.address ?: "null", style = TextStyle( fontWeight = FontWeight.Normal, fontSize = 10.sp, textAlign = TextAlign.Start, color = ColorProvider(day = Color.Black, night = Color.White) ), maxLines = 1 ) Image( modifier = GlanceModifier.size(32.dp).padding(6.dp) .clickable(onClick = TODO()), provider = ImageProvider(resId = R.drawable.ic_refresh), contentDescription = "Refresh icon" )
37. State management
38. DataStore Widget GlanceStateDe fi nition Preferences by default GlanceId internal data class AppWidgetId(val appWidgetId: Int) : GlanceId
39. SAVE Preferences prefs[doublePreferencesKey(widgetLatitudeKey)] = 54.40 prefs[doublePreferencesKey(widgetLongitudeKey)] = 18.3 GET val latitude = prefs[doublePreferencesKey(widgetLatitudeKey)] ?: Double.MIN_VALUE val longitude = prefs[doublePreferencesKey(widgetLongitudeKey)] ?: Double.MIN_VALUE
40. object WidgetStateHelper { fun save(prefs: MutablePreferences, state: WeatherItem) {} fun saveLocation(prefs: MutablePreferences, latitude: Double, longitude: Double) {} fun isStored(prefs: MutablePreferences, latitude: Double, longitude: Double): Boolean = prefs[doublePreferencesKey(WidgetStateHelper.widgetLatitudeKey)] == latitude && prefs[doublePreferencesKey(WidgetStateHelper.widgetLongitudeKey)] == longitude fun setLoading(prefs: MutablePreferences, loading: Boolean) {} }
41. class WeatherWidget(private val state: WidgetState) : GlanceAppWidget() { @Composable override fun Content() {} }
42. class WeatherWidget() : GlanceAppWidget() { @Composable override fun Content() { val state = WidgetStateHelper.getState(currentState()) } }
43. class WeatherWidget() : GlanceAppWidget() { @Composable override fun Content() { val state = WidgetStateHelper.getState(currentState()) } } Retrieves the current customisable store for view speci fi c state data as de fi ned by GlanceStateDe fi nition in the surface implementation.
44. Trigger widget update
45. Update state Trigger composition public suspend fun updateAppWidgetState( context: Context, glanceId: GlanceId, updateState: suspend (MutablePreferences) -> Unit, ) { updateAppWidgetState(context, PreferencesGlanceStateDefinition, glanceId) { it.toMutablePreferences().apply { updateState(this) } } } public suspend fun update(context: Context, glanceId: GlanceId) { require(glanceId is AppWidgetId) { "The glanceId '$glanceId' is not a valid App Widget glance id" } update(context, AppWidgetManager.getInstance(context), glanceId.appWidgetId) }
46. Where should we make computation for the widget ? WorkManager
47. Where should we make computation for the widget ? WorkManager WidgetReceiver
48. Where should we make computation for the widget ? WorkManager WidgetReceiver 🤨
49. Where should we make computation for the widget ? WorkManager WidgetReceiver Service 🤨
50. Where should we make computation for the widget ? WorkManager WidgetReceiver Service 🤨 🤨
51. WorkManager
52. Networking Local database Calculations
53. Widget View Networking Local database Calculations
54. How to trigger the update? Image( modifier = GlanceModifier.size(32.dp).padding(6.dp) .clickable(onClick = actionRunCallback<WidgetRefreshAction>()), provider = ImageProvider(resId = R.drawable.ic_refresh), contentDescription = "Refresh icon" )
55. How to trigger the update? Image( modifier = GlanceModifier.size(32.dp).padding(6.dp) .clickable(onClick = actionRunCallback<WidgetRefreshAction>()), provider = ImageProvider(resId = R.drawable.ic_refresh), contentDescription = "Refresh icon" )
56. How to trigger the update? Image( modifier = GlanceModifier.size(32.dp).padding(6.dp) .clickable(onClick = actionRunCallback<WidgetRefreshAction>()), provider = ImageProvider(resId = R.drawable.ic_refresh), contentDescription = "Refresh icon" ) class WidgetRefreshAction : ActionCallback { override suspend fun onRun(context: Context, glanceId: GlanceId, parameters: ActionParameters) { } }
57. class WidgetRefreshAction : ActionCallback { override suspend fun onRun(context: Context, glanceId: GlanceId, parameters: ActionParameters) { val prefs = WeatherWidget().getAppWidgetState<Preferences>(context, glanceId) val location = WidgetStateHelper.getState(prefs).let { it.data.latitude to it.data.longitude } val oneTimeWorkRequest = OneTimeWorkRequestBuilder<WeatherWidgetWorker>() .setInputData( WeatherWidgetWorker.buildData( latitude = location.first, longitude = location.second ) ) .build() WorkManager.getInstance(context) .enqueue(oneTimeWorkRequest) } }
58. class WidgetRefreshAction : ActionCallback { override suspend fun onRun(context: Context, glanceId: GlanceId, parameters: ActionParameters) { val prefs = WeatherWidget().getAppWidgetState<Preferences>(context, glanceId) val location = WidgetStateHelper.getState(prefs).let { it.data.latitude to it.data.longitude } val oneTimeWorkRequest = OneTimeWorkRequestBuilder<WeatherWidgetWorker>() .setInputData( WeatherWidgetWorker.buildData( latitude = location.first, longitude = location.second ) ) .build() WorkManager.getInstance(context) .enqueue(oneTimeWorkRequest) } }
59. class WidgetRefreshAction : ActionCallback { override suspend fun onRun(context: Context, glanceId: GlanceId, parameters: ActionParameters) { val prefs = WeatherWidget().getAppWidgetState<Preferences>(context, glanceId) val location = WidgetStateHelper.getState(prefs).let { it.data.latitude to it.data.longitude } val oneTimeWorkRequest = OneTimeWorkRequestBuilder<WeatherWidgetWorker>() .setInputData( WeatherWidgetWorker.buildData( latitude = location.first, longitude = location.second ) ) .build() WorkManager.getInstance(context) .enqueue(oneTimeWorkRequest) } }
60. class WidgetRefreshAction : ActionCallback { override suspend fun onRun(context: Context, glanceId: GlanceId, parameters: ActionParameters) { val prefs = WeatherWidget().getAppWidgetState<Preferences>(context, glanceId) val location = WidgetStateHelper.getState(prefs).let { it.data.latitude to it.data.longitude } val oneTimeWorkRequest = OneTimeWorkRequestBuilder<WeatherWidgetWorker>() .setInputData( WeatherWidgetWorker.buildData( latitude = location.first, longitude = location.second ) ) .build() WorkManager.getInstance(context) .enqueue(oneTimeWorkRequest) } }
61. class WidgetRefreshAction : ActionCallback { override suspend fun onRun(context: Context, glanceId: GlanceId, parameters: ActionParameters) { val prefs = WeatherWidget().getAppWidgetState<Preferences>(context, glanceId) val location = WidgetStateHelper.getState(prefs).let { it.data.latitude to it.data.longitude } val oneTimeWorkRequest = OneTimeWorkRequestBuilder<WeatherWidgetWorker>() .setInputData( WeatherWidgetWorker.buildData( latitude = location.first, longitude = location.second ) ) .build() WorkManager.getInstance(context) .enqueue(oneTimeWorkRequest) } }
62. class WidgetRefreshAction : ActionCallback { override suspend fun onRun(context: Context, glanceId: GlanceId, parameters: ActionParameters) { val prefs = WeatherWidget().getAppWidgetState<Preferences>(context, glanceId) val location = WidgetStateHelper.getState(prefs).let { it.data.latitude to it.data.longitude } val oneTimeWorkRequest = OneTimeWorkRequestBuilder<WeatherWidgetWorker>() .setInputData( WeatherWidgetWorker.buildData( latitude = location.first, longitude = location.second ) ) .build() WorkManager.getInstance(context) .enqueue(oneTimeWorkRequest) } }
63. Change state outside widget class
64. WeatherWidget().updateAppWidgetState(appContext, glanceId) { prefs -> // Update state } // Trigger composition of Content() WeatherWidget().update(appContext, glanceId) private suspend fun updateWidgetState( glanceId: GlanceId, update: (MutablePreferences) -> Unit ) { WeatherWidget().apply { updateAppWidgetState(appContext, glanceId) { update(it) } update(appContext, glanceId) } }
65. class WeatherWidgetWorker( private val repository: WeatherRepository, private val appContext: Context, private val workerParameters: WorkerParameters ) : CoroutineWorker(appContext, workerParameters) {
66. class WeatherWidgetWorker( private val repository: WeatherRepository, private val appContext: Context, private val workerParameters: WorkerParameters ) : CoroutineWorker(appContext, workerParameters) { override suspend fun doWork(): Result { return getLocation()?.let { locationPair -> val glanceId = GlanceAppWidgetManager(appContext) .getGlanceIds(WeatherWidget::class.java).firstOrNull { id -> WeatherWidget().getAppWidgetState<Preferences>( appContext, id ).let { prefs -> WidgetStateHelper.isStored( prefs, latitude = locationPair.first, longitude = locationPair.second ) } } ?: return Result.failure() updateWidgetState(glanceId) { WidgetStateHelper.setLoading(it, true) }
67. class WeatherWidgetWorker( private val repository: WeatherRepository, private val appContext: Context, private val workerParameters: WorkerParameters ) : CoroutineWorker(appContext, workerParameters) { override suspend fun doWork(): Result { return getLocation()?.let { locationPair -> val glanceId = GlanceAppWidgetManager(appContext) .getGlanceIds(WeatherWidget::class.java).firstOrNull { id -> WeatherWidget().getAppWidgetState<Preferences>( appContext, id ).let { prefs -> WidgetStateHelper.isStored( prefs, latitude = locationPair.first, longitude = locationPair.second ) } } ?: return Result.failure() updateWidgetState(glanceId) { WidgetStateHelper.setLoading(it, true) }
68. class WeatherWidgetWorker( private val repository: WeatherRepository, private val appContext: Context, private val workerParameters: WorkerParameters ) : CoroutineWorker(appContext, workerParameters) { override suspend fun doWork(): Result { return getLocation()?.let { locationPair -> val glanceId = GlanceAppWidgetManager(appContext) .getGlanceIds(WeatherWidget::class.java).firstOrNull { id -> WeatherWidget().getAppWidgetState<Preferences>( appContext, id ).let { prefs -> WidgetStateHelper.isStored( prefs, latitude = locationPair.first, longitude = locationPair.second ) } } ?: return Result.failure() updateWidgetState(glanceId) { WidgetStateHelper.setLoading(it, true) }
69. class WeatherWidgetWorker( private val repository: WeatherRepository, private val appContext: Context, private val workerParameters: WorkerParameters ) : CoroutineWorker(appContext, workerParameters) { override suspend fun doWork(): Result { return getLocation()?.let { locationPair -> val glanceId = GlanceAppWidgetManager(appContext) .getGlanceIds(WeatherWidget::class.java).firstOrNull { id -> WeatherWidget().getAppWidgetState<Preferences>( appContext, id ).let { prefs -> WidgetStateHelper.isStored( prefs, latitude = locationPair.first, longitude = locationPair.second ) } } ?: return Result.failure() updateWidgetState(glanceId) { WidgetStateHelper.setLoading(it, true) }
70. class WeatherWidgetWorker( private val repository: WeatherRepository, private val appContext: Context, private val workerParameters: WorkerParameters ) : CoroutineWorker(appContext, workerParameters) { override suspend fun doWork(): Result { return getLocation()?.let { locationPair -> val glanceId = GlanceAppWidgetManager(appContext) .getGlanceIds(WeatherWidget::class.java).firstOrNull { id -> WeatherWidget().getAppWidgetState<Preferences>( appContext, id ).let { prefs -> WidgetStateHelper.isStored( prefs, latitude = locationPair.first, longitude = locationPair.second ) } } ?: return Result.failure() updateWidgetState(glanceId) { WidgetStateHelper.setLoading(it, true) }
71. class WeatherWidgetWorker( private val repository: WeatherRepository, private val appContext: Context, private val workerParameters: WorkerParameters ) : CoroutineWorker(appContext, workerParameters) { override suspend fun doWork(): Result { return getLocation()?.let { locationPair -> val glanceId = GlanceAppWidgetManager(appContext) .getGlanceIds(WeatherWidget::class.java).firstOrNull { id -> WeatherWidget().getAppWidgetState<Preferences>( appContext, id ).let { prefs -> WidgetStateHelper.isStored( prefs, latitude = locationPair.first, longitude = locationPair.second ) } } ?: return Result.failure() updateWidgetState(glanceId) { WidgetStateHelper.setLoading(it, true) }
72. class WeatherWidgetWorker( private val repository: WeatherRepository, private val appContext: Context, private val workerParameters: WorkerParameters ) : CoroutineWorker(appContext, workerParameters) { override suspend fun doWork(): Result { return getLocation()?.let { locationPair -> val glanceId = GlanceAppWidgetManager(appContext) .getGlanceIds(WeatherWidget::class.java).firstOrNull { id -> WeatherWidget().getAppWidgetState<Preferences>( appContext, id ).let { prefs -> WidgetStateHelper.isStored( prefs, latitude = locationPair.first, longitude = locationPair.second ) } } ?: return Result.failure() updateWidgetState(glanceId) { WidgetStateHelper.setLoading(it, true) }
73. override suspend fun doWork(): Result { … updateWidgetState(glanceId) { WidgetStateHelper.setLoading(it, true) } repository.getData(latitude = locationPair.first, longitude = locationPair.second) .onSuccess { item -> updateWidgetState(glanceId) { WidgetStateHelper.save(it, item) } return Result.success() } .onFailure { throwable -> updateWidgetState(glanceId) { WidgetStateHelper.setLoading(it, false) } return Result.retry() }
74. override suspend fun doWork(): Result { … updateWidgetState(glanceId) { WidgetStateHelper.setLoading(it, true) } repository.getData(latitude = locationPair.first, longitude = locationPair.second) .onSuccess { item -> updateWidgetState(glanceId) { WidgetStateHelper.save(it, item) } return Result.success() } .onFailure { throwable -> updateWidgetState(glanceId) { WidgetStateHelper.setLoading(it, false) } return Result.retry() }
75. override suspend fun doWork(): Result { … updateWidgetState(glanceId) { WidgetStateHelper.setLoading(it, true) } repository.getData(latitude = locationPair.first, longitude = locationPair.second) .onSuccess { item -> updateWidgetState(glanceId) { WidgetStateHelper.save(it, item) } return Result.success() } .onFailure { throwable -> updateWidgetState(glanceId) { WidgetStateHelper.setLoading(it, false) } return Result.retry() }
76. Initial configuration
77. data class PlaceItem( val name: String, val latitude: Double, val longitude: Double )
78. lifecycleScope.launch { val glanceId = GlanceAppWidgetManager(context).getGlanceIds( WeatherWidget::class.java ).last() WeatherWidget().apply { updateAppWidgetState(context, glanceId) { WidgetStateHelper.saveLocation(it, latitude = item.latitude, longitude = item.longitude) WidgetStateHelper.saveAddress(it, address = item.name) } update(context, glanceId) } startWeatherWorker(latitude = item.latitude, longitude = item.longitude) setResult(RESULT_OK, intent) finish() } On item click
79. lifecycleScope.launch { val glanceId = GlanceAppWidgetManager(context).getGlanceIds( WeatherWidget::class.java ).last() WeatherWidget().apply { updateAppWidgetState(context, glanceId) { WidgetStateHelper.saveLocation(it, latitude = item.latitude, longitude = item.longitude) WidgetStateHelper.saveAddress(it, address = item.name) } update(context, glanceId) } startWeatherWorker(latitude = item.latitude, longitude = item.longitude) setResult(RESULT_OK, intent) finish() } On item click
80. lifecycleScope.launch { val glanceId = GlanceAppWidgetManager(context).getGlanceIds( WeatherWidget::class.java ).last() WeatherWidget().apply { updateAppWidgetState(context, glanceId) { WidgetStateHelper.saveLocation(it, latitude = item.latitude, longitude = item.longitude) WidgetStateHelper.saveAddress(it, address = item.name) } update(context, glanceId) } startWeatherWorker(latitude = item.latitude, longitude = item.longitude) setResult(RESULT_OK, intent) finish() } On item click
81. lifecycleScope.launch { val glanceId = GlanceAppWidgetManager(context).getGlanceIds( WeatherWidget::class.java ).last() WeatherWidget().apply { updateAppWidgetState(context, glanceId) { WidgetStateHelper.saveLocation(it, latitude = item.latitude, longitude = item.longitude) WidgetStateHelper.saveAddress(it, address = item.name) } update(context, glanceId) } startWeatherWorker(latitude = item.latitude, longitude = item.longitude) setResult(RESULT_OK, intent) finish() } On item click
82. lifecycleScope.launch { val glanceId = GlanceAppWidgetManager(context).getGlanceIds( WeatherWidget::class.java ).last() WeatherWidget().apply { updateAppWidgetState(context, glanceId) { WidgetStateHelper.saveLocation(it, latitude = item.latitude, longitude = item.longitude) WidgetStateHelper.saveAddress(it, address = item.name) } update(context, glanceId) } startWeatherWorker(latitude = item.latitude, longitude = item.longitude) setResult(RESULT_OK, intent) finish() } On item click
83. lifecycleScope.launch { val glanceId = GlanceAppWidgetManager(context).getGlanceIds( WeatherWidget::class.java ).last() WeatherWidget().apply { updateAppWidgetState(context, glanceId) { WidgetStateHelper.saveLocation(it, latitude = item.latitude, longitude = item.longitude) WidgetStateHelper.saveAddress(it, address = item.name) } update(context, glanceId) } startWeatherWorker(latitude = item.latitude, longitude = item.longitude) setResult(RESULT_OK, intent) finish() } On item click
84. lifecycleScope.launch { val glanceId = GlanceAppWidgetManager(context).getGlanceIds( WeatherWidget::class.java ).last() WeatherWidget().apply { updateAppWidgetState(context, glanceId) { WidgetStateHelper.saveLocation(it, latitude = item.latitude, longitude = item.longitude) WidgetStateHelper.saveAddress(it, address = item.name) } update(context, glanceId) } startWeatherWorker(latitude = item.latitude, longitude = item.longitude) setResult(RESULT_OK, intent) finish() } On item click
85. lifecycleScope.launch { val glanceId = GlanceAppWidgetManager(context).getGlanceIds( WeatherWidget::class.java ).last() WeatherWidget().apply { updateAppWidgetState(context, glanceId) { WidgetStateHelper.saveLocation(it, latitude = item.latitude, longitude = item.longitude) WidgetStateHelper.saveAddress(it, address = item.name) } update(context, glanceId) } startWeatherWorker(latitude = item.latitude, longitude = item.longitude) setResult(RESULT_OK, intent) finish() } On item click
86. Enqueue widget update work
87. fun Context.startWeatherWorker(latitude: Double, longitude: Double) { val networkConstraint = Constraints.Builder().setRequiredNetworkType(NetworkType.CONNECTED).build() val request = PeriodicWorkRequest .Builder(WeatherWidgetWorker::class.java, 15, TimeUnit.MINUTES) .setBackoffCriteria(BackoffPolicy.EXPONENTIAL, 5000L, TimeUnit.MILLISECONDS) .setInputData( WeatherWidgetWorker.buildData(latitude, longitude) ) .setConstraints(networkConstraint) .build() val uniqueTag = WeatherWidget.UNIQUE_WORK_TAG + "_$latitude" + "_$longitude" WorkManager.getInstance(this) .enqueueUniquePeriodicWork( uniqueTag, ExistingPeriodicWorkPolicy.KEEP, request ) }
88. fun Context.startWeatherWorker(latitude: Double, longitude: Double) { val networkConstraint = Constraints.Builder().setRequiredNetworkType(NetworkType.CONNECTED).build() val request = PeriodicWorkRequest .Builder(WeatherWidgetWorker::class.java, 15, TimeUnit.MINUTES) .setBackoffCriteria(BackoffPolicy.EXPONENTIAL, 5000L, TimeUnit.MILLISECONDS) .setInputData( WeatherWidgetWorker.buildData(latitude, longitude) ) .setConstraints(networkConstraint) .build() val uniqueTag = WeatherWidget.UNIQUE_WORK_TAG + "_$latitude" + "_$longitude" WorkManager.getInstance(this) .enqueueUniquePeriodicWork( uniqueTag, ExistingPeriodicWorkPolicy.KEEP, request ) }
89. fun Context.startWeatherWorker(latitude: Double, longitude: Double) { val networkConstraint = Constraints.Builder().setRequiredNetworkType(NetworkType.CONNECTED).build() val request = PeriodicWorkRequest .Builder(WeatherWidgetWorker::class.java, 15, TimeUnit.MINUTES) .setBackoffCriteria(BackoffPolicy.EXPONENTIAL, 5000L, TimeUnit.MILLISECONDS) .setInputData( WeatherWidgetWorker.buildData(latitude, longitude) ) .setConstraints(networkConstraint) .build() val uniqueTag = WeatherWidget.UNIQUE_WORK_TAG + "_$latitude" + "_$longitude" WorkManager.getInstance(this) .enqueueUniquePeriodicWork( uniqueTag, ExistingPeriodicWorkPolicy.KEEP, request ) }
90. fun Context.startWeatherWorker(latitude: Double, longitude: Double) { val networkConstraint = Constraints.Builder().setRequiredNetworkType(NetworkType.CONNECTED).build() val request = PeriodicWorkRequest .Builder(WeatherWidgetWorker::class.java, 15, TimeUnit.MINUTES) .setBackoffCriteria(BackoffPolicy.EXPONENTIAL, 5000L, TimeUnit.MILLISECONDS) .setInputData( WeatherWidgetWorker.buildData(latitude, longitude) ) .setConstraints(networkConstraint) .build() val uniqueTag = WeatherWidget.UNIQUE_WORK_TAG + "_$latitude" + "_$longitude" WorkManager.getInstance(this) .enqueueUniquePeriodicWork( uniqueTag, ExistingPeriodicWorkPolicy.KEEP, request ) }
91. fun Context.startWeatherWorker(latitude: Double, longitude: Double) { val networkConstraint = Constraints.Builder().setRequiredNetworkType(NetworkType.CONNECTED).build() val request = PeriodicWorkRequest .Builder(WeatherWidgetWorker::class.java, 15, TimeUnit.MINUTES) .setBackoffCriteria(BackoffPolicy.EXPONENTIAL, 5000L, TimeUnit.MILLISECONDS) .setInputData( WeatherWidgetWorker.buildData(latitude, longitude) ) .setConstraints(networkConstraint) .build() val uniqueTag = WeatherWidget.UNIQUE_WORK_TAG + "_$latitude" + "_$longitude" WorkManager.getInstance(this) .enqueueUniquePeriodicWork( uniqueTag, ExistingPeriodicWorkPolicy.KEEP, request ) }
92. fun Context.startWeatherWorker(latitude: Double, longitude: Double) { val networkConstraint = Constraints.Builder().setRequiredNetworkType(NetworkType.CONNECTED).build() val request = PeriodicWorkRequest .Builder(WeatherWidgetWorker::class.java, 15, TimeUnit.MINUTES) .setBackoffCriteria(BackoffPolicy.EXPONENTIAL, 5000L, TimeUnit.MILLISECONDS) .setInputData( WeatherWidgetWorker.buildData(latitude, longitude) ) .setConstraints(networkConstraint) .build() val uniqueTag = WeatherWidget.UNIQUE_WORK_TAG + "_$latitude" + "_$longitude" WorkManager.getInstance(this) .enqueueUniquePeriodicWork( uniqueTag, ExistingPeriodicWorkPolicy.KEEP, request ) }
93. fun Context.startWeatherWorker(latitude: Double, longitude: Double) { val networkConstraint = Constraints.Builder().setRequiredNetworkType(NetworkType.CONNECTED).build() val request = PeriodicWorkRequest .Builder(WeatherWidgetWorker::class.java, 15, TimeUnit.MINUTES) .setBackoffCriteria(BackoffPolicy.EXPONENTIAL, 5000L, TimeUnit.MILLISECONDS) .setInputData( WeatherWidgetWorker.buildData(latitude, longitude) ) .setConstraints(networkConstraint) .build() val uniqueTag = WeatherWidget.UNIQUE_WORK_TAG + "_$latitude" + "_$longitude" WorkManager.getInstance(this) .enqueueUniquePeriodicWork( uniqueTag, ExistingPeriodicWorkPolicy.KEEP, request ) }
94. fun Context.startWeatherWorker(latitude: Double, longitude: Double) { val networkConstraint = Constraints.Builder().setRequiredNetworkType(NetworkType.CONNECTED).build() val request = PeriodicWorkRequest .Builder(WeatherWidgetWorker::class.java, 15, TimeUnit.MINUTES) .setBackoffCriteria(BackoffPolicy.EXPONENTIAL, 5000L, TimeUnit.MILLISECONDS) .setInputData( WeatherWidgetWorker.buildData(latitude, longitude) ) .setConstraints(networkConstraint) .build() val uniqueTag = WeatherWidget.UNIQUE_WORK_TAG + "_$latitude" + "_$longitude" WorkManager.getInstance(this) .enqueueUniquePeriodicWork( uniqueTag, ExistingPeriodicWorkPolicy.KEEP, request ) }
95. Open from widget
96. Clickable actions: • actionStartActivity • actionRunCallback • actionStartService • actionStartBroadcastReceiver
97. Box( modifier = GlanceModifier.fillMaxSize() .background(ImageProvider(resId = R.drawable.shape_widget_small)) .appWidgetBackground() .clickable( onClick = actionStartActivity( activity = MainActivity::class.java, parameters = actionParametersOf( ActionParameters.Key<Double>(WidgetConst.LOCATION_WIDGET_LATITUDE) to state.data.latitude, ActionParameters.Key<Double>(WidgetConst.LOCATION_WIDGET_LONGITUDE) to state.data.longitude, ActionParameters.Key<String>(WidgetConst.WIDGET_NAME_KEY) to (state.data.address ?: "") ) ) ),
98. Box( modifier = GlanceModifier.fillMaxSize() .background(ImageProvider(resId = R.drawable.shape_widget_small)) .appWidgetBackground() .clickable( onClick = actionStartActivity( activity = MainActivity::class.java, parameters = actionParametersOf( ActionParameters.Key<Double>(WidgetConst.LOCATION_WIDGET_LATITUDE) to state.data.latitude, ActionParameters.Key<Double>(WidgetConst.LOCATION_WIDGET_LONGITUDE) to state.data.longitude, ActionParameters.Key<String>(WidgetConst.WIDGET_NAME_KEY) to (state.data.address ?: "") ) ) ),
99. Box( modifier = GlanceModifier.fillMaxSize() .background(ImageProvider(resId = R.drawable.shape_widget_small)) .appWidgetBackground() .clickable( onClick = actionStartActivity( activity = MainActivity::class.java, parameters = actionParametersOf( ActionParameters.Key<Double>(WidgetConst.LOCATION_WIDGET_LATITUDE) to state.data.latitude, ActionParameters.Key<Double>(WidgetConst.LOCATION_WIDGET_LONGITUDE) to state.data.longitude, ActionParameters.Key<String>(WidgetConst.WIDGET_NAME_KEY) to (state.data.address ?: "") ) ) ),
100. Why we still need XML?
101. Manifest.xml <receiver android:name=".widget.WeatherWidgetReceiver" android:exported="false" android:label="Weather widget"> <intent-filter> <action android:name="android.appwidget.action.APPWIDGET_UPDATE" /> </intent-filter> <meta-data android:name="android.appwidget.provider" android:resource="@xml/weather_widget_provider" /> </receiver>
102. Manifest.xml <receiver android:name=".widget.WeatherWidgetReceiver" android:exported="false" android:label="Weather widget"> <intent-filter> <action android:name="android.appwidget.action.APPWIDGET_UPDATE" /> </intent-filter> <meta-data android:name="android.appwidget.provider" android:resource="@xml/weather_widget_provider" /> </receiver>
103. weather_widget_provider.xml <appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android" android:configure="app.piotrprus.weatherglancewidget.widget.ConfigurationActivity" android:initialLayout="@layout/initial_widget_layout" android:minWidth="110dp" android:minHeight="50dp" android:resizeMode="horizontal|vertical" android:updatePeriodMillis="1800000" android:widgetCategory="home_screen"> </appwidget-provider>
104. weather_widget_provider.xml <appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android" android:configure="app.piotrprus.weatherglancewidget.widget.ConfigurationActivity" android:initialLayout="@layout/initial_widget_layout" android:minWidth="110dp" android:minHeight="50dp" android:resizeMode="horizontal|vertical" android:updatePeriodMillis="1800000" android:widgetCategory="home_screen"> </appwidget-provider>
105. initial_widget_layout.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:padding="12dp"> <ProgressBar android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:text="Loading data..." /> </LinearLayout>
106. icon.xml <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="24dp" android:height="24dp" android:viewportWidth="24" android:viewportHeight="24" android:tint="@color/onPrimary"> <path android:fillColor="@android:color/white" android:pathData=“…”/> </vector>
107. Thoughts and conclusion
108. Thoughts and conclusion • We needed this! • It follows composable syntax • Supports android 12 features • It is in alpha5 🙁 • There are some examples and recommendations, 
 
but not a full guidelines yet.
109. Glance widgets on production app
110. Questions? Piotr Prus Android Dev @Tilt GDG 3City Organizer