Widgets: your app, their homescreen
As app developers, we want users to return to our app as much as possible. We’ve picked up a lot of cute tricks to nudge them back. Push notifications, emails, and all other sorts of things trigger the user back into our app. But, what if we could increase engagement by coming to the user, rather than begging them to come to us? Widgets do just this.
Widgets
What exactly is a widget? A widget consists of a single View that is passed to other apps, such as the homescreen app, to be displayed as a portion of their layout. When you claim real estate on the user’s homescreen, magical things can happen. Because now you can use your widget to display information that your users will care about, and to trigger actions that will bring them back into your app.
At-a-glance
Don’t think of widgets as simply “mini-apps”, think of them as at-a-glance views of what makes your app special.
Let’s say you’re building a weather app. Why not build a widget that displays the current temperature? This provides the user with instant value. They get the information they need without having to open the app. Not only is this useful, but you get your own little piece of the homescreen. Which serves as a little nudge right back into the app.
Building a widget
A widget consists of three main pieces: the metadata in AppWidgetProvider.xml, the RemoteViews in your layout, and the implementation logic in the AppWidgetProvider.class.
The AppWidgetProvider.xml contains the metadata of your widget, it’s label name, size, layout, and all that other good stuff. This file lives in the xml sub-folder in your res folder.
<appwidget-provider
xmlns:android=”http://schemas.android.com/apk/res/android"
android:initialLayout=”@layout/widget_today”
android:minHeight=”@dimen/widget_today_default_height”
android:minWidth=”@dimen/widget_today_default_width”
android:updatePeriodMillis=”0" />The android:updatePeriodMillis attribute specifies when the system will wake up and refresh your widget, with a minimum update period of 30 minutes (1,800,000 milliseconds). But for static widgets, this isn’t necessary, so by specifying zero it disables this functionality.
Creating the View
The next step is to create the view. Views for widgets are a bit different since they are transferred from one app to another. Therefore, only a subset of views are support. Fortunately, most of the views you know and love are able for use in a Widget’s view. This does mean though that you won’t be able to create a custom view.
Implementing the logic
Once the view is in place you’ll need to have the backing logic, which is specified by subclassing AppWidgetProvider. The main method you’ll use is the onUpdate method.
public class TodayWidgetProvider extends AppWidgetProvider {
@Override
public void onUpdate(Context context,
AppWidgetManager appWidgetManager,
int[] appWidgetIds) {
}You’ll notice that the onUpdate method provides you with a list of appWidgetIds. A user can put multiple widgets on the homescreen and this list helps you keep track of each one.
public class TodayWidgetProvider extends AppWidgetProvider {
@Override
public void onUpdate(Context context,
AppWidgetManager appWidgetManager,
int[] appWidgetIds) { for(int appWidgetId : appWidgetIds) {
RemoteViews views = new RemoteViews(
context.getPackageName(),
R.layout.widget);
// do some logic here
appWidgetManager.updateAppWidget(appWidgetId, views);
}
}
}
Using a for loop, you can iterate over the list and create a RemoteViews object and then give it to the provided appWidgetManager to update the view.
Setting up the Manifest
The last step is to declare the widget in the AndroidManifest.
<receiver
android:name=”.TodayWidgetProvider”
android:label=”TodayWidget” >
<intent-filter>
<action android:name=”android.appwidget.action.APPWIDGET_UPDATE” />
</intent-filter> <meta-data
android:name=”android.appwidget.provider”
android:resource=”@xml/widget_today” />
</receiver>
Widgets extend from a BroadcastReceiver, so you declare them in the manifest with the receiver tag. It’s the APPWIDGET_UPDATE action that indicates that the receiver is an AppWidgetProvider. The meta-data tag tells Android the information it needs to display the widget in the widget selection screen.
Deep linking
Displaying information is great, but we do want users in the app. Well, a tap on a widget can trigger a deep link.
Don’t just load up the MainActivity. Instead, see if there is a better point of entry, such as detail view for today’s weather.
public class TodayWidgetProvider extends AppWidgetProvider {
@Override
public void onUpdate(Context context,
AppWidgetManager appWidgetManager,
int[] appWidgetIds) { for(int appWidgetId : appWidgetIds) {
RemoteViews views = new RemoteViews(
context.getPackageName(),
R.layout.widget); // Create a pending intent from the detail activity intent
Intent intent = new Intent(context, DetailActivity.class);
PendingIntent pendingIntent =
PendingIntent.getActivity(context, 0, intent, 0);
// When a button is clicked, open the detail activity
views.setOnClickPendingIntent(R.id.buttonOpen, pendingIntent);
appWidgetManager.updateAppWidget(appWidgetId, views); }
}
}
Using the RemoteViews method setOnClickPendingIntent(), you can set what happens when the user taps on your widget.
This is your classic win/win scenario. Not only are you providing value to the user, but you’ve enticed them to come back to your application.
Control toggle
Widgets are more than just displaying information. You can use widgets to trigger actions, like in a control toggle.
Perhaps you want to show how strong the wifi signal is right now, that’s your view. A click on that view could toggle the WiFi on/off. The beauty in all of this, is that you keep the user out of the settings app.
Collections
Widgets are also a great place display a list. For a calendar app, a user would probably enjoy a widget that displays a list of the events for today. Clicking on an event can open its detail view, and scrolling the the list can show you everything that doesn’t fit in the view.
An extra bit of value would be space for a quick-add action to easily create a new event in a single click.
What’s next?
Go build a widget. Widgets are all about providing instant value to your users. Break down the most important pieces of your app. If they can fit in a small view, it likely makes for an awesome widget. If there’s a quick action that might happen often, that could be a good widget. You get the idea, so use your imagination a bit.
Check out the Advanced Android lesson on Widgets for a step-by-step guide.
#BuildBetterApps
Follow the Android Development Patterns Collection for more!
