Upload
others
View
10
Download
0
Embed Size (px)
Citation preview
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