pimp my widget!
TRANSCRIPT
Pimp my widget!
Photo: Guillame Mailheiro
Hello! whoami?
✓ Marco Zanetti
✓ Android Developer in Synesthesia
✓ Currently using 12 widgets, proudly
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
Basics
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”
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”
Does anybody really use them?
Source: Androidpolice (not a truly representative dataset, I know)
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
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
How do they work
RemoteViews
Processing
Action
InteractionAppWidgetManager.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
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
Let’s make one! Step 1/5
Widget Provider Info XML file
Let’s make one! Step 2/5
Widget XML layout
Let’s make one! Step 3/5
BroadcastReceiver in
app Manifest
Let’s make one! Step 4/5
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
Let’s make one! Step 5/5
AppWidgetProvider → onReceive method
Let’s make one! Step 5/5
RemoteViews
Processing
Action
Interaction
AppWidgetProvider.onReceive(context, intent)
PendingIntent.getBroadcast(...)
Life inside a AppWidgetProvider
Power up!
Android 12: fancy, roundy, glossy
1. Responsive layouts
Resizing widgets?
A lot of space wasted!
Android 12 fixes this with style
😎
1. Responsive layouts
1. Responsive layouts
Documentation: Provide flexible layouts
We can still include xml layouts
1. Responsive layouts - compatibility
Not available on API < 31
2. Rounded corners
official documentation
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
3. Configuration
Reconfigure on demand
3. Configuration
Optionality. Remember to provide default data!
4. Widget description
Add android:description in the
widget-provider-info xml file
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
4. Widget description - Compatibility
Android < 12 → label Android 12 → label + description
5. Scalable previews
Actual vector LOCALIZED preview of your widget
as a thumbnail
5. Scalable previews - Compatibility
● Implement previewLayout and previewImage
● You need a dedicated layout for the preview
● Localize your strings
6. Theming 🌈Material You infers palette from the background + Light/Dark theme
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_10system_accent3_50 system_accent3_100system_accent3_200system_accent3_300…system_accent3_1000 // the darkest shade of accent color #3
Android devs post on medium
6. Theming 🌈 - Compatibility
Create a custom styles and override them for Android 12
values/styles.xml
values-31/styles.xml
6. Theming 🌈
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
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
8. Stateful checkboxes and radio buttons
In lists don’t map each checkbox to a single
Pending Intent. Use the following
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
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
Any questions?
Slides 👇 https://www.marcozanetti.it
Write me 👇
marco-zanetti-really
That’s all, folks
Photo: Guillame Mailheiro
Thank you for watching
Slides 👇 https://www.marcozanetti.it
Write me 👇
marco-zanetti-really
Widgets have been around for some time
Widgets: 2009 Up: 2009 The hangover: 2009
It’s time to pimp ‘em up!
It’s time to pimp ‘em up!
Rounded corners Checkboxes
Responsive layouts
And much, much more...
8. RemoteViews improved
Methods added to RemoteViews to change details at runtime.
Examples:
● setColorStateList(), changing the color of a progress bar at runtime● setViewLayoutMargin(), setting exact margins for RemoteViews● setRemoteAdapter(int viewId,
RemoteViews.RemoteCollectionItems items) to pass a whole collection of RemoteItems at the same time.
How do they work: The toolkit
From official Android documentation
How do they work: RemoteViews
This happens in your app This happens in the launcherPicture from LearningTree
Ok but does anybody use widgets?
Poll by droid-life.com, 2016 Poll by Nextpit.com, 2019
3. Configuration - Compatibility
Flag already available on Android > 8
Reconfiguration from a much less intuitive action point