Android UX Tricks: Nested Scrolling without Nested Scrolling

20
VSCO CONFIDENTIAL DO NOT DISTRIBUTE

Transcript of Android UX Tricks: Nested Scrolling without Nested Scrolling

Page 1: Android UX Tricks: Nested Scrolling without Nested Scrolling

VS

CO

C

ON

FID

EN

TIA

L →

D

O N

OT

DIS

TR

IBU

TE

Page 2: Android UX Tricks: Nested Scrolling without Nested Scrolling

VS

CO

C

ON

FID

EN

TIA

L →

D

O N

OT

DIS

TR

IBU

TE

→ →

Android UX Tricks: Nested Scrolling without Nested Scrolling

11 JAN 2017 PRESENTED BY BRENDAN WEINSTEIN ( VSCO )

[email protected]

Page 3: Android UX Tricks: Nested Scrolling without Nested Scrolling

VS

CO

C

ON

FID

EN

TIA

L →

D

O N

OT

DIS

TR

IBU

TE

Camera Preview

Header that hides when you scroll fast down or up

RecyclerView w/ GridLayoutManager

Page 4: Android UX Tricks: Nested Scrolling without Nested Scrolling

VS

CO

C

ON

FID

EN

TIA

L →

D

O N

OT

DIS

TR

IBU

TE

AppBarLayout & CoordinatorLayout

Page 5: Android UX Tricks: Nested Scrolling without Nested Scrolling

VS

CO

C

ON

FID

EN

TIA

L →

D

O N

OT

DIS

TR

IBU

TE

NestedScrollingParent

NestedScrollingChild

→ boolean onStartNestedScroll(child, target, axes) → void onNestedScrollAccepted(child, target, axes) → void onStopNestedScroll(target) → void onNestedScroll(target, dxConsumed, dyConsumed, dxConsumed, dyUnconsumed) → void onNestedPreScroll(target, dx, dy, consumed) → boolean onNestedFling(target, velocityX, velocityY, consumed) → boolean onNestedPreFling(target, velocityX, velocityY)

→ void setNestedScrollingEnabled(enabled) → boolean isNestedScrollingEnabled() → startNestedScroll(axes) → stopNestedScroll() → hasNestedScrollingParent() → dispatchNestedScroll(dxConsumed, dyConsumed, dxUnconsumed,

dyUnconsumed, offsetInWindow) → dispatchNestedPreScroll(dx, dy, consumed, offsetInWindow) → dispatchNestedFling(velocityX, velocityY, consumed) → dispatchBestedPreFling(velocityX, velocityY)

Page 6: Android UX Tricks: Nested Scrolling without Nested Scrolling

VS

CO

C

ON

FID

EN

TIA

L →

D

O N

OT

DIS

TR

IBU

TE

ParentScrollView RedView ChildScrollView

BlueView WhiteView BlueView WhiteView

Page 7: Android UX Tricks: Nested Scrolling without Nested Scrolling

VS

CO

C

ON

FID

EN

TIA

L →

D

O N

OT

DIS

TR

IBU

TE

Page 8: Android UX Tricks: Nested Scrolling without Nested Scrolling

VS

CO

C

ON

FID

EN

TIA

L →

D

O N

OT

DIS

TR

IBU

TE

Page 9: Android UX Tricks: Nested Scrolling without Nested Scrolling

VS

CO

C

ON

FID

EN

TIA

L →

D

O N

OT

DIS

TR

IBU

TE

Page 10: Android UX Tricks: Nested Scrolling without Nested Scrolling

VS

CO

C

ON

FID

EN

TIA

L →

D

O N

OT

DIS

TR

IBU

TE

How to pass a fling from one view to another?

→Need to find velocity of the fling at the point at which there is no more of the child to be scrolled, record that as the initial velocity for the a VelocityTracker in the parent and initiate a new fling.

Page 11: Android UX Tricks: Nested Scrolling without Nested Scrolling

VS

CO

C

ON

FID

EN

TIA

L →

D

O N

OT

DIS

TR

IBU

TE

Did I really search hard enough for alternative solutions? What about open source?

→me.henrytao.smoothappbarlayoutdemo →ksoichiro/Android-ObservableScrollView

Page 12: Android UX Tricks: Nested Scrolling without Nested Scrolling

VS

CO

C

ON

FID

EN

TIA

L →

D

O N

OT

DIS

TR

IBU

TE

Page 13: Android UX Tricks: Nested Scrolling without Nested Scrolling

VS

CO

C

ON

FID

EN

TIA

L →

D

O N

OT

DIS

TR

IBU

TE

Tracking the scrollY of a RecyclerView is error-prone

Page 14: Android UX Tricks: Nested Scrolling without Nested Scrolling

VS

CO

C

ON

FID

EN

TIA

L →

D

O N

OT

DIS

TR

IBU

TE

Page 15: Android UX Tricks: Nested Scrolling without Nested Scrolling

VS

CO

C

ON

FID

EN

TIA

L →

D

O N

OT

DIS

TR

IBU

TE

How do these libraries actually work under the hood?

Why are there not two Scrollable elements?

Incredibly relevant quote from the great Nolan Brothers Film The Prestige:

“Now you're looking for the secret. But you won't find it because of course, you're not really looking. You don't really want to work it out. You

want to be fooled.”

Page 16: Android UX Tricks: Nested Scrolling without Nested Scrolling

VS

CO

C

ON

FID

EN

TIA

L →

D

O N

OT

DIS

TR

IBU

TE

Camera Preview

Header that hides when you scroll fast down or up

RecyclerView w/ GridLayoutManager

Page 17: Android UX Tricks: Nested Scrolling without Nested Scrolling

VS

CO

C

ON

FID

EN

TIA

L →

D

O N

OT

DIS

TR

IBU

TE

Page 18: Android UX Tricks: Nested Scrolling without Nested Scrolling

VS

CO

C

ON

FID

EN

TIA

L →

D

O N

OT

DIS

TR

IBU

TE

Page 19: Android UX Tricks: Nested Scrolling without Nested Scrolling

VS

CO

C

ON

FID

EN

TIA

L →

D

O N

OT

DIS

TR

IBU

TE

Page 20: Android UX Tricks: Nested Scrolling without Nested Scrolling

VS

CO

C

ON

FID

EN

TIA

L →

D

O N

OT

DIS

TR

IBU

TE

→ →

11 JAN 2016 BRENDAN WEINSTEIN (VSCO)

[email protected]