Skip to content

Play Store like sliding image with recyclerview

The material design has come all the way to its success easily in Android and Web recent years. An eminent part of apps in Play Store has adopted to material design and started competing with each other. Also, Google Play Store itself made a material inspired look on their app 3 years ago. They have well-utilized material concepts such as CardView, RecyclerView, Tab layout and Navigation drawer etc., This blog post which I am writing about is a cool and fluent concept they have implemented in their app recently.

Playstore sliding card

If you look at the gif image above, A cool animation is happening on the scroll of items which makes a great UX to the user. This is simply a horizontal recyclerview inside a wrapper card view. I haven’t seen the same implementation any apps other than play store itself. These gnaw made me implement the UX as they have and recently cracked it. I am not sure about that this is not the exact way play store used but I am sure that this will work same as expected.

Anatomy of design (isLookingForCode? skipThis() : readThis() );

The first assumption came to my mind was that they may have used Coordinator layout or frame layout inside the wrapper cardview which has a child recycler view. Since the coordinator layout has the ability to coordinate the views and their actions, I started implementing a custom coordinator behaviour class for the layout. Just for a verification that my assumption is correct, I tried to get the current layout attributes using ADB command

adb shell uiautomator dump

Surprisingly, layout attributes gave me a negative result! They have used only relative layout instead of coordinator layout. My assumption was wrong and This made things clearer that all those view translations are invoked by the recyclerview callbacks. For a smooth experience, Recyclerview has a snapping behaviour in order to put things well organized.

Take my code!

Recycler view of android support library contains some call back method for scrolling event. We can make use of this for listening to the scrolling of items in the recyclerview. First, let’s create a card view which contains a recyclerview with the horizontal layout manager.

  //Layout manager initialization

  linearLayoutManager = LinearLayoutManager(this,LinearLayoutManager.HORIZONTAL,false)

  //adapter class, where sample dataset is passed to constructor

  adapter= SampleAdapter(createSampleData())

  //Custom scroll listner where image view required to move is passed 
  //into constructor. 

  rv_main.apply{

  layoutManager=linearLayoutManager
  isNestedScrollingEnabled=true
  adapter=adapter
  addOnScrollListener(CustomScrollListner(iv_back))
}  

If you look at the play store implementation, You can see that they have skipped first two positions of recyclerview in order to make the background items of card view visible. It can be achieved simply by overriding the getItemCount() of adapter class and making the view holder’s itemview invisible for first two positions in onBindViewHolder() method. (You can also use different viewholder pattern for further modification of these empty item views)

      //Hiding first two views in holder for making the background
      //Imageview visible to user.

      override fun onBindViewHolder(holder: ViewHolder?, position: Int) {
      val view=holder?.itemView

      if(position==0||position==1){
      view?.let {
      it.visibility=View.INVISIBLE;
    }

  }
}

For animating the imageview in card background we have to create custom onScrollListener.class for recyclerview. Which we will be passing the views which should be animated, through the constructor. There will be an overridden call back method called onScrolled(RecyclerView recyclerView, int dx, int dy) which will be invoked during the scrolling of the recycler view. We can make use of it for view translations.

Method getHorizontalScrollOffset() of recycler view will give the horizontal scroll offset of the scroll. Using this we can control the view translation rate and alpha of the view. I have made a simple mathematical formula for controlling the translation and alpha in method getAlphaForView()

At last, If you look closely the scrolling of recycler view items, You can see that there is a snapping of items happening to the left end while scrolling. A default snapping is given to the recycler view library while it won’t result in the exact animation you wanted. Rubensousa in github has implemented gravity snap helper for this issue we can make use of it.

//Attaching the gravity snap helper to the recycler view

GravitySnapHelper(Gravity.START).attachToRecyclerView(rv_main)

That’s it now just run your code, You can see the same behaviour of play store in your app also. A sample project is implemented in my GitHub page.
You can refer it for more.
GitHub Project

Happy coding!

Published inAndroid

6 Comments

  1. hemanth hemanth

    HI,
    It’s pretty good to read the article. But I’m not aware of kotlin.
    Can you provide Java code?

    • Hi Hemanth, Stay tuned on the blog. I will provide gist/GitHub repo of Java code of the same.

    • This tutorial is for Android.

  2. Hello buddy. It was hard to find this site in google. It’s
    not even in top10. You should focus on strong backlinks from high authority sites in your niche.
    I know of a very effective free method to get
    high quality links and instant traffic. The best thing about this method is that you start getting clicks
    right away. For more details search in google for; masitsu’s tricks

  3. Hi. I see that you don’t update your page too often. I know that writing content is boring and
    time consuming. But did you know that there is a tool that allows you to
    create new posts using existing content (from article directories or other blogs from
    your niche)? And it does it very well. The new articles are high quality and pass the
    copyscape test. Search in google and try: miftolo’s tools

Leave a Reply

Your email address will not be published. Required fields are marked *