Gesture Navigation Tutorial for Android

In this Android tutorial, you will learn how to add support for gesture navigation to your app, a feature that was added in Android 10. By Denis Buketa.

Leave a rating/review
Download materials
Save for later
Share

In a world of fragmented devices, manufacturers want modern UIs. Often each manufacturer implements a different solution, making app design and development tough. Developers needed a way to unify the ecosystem. In Android 10, Google added Gesture Navigation, a new system navigation mechanism that replaces the button navigation alternatives with three, unique gestures.

In this tutorial, you’ll learn how to add support for Gesture Navigation to your app by working with a simple app for creating and managing notes: NoteMaker. You’ll learn how to:

  • Make your UI edge-to-edge, allowing your app to display its content behind the status and navigation bars.
  • Leverage insets, determining how much to inset your content to accommodate gesture areas.
  • Override gestures in special cases.

For this tutorial, you need Android Studio and an Android device or emulator with Android 10.

Note: This tutorial assumes you have some previous knowledge of Kotlin and Android programming. If you’re starting with them, check out Kotlin for Android or Your First Kotlin Android App to get familiarized with the language and platform.

Learning the Gestures

Before you start writing code to implement the gestures, it is helpful to learn what the gestures are and how they work. Check them out Below!

The navigating back gesture:

View of map changes to home screen with a swipe from the left.

Swiping in from an edge takes you back. Watch the left edge of the screen. You can swipe in from the left or right edge to go back.

The navigating home gesture:

View of map is swiped up from the bottom and away, leaving the home screen.

Swiping up from the bottom is the gesture for home. Watch the bottom edge of the screen.

The recent apps or overview gesture:

A swipe from the middle shrinks the map view and displays a small Google Maps icon on the smaller map.

Finally, swiping up and holding in the middle takes you to your recent apps or overview. Watch the bottom edge of the screen. Now that you’ve seen the gestures, it’s time to see how they are implemented in an app.

Getting Started

Start by downloading the materials by clicking the Download Materials button at the top or bottom of the tutorial. Open the begin project in Android Studio. You’re ready to go!

To get yourself familiar with the app, enable 3-button navigation in your phone settings. You can find this option in System ‣ Gestures ‣ System navigation. Don’t worry, you’ll switch to gesture navigation in a few moments.

Build and run your project in Android Studio. You’ll see the Note Overview screen. Take your time and explore the app before you continue.

A blank screen with notes in a header at the top and a round plus button on the bottom right.

Click the button on the bottom right corner and you’ll see the screen where you can edit your note. You can pick a color for your note or delete the note by using the controls in the bottom sheet. Edit the note’s title and content according to the image below. Select the color for the note.

A note titled My First Note and with the text Let's make this note yellow. A selection of small colored squares at the bottom of the screen.

Finally, click the check-mark button on the top right corner to save the note. On the Note Overview screen, you can see the note you created.

The previously blank note screen with the My First Note information in a yellow box.

Seeing the Problem at Hand

Now, you’ll see why you need to check your app’s behavior with gesture navigation enabled. Go to your device settings and search for System navigation. You’ll find a screen like this:

System navigation selection page from settings offering the choice of fully gestural, 2-button or 3-button navigation

Switch your system navigation to Fully gestural navigation and go back to the app. Click the note you created and try to change its color. Notice how you have to struggle to drag the bottom sheet bar if you even can drag it at all.

Yellow My First Note screen shrinks and floats above home screen.

Go back to the Note Overview screen by clicking the check-mark button on the top right corner or by swiping in from the left or right edge of the screen.

Great! Now that you are familiar with the app, and you saw what problems this new system navigation could cause, you’re ready to add support for gesture navigation to NoteMaker!

Making Your App Edge-to-Edge

In a typical Android app, the bounds of the app are below the status bar and above the navigation bar.

White screen black navigation and status bars. A gold, horizontal line crossing the bidding of the screen and another vertical line across the left fifth of the page.

When making your app edge-to-edge, you want the app to display its content as if the navigation and status bars weren’t there. That creates a more immersive experience.

In Android 10, Google recommends drawing behind the navigation bar and the status bar. So, in edge-to-edge your app’s bounds look like this:

White screen with no navigation or status bars. A gold, horizontal line crossing the bidding of the screen and another vertical line across the left fifth of the page.

Changing System Bar Colors

The first thing you need to do when making your app UI edge-to-edge is to change the system bar colors. Open styles.xml and look inside. You’ll see your base app theme AppTheme.

Add the following items at the bottom of the AppTheme:

<item name="android:navigationBarColor">@android:color/transparent</item>
<item name="android:statusBarColor">@android:color/transparent</item>

Alternatively, you can do this dynamically by using Window.setNavigationBarColor() and Window.setStatusBarColor() in the onCreate().

Build and run your project. See that your system bar colors are now transparent.

White screen with white, blank bars at top and bottom, a green header saying Notes and a yellow rectangle with the My First Note information.

Requesting Fullscreen Layout

Before you can lay out the view edge-to-edge, your app must tell the system that it can handle this type of view. You can do this by using View.setSystemUiVisibility() to set the following flags:

  • SYSTEM_UI_FLAG_LAYOUT_STABLE
  • SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION.

At the top of NotesOverviewActivity.kt, add the following import to the list of imports:

import android.view.View

Now, add the following code below onCreate():

private fun requestToBeLayoutFullscreen() {
  root.systemUiVisibility = (View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION or 
    View.SYSTEM_UI_FLAG_LAYOUT_STABLE)
}

These flags tell the system to display your app fullscreen as if the navigation and status bars weren’t there. You can also set SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN. That allows you to draw behind the status bar.

Finally, call the code you’ve added from onCreate(). Add the following code to onCreate(), right below setContentView():

// Request to be layout full screen
requestToBeLayoutFullscreen()

Nice! Build and run your project. See that your content is now edge-to-edge.

White Notes screen with Notes in a green header and no navigation or status bars.

Repeat the same three steps in SaveNoteActivity.kt. After that, build and run your project. Open the note you created at the beginning of the tutorial and you should see something like this:

Yellow My First Note screen with green header and no navigation or status bars.

Leveraging Insets

After running your app and looking at the modified activities, you can see that some of your views are behind the system bars. This is where insets come into play.

Insets are a collection of values that tell you how much to inset, or move, content. There are two types of insets: System window insets and system gesture insets.