---
url: /foundations/interaction/gestures.md
description: Gestures are all the ways people interact with UI elements using touch
---

# Gestures

Gestures are all the ways people interact with UI elements using touch

![Gestures](/assets/5ed4705d-mrodtmx2-gestures.Qh1Sb-rF.webp)

* Gestures help people navigate, take action, or transform content
* UI elements should respond to gestures in real time
* Tap, scroll, and swipe are common gestures

## Resources

| Type   | Link                                               | Status    |
| ------ | -------------------------------------------------- | --------- |
| Design | [Design Kit (Figma)](http://goo.gle/m3-design-kit) | Available |

## Types of gestures

### Tap

People can navigate to destinations and interact with elements through touch.

<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Flx1faal8-1P-Tap%202_NewSize.mp4?alt=media" aria-label="Mobile UI shows a tap on the 1st of 3 news cards. The card opens to show the full article."></video>

Tapping a card opens an article

### Double tap

Two quick taps allows people to zoom in and out of content.

<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Flx1fboct-1P%20-%20Double%20tap_NewSize.mp4?alt=media" aria-label="Mobile UI shows a double tap on a floral photo. The image expands to fill the screen."></video>

Double tapping on a photo opens it to full screen

### Long press

People can access additional functionality by pressing on elements for an extended time.

<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Flx1fdbcl-1P-Long%20press_NewSize.mp4?alt=media" aria-label="A long press on an email reveals a selection checkmark and a container color change."></video>

Long pressing a list item selects it

### Scroll and pan

People can slide surfaces vertically, horizontally, or in any direction to move through content.

<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Flx1fely6-1P%20-%20Scroll_NewSize.mp4?alt=media" aria-label="Scrolling a feed.Scrolling up and down in a photo feed."></video>

Vertical scrolling reveals more content

### Swipe

People can navigate horizontally to:

* Switch between peer views like tabs
* Complete actions

<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Flx1ffjk8-1P%20-%20Swipe_NewSize.mp4?alt=media" aria-label="A swipe right on an email reveals a favorites icon."></video>

Swiping a list item can reveal additional actions

<a id="22462fb2-fbe8-4e0c-b3e7-9278bd18ea0d"></a>

### Predictive back

On Android, a person can swipe left or right on certain components as a way to navigate to a previous destination. This gesture is called [predictive back](https://github.com/material-components/material-components-android/blob/master/docs/foundations/PredictiveBack.md).

Before completing the swipe, the person can decide to continue to the previous view or stay in the current view.

Compatible components are:

* [Bottom sheet](../../components/bottom-sheets/overview.md "Bottom sheets show secondary content anchored to the bottom of the screen.")
* [Navigation bar](../../components/navigation-bar/overview.md "Navigation bars let people switch between UI views on smaller devices.")
* [Navigation rail](../../components/navigation-rail/overview.md "Navigation rails let people switch between UI views on mid-sized devices.")
* [Search bar](../../components/search/overview.md "The search bar is a persistent and prominent search field at the top of the screen.")
* [Side sheet](../../components/side-sheets/overview.md "Side sheets show secondary content anchored to the side of the screen.")

<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Flx1fhayy-BottomSheet_NewSize.mp4?alt=media" aria-label="Back swipe on a bottom sheet takes s person back to the previous screen of a photo feed."></video>

A predictive back swipe on a bottom sheet goes back to the previous screen

### Drag

People can move elements around and slide surfaces in and out of view.

<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Flx1fj7qz-1P-Drag%202_NewSize.mp4?alt=media" aria-label="A person drags the second email in a mobile inbox to the third position and back to the second position."></video>

A list can be reordered by dragging a list item

### Pick up and move

A long press and drag allows people to reorder content.

<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Flx1fk8sj-1P-Pick%20up%20and%20move_NewSize.mp4?alt=media" aria-label="Picking up and moving a calendar event to a new time."></video>

A calendar event can be picked up and moved to a new time

### Pinch

People can scale surfaces to navigate between screens.

<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Flx1fl32l-1P%20-%20Pinch%202_NewSize.mp4?alt=media" aria-label="Dragging two points apart opens photo to full screen, dragging them towards each other collapses the photo."></video>

A photo can be pinched outward to a full screen view

### Compound gestures

Users can fluidly transition between various gestures, like panning and pinching in a map view.

<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Flx1fm10s-1P%20-%20Compound_NewSize.mp4?alt=media" aria-label="Pan gesture moves map, then pinch gesture is used to zoom out then in."></video>

A map UI can be navigated through a combination of pan and pinch