ViewPager2 how to change child drawing order?

Question

I am trying to implement ViewPager2 with overlapping items (carousel like component). Everything seems fine, but my center item get overlapped by next item. I want my center item be in front of any neighbour items.

See image below:

When you use ViewPager1 class we can override getChildDrawingOrder

@Override
    protected int getChildDrawingOrder(int childCount, int i)

See example solution here: link

But ViewPager2 cannot be derived and extented (since ViewPager2 class is final). What should I do?

You can try to add two lines in your dimens.xml file 26dp -42dp — Sanjay Chauhan, Jan 13 '20 at 06:27
Margins does not help much, since they donot change child draw order — Sergei Yendiyarov, Jan 13 '20 at 07:35

score 1 · Answer 1 · answered Jul 23 '20 at 17:53

Under the hood ViewPager2 contains a RecyclerView, so if you want to change the child drawing order you'll need to do it on the RecyclerView.

While it isn't an officially supported solution you can get access to the RecyclerView by asking for the first child on your view pager. See this comment:

https://issuetracker.google.com/issues/134912610#comment3

val recyclerView = viewPager2.getChildAt(0)

Once you have access to the RecyclerView you can add a ChildDrawingOrderCallback.

https://developer.android.com/reference/androidx/recyclerview/widget/RecyclerView.ChildDrawingOrderCallback

The code below works if you have exactly 3 pages and want the middle page to be drawn on top of the other pages.

  recyclerView.setChildDrawingOrderCallback { childCount, i ->
        when (i) {
            0 -> 0
            1 -> 2
            2 -> 1
            else -> throw IllegalStateException("Expected 3 items")
        }
    }

to support variable number of items I have implemented the 'setChildDrawingOrderCallback' as setChildDrawingOrderCallback { childCount, i -> IntArray(childCount) { it }.reversedArray()[i] } — ProjectDelta, Dec 02 '20 at 00:27

score 0 · Accepted Answer · answered Jan 15 '20 at 04:55

0

After some research I finally decided to get rid of ViewPager2 and get back to ViewPager1 since I can override getChildDrawingOrder function, then I followed this answer to achieve what I actually wanted. Hope when ViewPager2 will be soon finalized and they will make ViewPager2 class non final

answered Jan 15 '20 at 04:55

Sergei Yendiyarov

525
5
16

Checkout this repository i have added many `Transformation` for `Viewpager2` it will help you : https://github.com/askNilesh/Viewpager-Transformation – AskNilesh Jan 15 '20 at 05:14

ViewPager2 how to change child drawing order?

2 Answers2