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