Patterns– Swipe to refresh

Swipe to refresh

Mobile

Tablet

  • Desktop
  • Whiteframes

The mobile layout template includes 10 diverse screens. Use the layers palette to toggle on and off keylines and spacing rules.

Mobile Whiteframe

The tablet layout template includes 14 various screens. Use the layers palette to toggle on and off keylines and spacing rules.

Tablet Whiteframe
  • The desktop layout template includes four variations of four different window sizes. Use the layers palette to toggle on and off keylines and spacing rules.
  • Desktop Whiteframe
Whiteframes provide a variety of layout structures using a consistent approach to surfaces, layering, and shadows.

Whiteframes

Material Design swipe gesture to manually refresh content

Material Design Download Icon Expand and collapse content An arrow that points down when collapsed and points up when expanded.

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.

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.

Material Design Android Logo
Swipe to refresh layout

Refresh the contents of a view via a vertical swipe gesture

Animation showing swipe to refresh

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

  • Navigation drawers
  • Home screen widgets
  • Pannable content
Material Design navigation drawers with navigation destinations

Don’t.

Navigation drawers (if present in an app) contain navigation destinations, not dynamic content.

Material Design widgets should auto-update content

Don’t.

Home screen widgets should update content automatically.

Material Design pannable content with no primary direction

Don’t.

Pannable content, like in maps, have no primary direction or content origin from which users can presume the swipe to refresh gesture will originate.

Positioning Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Gesture positioning

Typically, this gesture is available at the top of content collections, but it can also be at the bottom (for example, in chat applications).

Refresh indicator resting position

The refresh indicator, when resting, is centered horizontally relative to refreshing content.

Material Design gesture positioning and refresh indicator

Do.

Material Design gesture positioning and refresh indicator

Don’t.

Material Design gesture positioning and refresh indicator

Don’t.

Refresh indicator active position

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.

Material Design refresh indicator active position

Do.

Material Design refresh indicator active position

Don’t.

Behavior Expand and collapse content An arrow that points down when collapsed and points up when expanded.

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.

Do.

Keeping the refresh indicator in view until the activity is completed provides feedback on the status of the refresh activity.

Don’t.

Scrolling the refresh indicator off-screen hides the status of the refresh activity and may imply that the refresh activity is associated with a specific component within the view, such as a card, instead of the entire view.

Refresh indicator transitions

When another surface is in front of the material with refreshing content, the refresh indicator translates from underneath that surface and is clipped until it is 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 at a higher elevation than other surfaces

Refreshing content that is coplanar with another surface

Refreshing content that is below another surface in z-space

Refreshing content via 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 will initiate a refresh.

Reversing the gesture past the threshold will cancel the refresh action.