Gesture Navigation Tutorial for Android

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.

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:

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:

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

The recent apps or overview gesture:

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.

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.

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.

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:

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.

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.

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:

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.

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.

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:

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.