Widget Fever Workshop

A Hands-On Workshop with Jetpack Compose Glance & Gemini -

Activity Instructions & Code Snippets

Slides

Widgets Are So Hot Right Now! - Google Slides

Widget Fever Workshop - Google Slides

Preparation work

1. Create your Developer Profile
2. Download Android Studio
   • Any recent version is fine - stable one is Otter

Activity 1 - Set up

1. Clone the sample project MotivateMe using git and checkout the main branch
2. Open it in Android Studio
3. Sync MotivateMe and run it on an emulator (any emulator is fine)
4. Feel free to update the sample data!

Activity 2 - Hello Widget!

1. Add the glance dependencies to the app module build.gradle file (you can uncomment what has been provided)
   Click to see example code

2. Sync the project
3. Create a simple GlanceAppWidget that displays some text. You can do this in QuoteWidget.kt.

Tip: Also update MainActivity to update QuoteWidget on every launch using QuoteWidget().updateAll(this@MainActivity)

4. Create a simple GlanceAppWidgetReceiver that just has an override for glanceAppWidget, set it to your QuoteWidget. You can do this in QuoteWidgetReceiver.kt

   Click to see example code

   Click to see example code - imports

5. Update the AndroidManifest.xml to include a receiver that:

   • Sets android:name to your .widget.QuoteWidgetReceiver
   • Has android:exported="true"
   • Has an intent filter of android:name="android.appwidget.action.APPWIDGET_UPDATE"
   • Has a meta-data object for android.appwidget.provider with the resource of @xml/quote_widget_info (a basic quote_widget_info.xml has been provided)
     Click to see example code

6. Run your app on your emulator

7. Long press on your home screen to add your new widget!

Activity 3 - Basic configuration

1. Modify QuoteWidget to change the text or text colour, run your app again to see the change on the widget. See while the app is deploying that the app icon is displayed on the widget.
2. Modify QuoteWidget to add a clickable modifier with actionStartActivity(intent) to open the MainActivity on click of the widget. Run the app and try it out.

• Useful reference - User Interaction - Launch an activity

3. Modify the quote_widget_info.xml to add an initialLayout with the default loading layout @layout/glance_default_loading_layout. Run the app and see the loading layout is now a spinner.
   Click to see example code

4. Modify the quote_widget_info.xml to add an android:targetCellWidth="4" and android:targetCellHeight="1". Also add android:resizeMode="horizontal|vertical" to allow your widget to resize. Run the app and see the default size is now a horizontal rectangle. Try resizing it.
   Click to see example code

Activity 4 - Set theme & update UI

1. Update QuoteWidget to include a background modifier to the Box in QuoteWidgetContent so it is easier to see the against the wallpaper
   Click to see example code

   Run the app and see the colour change

Note: you may need to remove and re-add the widget.

2. Uncomment the code provided in MotivateMeGlanceColorScheme.kt
   Click to see example code

   Click to see example code - imports

3. Add a GlanceTheme implementation in MotivateMeGlanceTheme.kt that uses the colours from MotivateMeGlanceColorScheme
   • Useful reference - Implement a Glance theme

Don’t forget the preview!

4. Replace GlanceTheme with MotivateMeGlanceTheme in QuoteWidget. Update the background and the text to use the themed colours: Background = GlanceTheme.colors.widgetBackground Text = GlanceTheme.colors.primary
   Click to see example code

   Click to see example code - imports

   Run the app and see the colour change

Note: you may need to remove and re-add the widget

5. Change the emulator settings from dark to light theme and see the widget colours respond

Activity 5 - Set sample data

1. Modify QuoteWidget to set the displayText variable from the static sampleData as:

val displayText = sampleData.first().quotes.first().text

2. Run the app, see how the text reflows as the widget changes size & shape.
3. What happens when the text is too long for the space?

Activity 6 - Add widget configuration & data state

1. Update QuoteWidget to add the stringPreferencesKey values for the topic and quote states
   Click to see example code

   Click to see example code - imports

2. Update QuoteWidgetConfigurationActivity to set the widget topic & quote as text state values
   Click to see example code

   Click to see example code - imports

3. Modify quote_widget_info.xml to add android:widgetFeatures="reconfigurable" and android:configure="dev.motivateme.widget.QuoteWidgetConfigurationActivity" to allow the widget to be configured
   Click to see example code

4. Update QuoteWidget to read the state and use that value in the widget
   Click to see example code

   Click to see example code - imports

5. Modify QuoteWidget to add a button to the widget UI that will randomly select a quote to show.
   • Useful reference - User Interaction - Run ActionCallback
     Click to see example code

     Click to see example code - imports

Activity 7 - Add Firebase AI Logic SDK (Gemini)

Firebase AI Logic SDK Documentation

0. Open Firebase Console and create a Firebase project & download a google-services.json file. Add the google-services.json file to your project directory.
1. Add Google Services Plugin in libs.versions.toml
2. Add Firebase AI Logic SDK in libs.versions.toml
3. Add Google Services Plugin in project level build.gradle.kts
4. Add Google Services Plugin in app level build.gradle.kts
5. Add Firebase AI Logic SDK in build.gradle.kts
   Click to see example code

6. Create GeminiInterface to initialise the generative model
   Click to see example code

   Click to see example code - imports

7. Create a method to call a prompt and generate some motivational quotes
   Click to see example code

   Click to see example code - imports

8. Have a go changing the prompts, can you make the motivational quotes more punny?

Activity 8 - Add on demand data refresh using CoroutineWorker

1. Create QuoteWidgetWorker
   Click to see example code

2. Modify QuoteWidgetWorker to fetch new values from the Gemini SDK
   Click to see example code

   Click to see example code - imports

3. Modify QuoteWidget refresh button to enqueue the worker
   Click to see example code

   Click to see example code - imports

Extensions

Activity 9 (Extension) - Add periodic data refresh using CoroutineWorker

1. Modify QuoteWidgetWorker to add a method to enqueue periodic work
2. Modify QuoteWidgetWorker to add a method to cancel periodic work
3. Modify QuoteWidgetReceiver to enqueue work in onUpdate and cancel in onDeleted
   Click to see example code

   Click to see example code - imports

• Useful reference - Schedule Periodic Work

Activity 10 (Extension) - Polishing the final result

1. Modify the quote_widget_info.xml to add an android:description="@string/widget_description"
   Click to see example code

2. Take a screenshot of your widget, trim the size & remove background using any image editor and import it into the app as a drawable with the name quote_widget_preview.png

Tip: I set a white background on my emulator, then take a screenshot and use photopea.com to crop the image and remove the background

3. Modify the quote_widget_info.xml to add an android:previewImage="@drawable/quote_widget_preview".
   Click to see example code

4. Modify QuoteWidget to add an error layout if the composition fails
   Click to see example code

5. Run the app and see the widget selection looks much more inviting

Activity 11 (Extension) - Update the GlanceTheme to use the device theme

1. Update the MotivateMeGlanceTheme to use the device theme
   • Useful reference - Implement a Glance theme
     Click to see example code

Activity 12 (Extension) - Respond to the wallpaper

1. Update MotivateMeGlanceTheme to monitor the wallpaper using WallpaperManager.OnColorsChangedListener & pass a Boolean to the content composable if it should use dark text
2. Update QuoteWidget to enable a transparent background & respond to the wallpaper
   • Useful reference - WallpaperManager
     Click to see example code

Tip: To monitor the wallpaper colours, you will need to increase the minimum sdk to 27

Activity 13 (Extension) - Fine tune Gemini

1. Update the Gemini SDK prompt to get it to remove any quote characters from the output
2. Can you get a better motivational quote? What other things would you like to display on your home screen?