Gesture Navigation: immersive modes (IV)
This is the fourth post in our series on Gesture Navigation. If you want to skip to another post, you can find them listed below:
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.
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:
- Non-sticky (normal) immersive mode — A user can exit immersive mode, by swiping in the system bars.
- 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:
- 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.
- 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:
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:
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.
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.
