Pimp My Widget! - Droidcon Italy 2021

Android 12 is here, it's time to renew our widgets!

Android widget SDK is 12 years old, since it was first released with Android 1.5 back in 2009.

In the latest Android release we got a revamp in widgets capabilities, look-and-feel and integration with Android newest features. Widgets configuration was made easier, their layout is now responsive to the space on the screen and widget colors can be automatically tweaked using the Material You theming engine. It seems like it's the right time to dust off our old widgets and possibly make new ones!

In this talk we will dive into a simple widget creation and configuration and explore most of the new capabilities added for Android 12, keeping an eye on the backwards compatibility in order to make our widgets look cool on any device.

This talk was presented to Droidcon Italy in 2021

Transcript

1. Pimp my widget! Photo: Guillame Mailheiro
2. Hello! whoami? ✓ Marco Zanetti ✓ Android Developer in Synesthesia ✓ Currently using 12 widgets, proudly
3. What are we talking about? First: Basics 1. What is a widget? 2. Do people really use them? 3. How to build one? Then: Power up! 1. What’s new in Android 12? 2. Backwards compatibility 3. Question time
4. Basics
5. What’s a Widget?!? If you ask a poet: “A widget is a snack while your app is the meal” ...and it’s actually from the official Android docs If you ask Lars Vogel: “Home screen widgets are broadcast receivers which provide interactive components”
6. What’s a Widget?!? If you ask me: “A widget is a small portion of your app running into the launcher’s process and orchestrated by a Broadcast Receiver with superpowers”
7. Does anybody really use them? Source: Androidpolice (not a truly representative dataset, I know)
8. How do they work: The toolkit 1. AppWidgetProviderInfo → XML file providing widget basic information 2. AppWidgetProvider → A BroadcastReceiver with some convenience methods for widgets 3. A xml layout for the widget 4. RemoteViews
9. How do they work: RemoteViews • Allow a process to describe a View hierarchy to another process • Used for Push notifications and Widgets • Can include: LinearLayout, GridView, RelativeLayout, Button, ImageView, TextView... no ConstraintLayout, EditText etc. • API 31 (Android 12) allows CheckBox, RadioButton, RadioGroup, Switch
10. How do they work RemoteViews Processing Action Interaction AppWidgetManager .update(widgetId, remoteViews) AppWidgetProvider .onReceive(context, intent) PendingIntent .getBroadcast(...) PendingIntent .getActivity(...) → deeplink Actions on widget New data Old data creation Life inside a AppWidgetProvider Thank you Łukasz Marczak
11. Let’s make one! Let’s create a beautiful ugly widget for - Displaying device’s brand and model in a TextView - Displaying current date and time in a toast when the widget is clicked
12. Let’s make one! Step 1/5 Widget Provider Info XML file
13. Let’s make one! Step 2/5 Widget XML layout
14. Let’s make one! Step 3/5 BroadcastReceiver in app Manifest
15. Let’s make one! Step 4/5
16. Let’s make one! Step 4/5 RemoteViews Processing Action Interaction AppWidgetProvider .onReceive(context, intent) PendingIntent .getBroadcast(...) New data Old data Life inside a AppWidgetProvider
17. Let’s make one! Step 5/5 AppWidgetProvider → onReceive method
18. Let’s make one! Step 5/5 RemoteViews Processing Action Interaction AppWidgetProvider .onReceive(context, intent) PendingIntent .getBroadcast(...) Life inside a AppWidgetProvider
19. Power up!
20. Android 12: fancy, roundy, glossy
21. 1. Responsive layouts Resizing widgets? A lot of space wasted! Android 12 fixes this with style 😎
22. 1. Responsive layouts
23. 1. Responsive layouts Documentation: Provide flexible layouts We can still include xml layouts
24. 1. Responsive layouts - compatibility Not available on API < 31
25. 2. Rounded corners official documentation
26. 2. Rounded corners - Compatibility - Don’t place content in the corners :-) - If you already have rounded corners, align them to system values in API 31
27. 3. Configuration Reconfigure on demand
28. 3. Configuration Optionality. Remember to provide default data!
29. 4. Widget description Add android:description in the widget-provider-info xml file
30. 4. Widget description - Compatibility Choose a good preview as well! Remember you can give your widget a label with android:label in BroadcastReceiver in the manifest
31. 4. Widget description - Compatibility Android < 12 → label Android 12 → label + description
32. 5. Scalable previews Actual vector LOCALIZED preview of your widget as a thumbnail
33. 5. Scalable previews - Compatibility • Implement previewLayout and previewImage • You need a dedicated layout for the preview • Localize your strings
34. 6. Theming 🌈 Material You infers palette from the background + Light/Dark theme
35. 6. Theming 🌈 Color groups: accent1, accent2, accent3, neutral1, neutral2. 13 shades for each: the lightest being coded with 0, the darkest — 1000 system_accent3_0 // the lightest shade of accent color #3 system_accent3_10 system_accent3_50 system_accent3_100 system_accent3_200 system_accent3_300 … system_accent3_1000 // the darkest shade of accent color #3 Android devs post on medium
36. 6. Theming 🌈 - Compatibility Create a custom styles and override them for Android 12 values/styles.xml values-31/styles.xml
37. 6. Theming 🌈
38. 7. Voice support Google Assistant can display a widget: • As a response to a specific query • Because a vocal query triggered a Built-in-intent the app has registered to More: https://developers.google.com/assistant/app/widgets
39. 8. Stateful checkboxes and radio buttons Check the state of checkboxes and radio buttons in RemoteViews Compatibility → Provide two layouts for each widget or use workarounds
40. 8. Stateful checkboxes and radio buttons In lists don’t map each checkbox to a single Pending Intent. Use the following
41. 9. Simplified RemoteViews on collections When loading lists you don’t need anymore a RemoteViewsService returning RemoteViewsFactory. Just the following (available through androidx in API < 31) Official docs
42. A recap • Widgets were tricky and still are • Android 12 introduced some tasty new features • Still devs need to invest quite a lot of effort in backwards compatibility • We expect this effort to get lower as Android 12 spreads
43. Any questions? Slides 👇 https://www.marcozanetti.it Write me 👇 marco@marcozanetti.it marco-zanetti-really
44. That’s all, folks Photo: Guillame Mailheiro Thank you for watching Slides 👇 https://www.marcozanetti.it Write me 👇 marco@marcozanetti.it marco-zanetti-really