Usage
Swipe to refresh is a
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.
Refresh indicator
The refresh indicator appears only in conjunction with a refresh gesture or action. Syncing does not display a refresh indicator. Refresh the contents of a...
The refresh indicator appears only in conjunction with a refresh gesture or action. Syncing does not display a refresh indicator.
Effects
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.
Swipe to refresh should not be used in the following situations:
- Navigation drawers
- Home screen widgets
- Pannable content
Behavior & placement
Behavior
As the refresh indicator scales into view, the circular spinner fades in while rotating. The refresh indicator remains visible until the refresh activity completes and...
As the refresh indicator 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.
Refresh indicator transitions
When a surface is in front of the surface with refreshing content, the refresh indicator transitions from behind that surface and is clipped until fully visible.
The refresh indicator increases in size as it translates when:
- The refreshing material is at a higher elevation than all other surfaces
- A content refresh is initiated via an app bar or overflow menu action
Threshold requirements
To ensure intentional usage of the swipe to refresh gesture, the refresh indicator must pass a threshold before the app will refresh. This threshold is indicated by a number of cues:
- The circular spinner reaches 100% opacity
- The rotation of the circular spinner slows down
- The rate of translation of the refresh indicator slows down
After passing the threshold, completing the gesture initiates a refresh.
Reversing the gesture past the threshold will cancel the refresh action.
Swipe to refresh in composition
Typically, the refresh gesture is available at the top of content collections, but it can also be at the bottom of the screen. The refresh...
Gesture positioning
Typically, the refresh gesture is available at the top of content collections, but it can also be at the bottom of the screen.
Refresh indicator (Horizontal resting position)
The refresh indicator, when resting, is centered horizontally relative to refreshing content.
Refresh indicator (Vertical resting position)
The refresh indicator is located near the top of refreshing content.
Its vertical resting position can be adjusted to improve the harmony of a layout. For example, the indicator may fall on a surface’s edge or the layout grid, as long as it’s located near the top of the refreshing content.