Highly recommend look at the mp4 video (https://drive.google.com/open?id=1_k0jlSilVkekIgqU6NHAcx01pjT8cee5) or the recorded talk (not available yet) DroidKaigi 2018 2018/2/8 Room3

1. thagikura
Deep Dive Into LayoutManager
for RecyclerView

2. $ whoami
Takeshi Hagikura
@thagikura
Developer Relations
@Google

3. RecyclerView

4. RecyclerView
Adapter
Recycler
LayoutManager
ItemDecoration
ItemAnimator
RecycledViewPool
TouchHelper
DiffUtil

5. LinearLayoutManager

6. GridLayoutManager

7. StaggeredGridLayoutManager

8. Is it possible to add a
custom LayoutManager?

9. FlexboxLayoutManager

10. github.com/google/flexbox-layout

11. Ports Flexbox in CSS to Android

12. How to create a
custom LayoutManager?

13. Think before you build it
Much harder than custom view
Gives you much flexibility
on top of RecyclerView features

15. At the bare minimum,
need to override…

16. onLayoutChildren
Called on:
- initial layout
- adapter changes
Lay out all relevant child views

19. If this isViewGroup
(except RecyclerView)
All child views on memory

20. In RecyclerView +
LayoutManager
Only visible views should
be on memory

21. onLayoutChildren
1. Find the anchor position

22. Anchor position
Starting position to put views.
Start with 0 on initial layout.
Remember the first visible view to
restore the state

23. onLayoutChildren
1. Find the anchor position
2. Calculate how many items
should be in visible portion

24. onLayoutChildren
1. Find the anchor position
2. Calculate how many items
should be in visible portion
3. Fill toward end

25. private int fill(RecyclerView.Recycler recycler,
RecyclerView.State state,
LayoutState layoutState) {
int start = layoutState.mAvailable;
int remainingSpace = layoutState.mAvailable;
int consumed = 0;
while (remainingSpace > 0 &&
layoutState.hasMore(state, mFlexLines)) {
FlexLine flexLine =
mFlexLines.get(layoutState.mFlexLinePosition);
layoutState.mPosition = flexLine.mFirstIndex;
consumed += layoutFlexLine(flexLine, layoutState);
remainingSpace -= flexLine.getCrossSize();
}
layoutState.mAvailable -= consumed;
return start - layoutState.mAvailable;
}
Simplified version of fill

26. private int fill(RecyclerView.Recycler recycler,
RecyclerView.State state,
LayoutState layoutState) {
int start = layoutState.mAvailable;
int remainingSpace = layoutState.mAvailable;
int consumed = 0;
while (remainingSpace > 0 &&
layoutState.hasMore(state, mFlexLines)) {
FlexLine flexLine =
mFlexLines.get(layoutState.mFlexLinePosition);
layoutState.mPosition = flexLine.mFirstIndex;
consumed += layoutFlexLine(flexLine, layoutState);
remainingSpace -= flexLine.getCrossSize();
}
layoutState.mAvailable -= consumed;
return start - layoutState.mAvailable;
}
mAvailable: Amount of pixels need to be filled
mDirection: START | END

27. private int fill(RecyclerView.Recycler recycler,
RecyclerView.State state,
LayoutState layoutState) {
int start = layoutState.mAvailable;
int remainingSpace = layoutState.mAvailable;
int consumed = 0;
while (remainingSpace > 0 &&
layoutState.hasMore(state, mFlexLines)) {
FlexLine flexLine =
mFlexLines.get(layoutState.mFlexLinePosition);
layoutState.mPosition = flexLine.mFirstIndex;
consumed += layoutFlexLine(flexLine, layoutState);
remainingSpace -= flexLine.getCrossSize();
}
layoutState.mAvailable -= consumed;
return start - layoutState.mAvailable;
}
Put views and
loop until mAvailable < 0

28. onLayoutChildren
1. Find the anchor position
2. Calculate how many items
should be in visible portion
3. Fill toward end
4. Fill toward start

29. Why fill toward both directions?

30. In some cases anchor position may
be at the bottom

31. 1 2
3
4 5
6 7
8 9
10
11
scrollToPosition(50)
42 43
44
45
46 47
48
49 50
Anchor position

32. scrollVerticallyBy
Interact with scroll by the user

33. @Override
public boolean canScrollVertically() {
return true;
}
Could be false depending on attributes.
E.g. Orientation in LinearLayoutManager

34. @Override
public int scrollVerticallyBy(int dy,
RecyclerView.Recycler recycler,
RecyclerView.State state) {
if (isMainAxisDirectionHorizontal()) {
int scrolled =
handleScrollingCrossAxis(dy, recycler, state);
mViewCache.clear();
return scrolled;
} else {
int scrolled = handleScrollingMainAxis(dy);
mAnchorInfo.mPerpendicularCoordinate += scrolled;
mSubOrientationHelper.offsetChildren(-scrolled);
return scrolled;
}
}

35. @Override
public int scrollVerticallyBy(int dy,
RecyclerView.Recycler recycler,
RecyclerView.State state) {
if (isMainAxisDirectionHorizontal()) {
int scrolled =
handleScrollingCrossAxis(dy, recycler, state);
mViewCache.clear();
return scrolled;
} else {
int scrolled = handleScrollingMainAxis(dy);
mAnchorInfo.mPerpendicularCoordinate += scrolled;
mSubOrientationHelper.offsetChildren(-scrolled);
return scrolled;
}
}
Distance to scroll in pixels

36. @Override
public int scrollVerticallyBy(int dy,
RecyclerView.Recycler recycler,
RecyclerView.State state) {
if (isMainAxisDirectionHorizontal()) {
int scrolled =
handleScrollingCrossAxis(dy, recycler, state);
mViewCache.clear();
return scrolled;
} else {
int scrolled = handleScrollingMainAxis(dy);
mAnchorInfo.mPerpendicularCoordinate += scrolled;
mSubOrientationHelper.offsetChildren(-scrolled);
return scrolled;
}
}
The actual distance scrolled

37. Small dy
Only shift existing views
mRecyclerView.offsetChildrenVertical(dy);

38. Large dy

39. Large dy
Recycle views no
longer visible

40. Large dy
Fill appearing views

41. What does Recycle mean?

42. Two types of cache
in RecyclerView
1. Recycle
2. Scrap

43. Recycler
RecycledViewPool
1. Recycle

44. Recycler
RecycledViewPool
LayoutManager
recycler.recycleView(View)
1. Recycle

45. Recycler
RecycledViewPool
LayoutManager
recycler.recycleView(View)
1. Recycle
Considered as dirty

46. RecyclerRecycler
RecycledViewPool
Can be shared across multiple RecyclerViews

47. Recycler
Scrap Heap
2. Scrap

48. Recycler
Scrap Heap
LayoutManager
recycler.scrapView(View)
2. Scrap

49. Recycler
Scrap Heap
LayoutManager
detachAndScrapAttachedViews
RecyclerView
recycler.scrapView(View)
2. Scrap

50. How to retrieve aView?

51. LayoutManager Adapter
Recycler
recycler.getViewForPosition(int)

52. Case1. Found in scrap
Case2. Found in Recycled Pool
Case3. Not found in cache

53. LayoutManager Adapter
Recycler
Case1. Found in scrap

54. LayoutManager Adapter
Recycler
Case2. Found in Recycled Pool
adapter.bindViewHolder

55. LayoutManager Adapter
Recycler
Case2. Found in Recycled Pool

56. LayoutManager Adapter
Recycler
Case3. Not found in cache
adapter.createViewHolder

57. LayoutManager Adapter
Recycler
Case3. Not found in cache

58. Use scrap if you re-attach in a
same layout pass
Use recycle for views no longer
needed

59. scrollHorizontallyBy
Same with vertical except for the
direction

60. Now you implement basic functions.
Is it enough?

61. Could be useable... but NO.

62. scrollTo(position)
smoothScrollTo(position)
Fast Scrolling
Item Decorations
Item prefetch
Predictive Animations
There are a lot more…

63. scrollTo(position)
smoothScrollTo(position)
Fast Scrolling
Item Decorations
Item prefetch
Predictive Animations
There are a lot more…

64. Predictive Animations

65. Off OnAdd aView

66. Off OnDelete aView

67. @Override
public boolean supportsPredictiveItemAnimations() {
return true;
}

68. onLayoutChildren
Real Layout
Pre-layout

69. In pre-layout
Lay out all the views currently visible and
additional views that are appearing (or
disappearing) after the animation

70. Pre-layout
Remaining
Appearing
Disappearing
To be inserted
at this positionVisible area

71. Real-layout
Remaining
Appearing
Disappearing
Visible area

72. Pre-layout
Remaining
Appearing
Disappearing
To be deletedVisible area

73. Real layout
Remaining
Appearing
Disappearing
Visible area

74. Now you know the basics of
building a custom LayoutManager

75. Resources
Source of default LayoutManagers
github.com/google/flexbox-layout
wiresareobsolete.com/2014/09/building-a-recyclerview-
layoutmanager-part-1/

76. Thank you!
Takeshi Hagikura
@thagikura