1 of 40

Handling The New Gesture Navigation

@esafirm

2 of 40

GESTURE NAVIGATION

3 of 40

4 of 40

5 of 40

WHY?

6 of 40

Gesture Navigation

More info: https://android-developers.googleblog.com/2019/08/gesture-navigation-backstory.html

​

  1. Gestures can be a faster, more natural and ergonomic way to navigate your phone
  2. Gestures are more intentional than software buttons
  3. Gestures enable a more immersive experience for apps

7 of 40

SO, WHAT NEEDS TO BE DONE?

8 of 40

Let’s have a checklist!

  1. Going edge-to-edge
  2. Handling visual overlaps
  3. Handling gesture conflicts

​

​

9 of 40

10 of 40

Edge-to-Edge

1

2

Set themes to support edge-to-edge

Request to be laid out full screen

11 of 40

12 of 40

13 of 40

Set the Theme

<style name="AppTheme" parent="...">

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

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

</style>

​

14 of 40

Request for Fullscreen

view.systemUiVisibility =

View.SYSTEM_UI_FLAG_LAYOUT_STABLE or

// draw behind status bar

View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN or

// draw behind navigation bar

View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION

​

15 of 40

Request for Fullscreen

view.systemUiVisibility =

View.SYSTEM_UI_FLAG_LAYOUT_STABLE or

// draw behind status bar

View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN or

// draw behind navigation bar

View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION

​

16 of 40

Request for Fullscreen

<androidx.coordinatorlayout.widget.CoordinatorLayout

...

android:fitsSystemWindows="true">

​

17 of 40

Request for Fullscreen

<androidx.coordinatorlayout.widget.CoordinatorLayout

...

android:fitsSystemWindows="true">

​

​

setSystemUiVisibility(

View.SYSTEM_UI_FLAG_LAYOUT_STABLE or

View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN

)

​

18 of 40

Let’s have a checklist!

  • Going edge-to-edge
  • Handling visual overlaps
  • Handling gesture conflicts

​

​

19 of 40

20 of 40

INSETS

21 of 40

What are insets?

  • “A collection of values which tell you how much to inset (move) content in by”
  • “A sizes of system UI”

22 of 40

Insets

  1. System Window Insets
  2. System Gesture Insets
  3. Mandatory System Gesture Insets

23 of 40

Window Insets

Gesture Insets

Mandatory Gesture Insets

24 of 40

Let’s apply the Inset!

ViewCompat.setOnApplyWindowInsetsListener(fab) { _, insets ->

fab.updateLayoutParams<MarginLayoutParams> {

updateMargins(bottom = bottomMargin + insets.systemWindowInsetBottom)

}

insets.consumeSystemWindowInsets()

}

​

25 of 40

26 of 40

Let’s have a checklist!

  • Going edge-to-edge
  • Handling visual overlaps
  • Handling gesture conflicts

​

​

27 of 40

28 of 40

29 of 40

For complete flow chart click here

View Requires Drag /

Swipe

View is mostly/full laid out inside gesture area

View bounds overlaps any mandatory area?

No gesture conflict to handle

Use the gesture exclusion API

Move views out of gesture area

No

Yes

No

Yes

Yes

No

Example: full width ViewPager

30 of 40

Gesture Exclusion API

slideButton.doOnPreDraw {

ViewCompat.setSystemGestureExclusionRects(it, listOf(

Rect(0, 0, it.right, it.bottom)

))

}

​

31 of 40

Gesture Exclusion API

// SlideButton.kt

override fun onLayout(,,,) {

// Set the exclusion rects

ViewCompat.setSystemGestureExclusionRects(this, exclusionRects)

}

​

​

32 of 40

Gesture Exclusion API

// SlideButton.kt

override fun onDraw(,,,) {

// Set the exclusion rects

ViewCompat.setSystemGestureExclusionRects(this, exclusionRects)

}

​

​

33 of 40

34 of 40

Apps can only opt out 200dp of each edges

​

If apps opt out of more, only the bottom 200dp will be overridden for the app

35 of 40

IMMERSIVE MODE

36 of 40

Let’s have a checklist!

  • Going edge-to-edge
  • Handling visual overlaps
  • Handling gesture conflicts

​

​

37 of 40

🎉🥳🎉

38 of 40

REFERENCES

39 of 40

bit.ly/pokegesture

40 of 40

THANK YOU