CODEWITHSUNDEEP
javaandroidandroid-recyclerviewandroid-animation
Mehedi Hasan
Mehedi Hasan

Reputation: 155

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

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

Screenshot from Google Play Store

Upvotes: 0

Views: 1203

Answers (2)

Rajat Beck
Rajat Beck

Reputation: 1633

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.

Upvotes: 3

nayana bhoj
nayana bhoj

Reputation: 115

You can use RecyclerView with following layout manager

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

Upvotes: 1

Related Questions