Impressions from Google I/O 2019: Android Q — Gesture Navigation

Lauren Yew
Under Armour Makers
4 min readMay 28, 2019

Gesture Navigation has come to Android Q and it has large impacts on Android app layouts.

What is it?

Google has decided to include Gesture Navigation as an alternative to the usual 3 button mode that Android users have become accustomed to. Gestures are often used by Android power users. Gesture Navigation was introduced to unify gestures used across all Android phones (apparently third party phones were making too many different and confusing gesture sets). There are 3 main gesture areas: left, right, and bottom.

Gesture Navigation Areas

Users can swipe up from the bottom to return home, see recent apps, or kill the app. Users can also swipe from the left or right gesture areas to go back.

Drawing Full Screen

Gesture Navigation mode means that the app should be rendered across the full screen. The status bar should be set to be transparent in this mode, and the navigation bar should also be made more transparent. Android has already taken care of automatically changing the navigation bar’s transparency depending on what content is behind it in this mode. This means that the best practice is to render content behind the status bar and navigation bar, taking up the full screen.

Staying out of System Gesture Areas

The system gesture areas now belong to the OS and will not register touches to send to the app. This means that anything that is clickable, swipe-able, etc. needs to be moved out of the gesture areas.

Floating Action Button Pre-adjustment for system Window Insets

Fortunately, Android has provided us with some system Window Insets that can be used to adjust your layouts to be away from the gesture areas.

Floating Action Button post-adjustment for system Window Insets

Some issue areas include:

  • Floating Action Buttons
  • Recycler view clickable content at the bottom of the screen
  • Sliders, Seek bars, etc. at bottom of the screen
  • Navigation Drawers (left)
  • Bottom sheets (peek content below the gesture area)
  • View Pagers (left & right)
  • Landscape mode

Google strongly suggests that developers test every screen in their app for the button vs. gesture mode and for landscape mode as well. Unfortunately, most of the suggestions on how to fix these layout issues were just to add padding or margins for these gesture areas and move clickable content closer to the center of the screen.

Workaround: Opt out of Gesture Areas

If fixing the layout on your screen for left and right gesture areas is too daunting a task, there is a workaround. Developers can have their layout opt out of the gesture navigation zones on the left and right with View.setSystemGestureExclusionRects(..). It was suggested at Google I/O that app developers try to stay away from using this as common practice, as it defies the user’s expectation of being able to use the left and right gesture navigation, but it is an option. Unfortunately, apps cannot opt out of the home gestures.

Summary

Gesture Navigation mode has opened up some new pain points that developers will need to handle. On one hand, the new mode should allow users to use the whole of their screen to see content. On the other, this is likely to require fixes in every layout of every screen in every app — and moving content closer to the center may cause issues viewing content on smaller phones. Window insets will help keep clickable areas where they can be used, and if all else fails, developers can try to opt out of gesture navigation on a layout (left and right at least). Hopefully new solutions and developer feedback will help make this a smoother transition.

“All screenshots were taken from the Google IO 2019 Dark Theme & Gesture Navigation session, available from the Google IO video sourced above.”

“The Google IO logo, names, images, and all goodwill therein are the property of Google, Inc.”

--

--

Lauren Yew
Under Armour Makers

Senior Software Engineer (Android) working on the App Platforms team at The New York Times in Austin, TX. https://laurenyew.github.io/