Components - Widgets¶

Widgets display glanceable views of an app's most important data and functionality.

Usage:¶

Home screen widgets display your app’s new and interesting content in a consolidated form. They link to richer detail within the app. Users can move and, if supported, resize widgets across their home screen panels.

Type of Widgets¶

Information widgets¶

display a few elements of importance to a user and track how that information changes over time, such as weather or sports scores.

Collection widgets¶

Collection widgets display multiple elements of the same type, such as a collection of articles from a news app. They focus on two interactions:

Browsing a collection
Opening an element’s detail view

Collection widgets can scroll vertically.

Control widgets¶

Control widgets display frequently used functions.
These functions may be triggered from the home screen without opening the app.
Control widgets may or may not progress to a detail view.

Hybrid widgets¶

Many widgets are hybrids that combine elements of the different types above. Center your widget around one of these types and add elements of others as needed.

Ex: a music player widget combines a control widget with elements of an information widget. The result keeps the user informed about which track is currently playing.

Behaviour¶

Your widgets should provide navigation links to frequently used areas of your app,

Resizing allows users to adjust the height or width of a widget.
This allows users to influence the layout of widgets on home panels.

Scrollable widgets¶

List or grid-based collection widgets usually expand or contract the vertical scrolling area.
Regardless of the widget's size, the user can still scroll all elements into view.

Non-scrollable widgets¶

Information widgets are not scrollable. All content and layout must dynamically fit as sized by the user.

Responsive resizing¶

Widgets should accommodate different spacing requirements across devices, including cell number, size, and spacing variations.

Configuring widgets¶

Configuration best practices:

Keep configuration light and don't present more than 2-3 configuration elements
Present configuration choices using dialogs, rather than full-screen, to retain the user's context

Once setup, widgets do not typically show a "Setup" or "Configuration" button.