Take a look at Jetpack Glance

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 Mobile Tech Lead @Airly 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 • Open 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-alpha03
7. androidx.glance:glance-appwidget:1.0.0-alpha03
8. androidx.glance:glance-appwidget:1.0.0-alpha03 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, val humidity: Int, val pressure: 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() } } } import androidx.glance.Image import androidx.glance.layout.Column import androidx.glance.layout.Row import androidx.glance.layout.Spacer import androidx.glance.text.Text
24. Glance components: • Column • LazyColumn • Row • Box • Image • CircularProgressIndicator • Text • Button • Spacer Glance modi fi er: • Height • Width • Size • Padding • Background • Corner radius • Visibility • Clickable
25. 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 )
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. State management
36. Widget GlanceStateDe fi nition Preferences by default GlanceId internal data class AppWidgetId(val appWidgetId: Int) : GlanceId
37. 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
38. 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) {} }
39. object WidgetStateHelper { fun getState(prefs: Preferences): WidgetState { val address = prefs[stringPreferencesKey(WidgetStateHelper.widgetAddressKey)] ?: "" val latitude = prefs[doublePreferencesKey(WidgetStateHelper.widgetLatitudeKey)] ?: Double.MIN_VALUE val longitude = prefs[doublePreferencesKey(WidgetStateHelper.widgetLongitudeKey)] ?: Double.MIN_VALUE val temperature = prefs[intPreferencesKey(WidgetStateHelper.widgetTemperatureKey)] ?: Int.MIN_VALUE val humidity = prefs[intPreferencesKey(WidgetStateHelper.widgetHumidityKey)] ?: Int.MIN_VALUE val wind = prefs[intPreferencesKey(WidgetStateHelper.widgetWindKey)] ?: Int.MIN_VALUE val loading = prefs[booleanPreferencesKey(WidgetStateHelper.widgetLoadingKey)] ?: false return WidgetState( data = WeatherItem( address = address, latitude = latitude, longitude = longitude, temperature = temperature, windSpeed = wind, humidity = humidity, pressure = 0 ), loading = loading ) }
40. object WidgetStateHelper { fun getState(prefs: Preferences): WidgetState { val address = prefs[stringPreferencesKey(WidgetStateHelper.widgetAddressKey)] ?: "" val latitude = prefs[doublePreferencesKey(WidgetStateHelper.widgetLatitudeKey)] ?: Double.MIN_VALUE val longitude = prefs[doublePreferencesKey(WidgetStateHelper.widgetLongitudeKey)] ?: Double.MIN_VALUE val temperature = prefs[intPreferencesKey(WidgetStateHelper.widgetTemperatureKey)] ?: Int.MIN_VALUE val humidity = prefs[intPreferencesKey(WidgetStateHelper.widgetHumidityKey)] ?: Int.MIN_VALUE val wind = prefs[intPreferencesKey(WidgetStateHelper.widgetWindKey)] ?: Int.MIN_VALUE val loading = prefs[booleanPreferencesKey(WidgetStateHelper.widgetLoadingKey)] ?: false return WidgetState( data = WeatherItem( address = address, latitude = latitude, longitude = longitude, temperature = temperature, windSpeed = wind, humidity = humidity, pressure = 0 ), loading = loading ) }
41. object WidgetStateHelper { fun getState(prefs: Preferences): WidgetState { val address = prefs[stringPreferencesKey(WidgetStateHelper.widgetAddressKey)] ?: "" val latitude = prefs[doublePreferencesKey(WidgetStateHelper.widgetLatitudeKey)] ?: Double.MIN_VALUE val longitude = prefs[doublePreferencesKey(WidgetStateHelper.widgetLongitudeKey)] ?: Double.MIN_VALUE val temperature = prefs[intPreferencesKey(WidgetStateHelper.widgetTemperatureKey)] ?: Int.MIN_VALUE val humidity = prefs[intPreferencesKey(WidgetStateHelper.widgetHumidityKey)] ?: Int.MIN_VALUE val wind = prefs[intPreferencesKey(WidgetStateHelper.widgetWindKey)] ?: Int.MIN_VALUE val loading = prefs[booleanPreferencesKey(WidgetStateHelper.widgetLoadingKey)] ?: false return WidgetState( data = WeatherItem( address = address, latitude = latitude, longitude = longitude, temperature = temperature, windSpeed = wind, humidity = humidity, pressure = 0 ), loading = loading ) }
42. object WidgetStateHelper { fun getState(prefs: Preferences): WidgetState { val address = prefs[stringPreferencesKey(WidgetStateHelper.widgetAddressKey)] ?: "" val latitude = prefs[doublePreferencesKey(WidgetStateHelper.widgetLatitudeKey)] ?: Double.MIN_VALUE val longitude = prefs[doublePreferencesKey(WidgetStateHelper.widgetLongitudeKey)] ?: Double.MIN_VALUE val temperature = prefs[intPreferencesKey(WidgetStateHelper.widgetTemperatureKey)] ?: Int.MIN_VALUE val humidity = prefs[intPreferencesKey(WidgetStateHelper.widgetHumidityKey)] ?: Int.MIN_VALUE val wind = prefs[intPreferencesKey(WidgetStateHelper.widgetWindKey)] ?: Int.MIN_VALUE val loading = prefs[booleanPreferencesKey(WidgetStateHelper.widgetLoadingKey)] ?: false return WidgetState( data = WeatherItem( address = address, latitude = latitude, longitude = longitude, temperature = temperature, windSpeed = wind, humidity = humidity, pressure = 0 ), loading = loading ) }
43. object WidgetStateHelper { fun getState(prefs: Preferences): WidgetState { val address = prefs[stringPreferencesKey(WidgetStateHelper.widgetAddressKey)] ?: "" val latitude = prefs[doublePreferencesKey(WidgetStateHelper.widgetLatitudeKey)] ?: Double.MIN_VALUE val longitude = prefs[doublePreferencesKey(WidgetStateHelper.widgetLongitudeKey)] ?: Double.MIN_VALUE val temperature = prefs[intPreferencesKey(WidgetStateHelper.widgetTemperatureKey)] ?: Int.MIN_VALUE val humidity = prefs[intPreferencesKey(WidgetStateHelper.widgetHumidityKey)] ?: Int.MIN_VALUE val wind = prefs[intPreferencesKey(WidgetStateHelper.widgetWindKey)] ?: Int.MIN_VALUE val loading = prefs[booleanPreferencesKey(WidgetStateHelper.widgetLoadingKey)] ?: false return WidgetState( data = WeatherItem( address = address, latitude = latitude, longitude = longitude, temperature = temperature, windSpeed = wind, humidity = humidity, pressure = 0 ), loading = loading ) }
44. class WeatherWidget(private val state: WidgetState) : GlanceAppWidget() { @Composable override fun Content() {} }
45. class WeatherWidget() : GlanceAppWidget() { @Composable override fun Content() { val state = WidgetStateHelper.getState(currentState()) } }
46. 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.
47. Trigger widget update
48. 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) }
49. Where should we make computation for the widget ? Widget Service ViewModel BroadcastReceiver WorkManager
50. Where should we make computation for the widget ? Widget Service ViewModel BroadcastReceiver WorkManager
51. Where should we make computation for the widget ? Widget Service ViewModel BroadcastReceiver WorkManager
52. Widget View Networking Local database Calculations
53. 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" )
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" ) class WidgetRefreshAction : ActionCallback { override suspend fun onRun(context: Context, glanceId: GlanceId, parameters: ActionParameters) { } }
56. 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) } }
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. Change state outside widget class
63. 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) } }
64. class WeatherWidgetWorker( private val repository: WeatherRepository, private val appContext: Context, private val workerParameters: WorkerParameters ) : CoroutineWorker(appContext, workerParameters) {
65. 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) }
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. 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() }
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. Initial configuration
76. data class PlaceItem( val name: String, val latitude: Double, val longitude: Double )
77. 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
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. 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.REPLACE, request ) }
86. 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.REPLACE, request ) }
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.REPLACE, 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.REPLACE, 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.REPLACE, 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.REPLACE, 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.REPLACE, 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.REPLACE, request ) }
93. Open from widget
94. Clickable actions: • actionStartActivity • actionRunCallback • actionStartService • actionStartBroadcastReceiver
95. 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 ?: "") ) ) ),
96. 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 ?: "") ) ) ),
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. Why we still need XML?
99. 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>
100. 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>
101. 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>
102. 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>
103. Thoughts and conclusion
104. Thoughts and conclusion • We needed this! • It works on composable runtime • Supports android 12 features • It is in alpha3 • Updates are slow • No o ffi cial guidelines regarding state update, etc
105. Glance widgets on production app
106. Take a look at Jetpack Glance Piotr Prus Mobile Tech Lead @Airly GDG 3City Organizer
107. Questions? Piotr Prus Mobile Tech Lead @Airly GDG 3City Organizer https://github.com/PiotrPrus/WeatherGlanceWidget