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
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
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
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.
Integrate widgets with Google Assistant
Any of the preceding widget types can be displayed by Google Assistant in response to user voice commands. You can configure your widgets to fulfill App Actions, enabling users to receive quick answers and interactive app experiences on Assistant surfaces like Android and Android Auto. For more details on widget fulfillment for Assistant, see Integrate App Actions with Android widgets.
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.
Widget navigation
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
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.
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:
- Specifying widget size constraints. For example, you can specify the target size for your widget (in grid cells) as well as the maximum possible size.
- Providing responsive layouts, which change depending on the size of the widget.
- Providing exact size layouts, which let the launcher respond with size options for portrait and landscape mode for phones, or four sizes for foldables.
- Using updated guidance and new APIs for determining proper sizes for your widget.
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.