Image for post
Image for post
Cover image by Virginia Poltrack

In this fourth post, we’re going to cover what you can do if your app needs to draw across the entire screen, with the system bars hidden. Referring back to our flowchart from the previous post, we’re going to cover the remaining two solutions on the right hand-side of the chart.

Image for post
Image for post
You can find a printable PDF version of the complete flow chart here.

The solutions here are to use the immersive mode which the Android platform offers apps. But what is immersive mode?

What is immersive mode?

Immersive mode is a way to render content fullscreen, hiding the system bars so they are not in the way. It additionally provides safety from accidental gestures/presses causing the user to leave the app, particularly useful for games.

There are two types of immersive modes:

  1. Non-sticky (normal) immersive mode — A user can exit immersive mode, by swiping in the system bars.
  2. Sticky immersive mode — A user can temporarily exit immersive mode by swiping in the system bars. Immersive mode is automatically re-entered after a short time (few seconds).

For both modes, there are two states:

  1. System bars hidden — in this state the home and back gestures are disabled. The user must first swipe from an edge to bring in the system bars.
  2. System bars showing — in this state the home and back gestures work as normal.

Now that we’ve gone over the background on immersive mode, let’s take a look at the two different modes in detail.

Immersive mode: non-sticky

As you might have seen from the flow chart, non-sticky immersive mode is ideal for UIs which need to be fullscreen, but do not require precise swiping gestures near the screen edges. Common examples include fullscreen video playback and photo viewers.

In terms of implications for gesture navigation, non-sticky immersive mode works consistently with how it worked on prior versions of Android. Apps can use the gesture exclusions APIs we covered in our previous post when running on Android 10+. In this mode, the same limit of 200dp per edge applies, regardless of whether the system bars are visible or not.

If your app is currently using immersive non-sticky mode, I advise looking back through the third post, in case any views laid out near the screen edges conflict with the system gestures.

Immersive mode: sticky

Sticky immersive mode is designed for UIs which have a strong requirement of being able to use the entire screen, and associated touch input. Common examples of apps which use this mode are drawing apps, and games which use any swipe gestures.

Let’s take a look at an example of the Markers drawing app, running on Android 10 with gesture navigation:

Image for post
Image for post

As you can see above, as soon as the user starts swiping (drawing) nearing the edge of the screen, the back gesture can trigger which interrupts the user.

Since apps using sticky immersive mode are very interactive, the gesture exclusion API limits are removed, but only while the system bars are hidden. This means that the app can exclude any amount of the left/right edges as required by the use case.

However, the system ignores all excluded gesture areas when the system bars are visible, enabling the user to go back without any app interference. The system bars are only visible for a short time in sticky immersive mode, so this should not impact your use case.

The home gesture zone at the bottom of the screen exists as normal, being a ‘mandatory’ gesture area which can not be excluded. An app in sticky immersive mode could exclude the entire length of both vertical edges, so the home gesture area may be the only way for the user to bring in the system bars, and thus exit your app.

Let’s take a look at an updated version of our drawing app which excludes the entire vertical edges:

Image for post
Image for post

You can see that the user can now freely draw near the edge of the screen without the back gesture interrupting them. To be able to exit the app, the user can swipe from the bottom of the screen to bring the system bars back in, enabling them to go back/home.

In terms of implementation, the code used here utilizes the same ideas from the “Use gesture exclusion APIs” section in our third post, the difference is that we want the view to be aware of whether it is in immersive mode or not:

The complete code used to update the Markers app can be seen below👇:

Summary: non-sticky vs sticky

Phew, that was a lot of information 🤯. As a summary, here’s a table comparing the differences between non-sticky and sticky immersive modes.

Image for post
Image for post
Summary of the immersive modes

Must go deeper

This post concludes our coverage on the mechanics of handling gesture conflicts. Hopefully you now have a better idea of how to update your apps to work gracefully with gesture navigation.

The fifth and final post in this series 😌, will cover some of the common UI patterns you likely use in your apps, and what you can do to support them in gesture navigation.

Android Developers

The official Android Developers publication on Medium

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store