How to create horizontal Animated recyclerview like google play store ? Not common horizontal recyclerview

Question

When a user will scroll Recyclerview from right to left at the same time the first view will disappear with fade-out animation according to scrolling and background view also be parallax like google play store app.

It will animated recylerview, "not the normal horizontal recyclerview". You can see this in google play, not every time, it appears occasionally

Does this answer your question? [How to build a Horizontal ListView with RecyclerView?](https://stackoverflow.com/questions/28460300/how-to-build-a-horizontal-listview-with-recyclerview) — Abhishek kumar, Nov 14 '19 at 10:25
User ViewPager2 https://developer.android.com/jetpack/androidx/releases/viewpager2 with ListAdapter https://developer.android.com/reference/android/support/v7/recyclerview/extensions/ListAdapter and set orientation HORIZONATL. — aslamhossin, Nov 14 '19 at 10:31
@Abhishekkumar Thanks for your answer but this is not my solution. I want to make recyclerview like google play store animated recylerview, "not the normal horizontal recyclerview". You can see this in google play, not every time, it appears occasionally. — Mehedi Hasan, Nov 14 '19 at 10:33
That first item is most probably not a recyclerview item. Just animate it down when recyclerview is scrolled to the left. Have you tried anything yet? @MehediHasan — denvercoder9, Nov 14 '19 at 10:35

score 3 · Answer 1 · answered Nov 14 '19 at 13:02

According to what you have written, you basically wanted a horizontal recycler view which when scrolled has a fade animation to the header.

I had encountered the same problem and I solved it the following was. I used kotlin, during my development.

Firstly you need to add a scroll listener to your recycler view, i have made an extension function for scroll

inline fun RecyclerView.scroll(
        crossinline onScrolled: (RecyclerView, Int, Int) -> Unit = { it, dx, dy -> },
        crossinline onScrolledChanged: (RecyclerView, Int) -> Unit = { it, newState -> }
) {
    addOnScrollListener(object : RecyclerView.OnScrollListener() {
        override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
            super.onScrolled(recyclerView, dx, dy)
            onScrolled(recyclerView, dx, dy)
        }

        override fun onScrollStateChanged(recyclerView: RecyclerView, newState: Int) {
            super.onScrollStateChanged(recyclerView, newState)
            onScrolledChanged(recyclerView, newState)
        }
    })
}

Now create a divider item decorator for adding the padding to the first item

class DividerDecorator(val paddingStart: Float) : RecyclerView.ItemDecoration() {

    override fun getItemOffsets(outRect: Rect, view: View, parent: RecyclerView, state: RecyclerView.State) {
        super.getItemOffsets(outRect, view, parent, state)
        val position = parent.getChildAdapterPosition(view)
        if (position == 0 || position == 1) {
            outRect.left = paddingStart.toInt()
        }
        val lp = view.layoutParams as StaggeredGridLayoutManager.LayoutParams
        val spanIndex = lp.spanIndex
        if (position >= 0) {
                if(spanIndex==0) {
                    outRect.top = 13.px
                    outRect.bottom = 5.px
                }else{
                    outRect.top = 5.px
                    outRect.bottom = 13.px
                }



        }

    }
}

Now in your XML place add the image that you want as background and place the recycler view on top of that image.

Once you have done that you just need to add scroll extension to your recyclerview

 private var overallScroll = 0;

  recycler.scroll(onScrolled = { _, dx, _ ->
                    overallScroll += dx
                    backgroundView.animate()
                            .alpha(overallScroll.remap(padding))
                            .setInterpolator(LinearInterpolator())
                            .setDuration(0)
                            .start()
                })

remap function i have maded to calculate the proper alpha corresponding to scroll displacement.

fun Int.remap(offset:Float):Float{
    return 1-(this/offset)
}

and yes don't forget to make the recycler view horizontal.

score 1 · Answer 2 · answered Nov 14 '19 at 10:26

1

You can use RecyclerView with following layout manager

LinearLayoutManager layoutManager = new LinearLayoutManager(MainActivity.this, LinearLayoutManager.HORIZONTAL, false);
recyclerView.setLayoutManager(layoutManager);

answered Nov 14 '19 at 10:26

nayana bhoj

115
1
11

Thanks for your answer but this is not my solution. I want to make recyclerview like google play store animated recylerview, not the normal horizontal recyclerview. You can see this in google play not every time, it's appears occasionally. – Mehedi Hasan Nov 14 '19 at 10:32
1

Play store App screen is a collection of many RecyclerViews added horizontally or vertically inside a Nested ScrollView as per requirement. If you want you can add animations to Recyclerview refer https://stackoverflow.com/questions/35306779/how-to-apply-list-view-to-detail-view-animation-like-play-store-in-android/35306972 – nayana bhoj Nov 14 '19 at 10:36

How to create horizontal Animated recyclerview like google play store ? Not common horizontal recyclerview

2 Answers2