pimp my widget!

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@marcozanetti.it

marco-zanetti-really

That’s all, folks

Photo: Guillame Mailheiro

Thank you for watching

Slides 👇 https://www.marcozanetti.it

Write me 👇

marco@marcozanetti.it

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