Updating content
There are two methods for updating content in an app. The preferred method is to automatically update content using sync. Syncing keeps app content automatically updated because it doesn’t require user action.
Alternatively, the manual refresh method requires users to initiate content updates via an action or gesture. Manual refreshing can supplement syncing while maintaining a current scroll position, as when checking for new mail in a Gmail account.
Swipe to refresh
Swipe to refresh is a swipe gesture available at the beginning of lists, grid lists, and card collections where the most recent content appears (Index 0).
Location:
Typically, this gesture is available at the top of content collections, but it can also be at the bottom (for example, in chat applications).
Usage:
The refresh indicator appears only in conjunction with a refresh gesture or action. Syncing does not display a refresh indicator. It’s best to use this gesture with dynamic content that has frequent updates surfacing from a consistent location, where users have a high probability of seeing new content after initiating the gesture.
Changes may not be immediately obvious to users when this gesture is used in views that can change significantly upon refresh. For example, the refresh may non-sequentially delete, reorder, modify, and insert items or change only off-screen items.
Animation showing swipe to refresh
Swipe to refresh should not be used in the following situations:
- Navigation drawers
- Home screen widgets
- Pannable content
Navigation drawers (if present in an app) contain navigation destinations, not dynamic content.
Home screen widgets should update content automatically.
Pannable content, like in maps, have no primary direction or content origin from which users can presume the swipe to refresh gesture will originate.
Refresh indicator positioning and behavior
Position:
The refresh indicator, when resting, is centered horizontally relative to refreshing content.
The refresh indicator is located near the top of refreshing content.
Its exact vertical resting position can be adjusted to promote visual harmony with the underlying layout. For example, the indicator may fall on a material edge or grid line, as long as it’s located near the top of the refreshing content.
Behavior:
As the refresh indicator translates and/or scales into view, the circular spinner fades in while rotating.
The refresh indicator remains visible until the refresh activity completes and any new content is visible, or the user navigates away from the refreshing content.
Keeping the refresh indicator in view until the activity is completed provides feedback on the status of the refresh activity.