Android swipe to refresh

Swipe to refresh manually refreshes screen content with a user action or gesture.


Usage

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).

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.

Animation showing swipe to refresh

Swipe to refresh should not be used in the following situations:

  • Navigation drawers
  • Home screen widgets
  • Pannable content
Don'tDon’t place refresh indicators in navigation drawers.
Don'tDon’t display refresh indicators on regions that should update automatically, such as Home screen widgets.
Don'tDon’t attach refresh indicators to pannable content, such as in maps, as the swipe gesture is already being used for other actions on those regions.

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.

DoKeep the refresh indicator in view until the activity is completed to provide status of the refresh activity.
Don'tDon’t scroll the refresh indicator off-screen, as it hides the status of the refresh activity. It could imply that the refresh activity is associated with a specific component, such as a card, instead of the entire screen.

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
Refreshing content that is coplanar with another surface.
Refreshing content that is below another surface in z-space.
Refreshing content generated by an app bar 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.

DoHorizontally center the refresh indicator over the refreshing content.
Don'tDon’t horizontally align the refresh indicator to one side of the refreshing content.
Don'tPlacing the refresh indicator in unexpected locations that makes its relationship to refreshing content ambiguous.

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.

DoPosition the refresh indicator near the top of refreshing content.
Don'tDon’t vertically position the refresh indicator where it will obstruct content.

Up next