App widgets overview

Widgets are an essential aspect of home screen customization. You can imagine them as "at-a-glance" views of an app's most important data and functionality that is accessible right from the user's home screen. Users can move widgets across their home screen panels, and, if supported, resize them to tailor the amount of information within the widget to their preference.

This page provides an introduction to the different types of widgets you might want to create and some design principles to follow. To start building an app widget, read Create a simple widget.

Widget types

As you begin planning your widget, think about what kind of widget you're trying to build. Widgets typically fall into one of the following categories:

Information widgets

Example weather widget displaying Tokyo as mostly
            cloudy, 14 degrees, and the projected temperature beginning at
            4pm through 7pm
Figure 1: An information widget from a weather app

Information widgets typically display a few crucial information elements and track how that information changes over time. Good examples for information widgets are weather widgets, clock widgets or sports score tracking widgets. Touching information widgets typically launches the associated app and opens a detailed view of the widget information.

Collection widgets

Collection widgets specialize in displaying multiple elements of the same type, such as a collection of pictures from a gallery app, a collection of articles from a news app or a collection of emails/messages from a communication app. Collection widgets can scroll vertically.

Collection widgets typically focus on the following use cases:

  • Browsing the collection
  • Opening an element of the collection to its detail view in the associated app for consumption
  • Interacting with elements such as marking them done (with new support for compound buttons in Android 12 (API level 31))

Control widgets

A widget for an app called 'Light list,' displaying toggle switches
            labeled 'Bedroom,' 'Kitchen', and 'Living room,' with the first two
            toggle switches turned off
Figure 4: Example of a control widget

The main purpose of a control widget is to display often-used functions, so that the user can trigger right from the home screen without having to open the app first. You can think of them as remote controls for an app. An example of a control widget is a home control widget that lets users turn lights on or off in different rooms of a house.

Interacting with a control widget may or may not open an associated detail view in the app. This depends on whether the control widget's function outputs any data, such as in the case of a search widget.

Hybrid widgets

A general music app showing buttons for 'thumbs
            down,' back, play/pause, forward, and 'thumbs up.' The artist and
            track are listed as 'Artist' and 'Example music,' respectively.
Figure 5: Example of a music app

While some widgets tend to gravitate towards one of the types in the preceding sections (information, collection, or control), many widgets in reality are hybrids that combine elements of different types.

A music player widget is primarily a control widget, but also keeps the user informed about what track is currently playing. It essentially combines a control widget with elements of an information widget type. When planning your widget, design around one of the base types and add elements of other types if needed.

Widget limitations

While widgets could be understood as "mini apps," there are certain limitations that are important to understand before you embark on designing your widget.

Gestures

Because widgets live on the home screen, they have to co-exist with the navigation that is established there. This limits the gesture support that is available in a widget compared to a full-screen app. While apps, for example, may allow users to navigate between screens horizontally, that gesture is already taken on the home screen for the purpose of navigating between home screens.

The only gestures available for widgets are touch and vertical swipe.

Elements

Given the preceding limitations with interactions, some of the UI building blocks that rely on restricted gestures are not available for widgets. For a complete list of supported building blocks and more information on layout restrictions, see Create the widget layout, Provide flexible widget layouts.

Design guidelines

Widget content

Widgets are a great mechanism to attract a user to your app by "advertising" new and interesting content that is available for consumption in your app.

Just like the teasers on the front page of a newspaper, widgets should consolidate and concentrate an app's information and then provide a connection to richer detail within the app; or in other words: the widget is the information "snack" while the app is the "meal." As a bottom line, always make sure that your app shows more detail about an information item than what the widget already displays.

Besides the pure information content, consider rounding out your widget's offering by providing navigation links to frequently used areas of your app. This lets users complete tasks quicker and extends the functional reach of the app to the home screen.

Good candidates for navigation links to surface on widgets are:

  • Generative functions: These are the functions that allow the user to create new content for an app, such as creating a new document or a new message.

  • Open application at top level: Tapping on an information element will usually navigate the user to a lower level detail screen. Providing access to the top level of your application provides more navigation flexibility and can replace a dedicated app shortcut that users would otherwise use to navigate to the app from the home screen. Using your application icon as an affordance can also provide your widget with a clear identity in case the data you're displaying is ambiguous.

Widget resizing

Standard Google Clock widget
Figure 6: Standard Google Clock widget

Long-pressing on a resizable widget, and subsequently releasing puts that widget into resize mode. Users can use the drag handles or the widget corners to set the desired size.

Resizing allows users to adjust the height and/or the width of a widget within the constraints of the home screen placement grid. You can decide if your widget is freely resizable or if it is constrained to horizontal or vertical size changes. You do not have to support resizing if your particular widget is inherently fixed-size.

Allowing users to resize widgets has important benefits:

  • They can fine-tune how much information they want to see on each widget.
  • They can better influence the layout of widgets and shortcuts on their home panels.

Planning a resize strategy for your widget depends on the type of widget you're creating. List or grid-based collection widgets are usually straightforward because resizing the widget will simply expand or contract the vertical scrolling area. Regardless of the widget's size, the user can still scroll all information elements into view. Information widgets, on the other hand, require a bit more hands-on planning since they are not scrollable and all content has to fit within a given size. You will have to dynamically adjust your widget's content and layout to the size the user defined through the resize operation.

In this simple example, the user can resize a weather widget in three steps, exposing richer information about the weather at the current location as the widget grows.

Example weather widget in the smallest 3x2-grid size, and listing the
            location name (Tokyo), temperature (14°), and symbol indicating
            partially cloudy weather
Figure 7: Example weather widget in a 3x2-grid 'small' size


Example weather widget in a 5x2 'medium' size, including all of the
            UI from the 3x2-grid size plus the label 'mostly cloudy' and
            forecast temperatures from 4pm through 7pm
Figure 8: Example weather widget in a 5x2-grid 'medium' size


Example weather widget in a 5x4 'large' size, including all of the UI
            from the 3x2- and 5x2-grid sizes plus a forecast of the weather
            from Tuesday through Friday
Figure 9: Example weather widget in the 5x4-grid 'large' size

For each widget size, determine how much of your app's information should be surfaced. For smaller sizes, concentrate on the essential and then add more contextual information as the widget grows horizontally and vertically.

Layout considerations

It's tempting to lay out your widgets according to the dimensions of the placement grid of a particular device that you own and develop with. This can be a useful initial approximation, but keep the following points in mind:

  • Planning your widget resizing strategy across "size buckets" rather than variable grid dimensions gives you the most reliable results.
  • The number, size, and spacing of cells can vary widely from device to device. Hence, it is very important that your widget is flexible and can accommodate more or less space than anticipated.
  • In fact, as the user resizes a widget, the system responds with a dp size range in which your widget can redraw itself.
  • Starting in Android 12, you can provide more refined size attributes and more flexible layouts. This includes:

Widget configuration by users

Sometimes, the user needs to set up the widget before it can become useful. Think of an email widget where the user needs to select the mail folder before the inbox can be displayed, or a static photo widget where the user has to assign a picture from the gallery to be displayed. Android widgets display their configuration choices right after the user drops the widget onto a home screen.

Widget design checklist

  • Focus on small portions of glanceable information on your widget. Expand on the information in your app.
  • Choose the right widget type for your purpose.
  • Plan how the content for your widget should adapt to different sizes.
  • Make your widget orientation and device independent by ensuring that the layout is capable of stretching and contracting.
  • Consider whether your widget needs any additional configuration.