Now you can Subscribe using RSS

Submit your Email

Saturday

Android RecyclerView Row Slide in Animation on Scroll

Vishal Shrestha
Animations in your Android App have a huge impact on how the user perceive your app. Creating Animations have been constantly simplified with newer APIs that Google provides. Feel free to check out our tutorial on enabling default Animation of visibility changes. Now, on to the matter at hand: Animating the rows of RecyclerView when Scrolled.
You might have seen the slide in from right animation in the Official Android Apps from Google like Google Plus or Google News stand, it looks very intuitive and pleasing. Be joyful because implementing that slide in animation in your own Apps' RecyclerView is very easy and can be done in just around 10 lines of code(5 Lines of Java, 5 Lines of XML)! So lets get started:



Slide in Animation on Scroll in RecyclerView
  1. First of all we will create a slide in Animation in XML that we will use.
  2. In RecyclerViews' bindViewHolder we will set this as the Animation for each view.

1. Creating the Slide in Animation in XML:
Right click on your resources folder and create a new XML resource, select the resource type as Animation and name the file slide_in_right. Then just add the following code in the file:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="@android:integer/config_mediumAnimTime"
        android:fromXDelta="100%p"
        android:toXDelta="0" />
</set>


We are just defining the animation that will slide our row view from right to left. 100%p means the row will slide in from where the parent ends. 0 mean its ending x position will the 0.

2. Using the slide in animation in onBindViewHolder
Now that we have already defined our animation, we just need to apply in to our rows of the recyclerView. We can easily do that whenever we need to bind new rows to the RecyclerView. Add the following code in onBindViewHolder.
if (position > lastPosition) {
            Animation animation = AnimationUtils.loadAnimation(mContext, R.anim.slide_in_right);
            viewToAnimate.startAnimation(animation);
            lastPosition = position;
}

This code just checks if the position of the row to be displayed is greater that the last row that has been already displayed, if so we just apply our animation to the view. Here lastPosition is a global variable that is initially set to -1 and we can also set the animation variable as global variable depending on your requirements.

We are done! now just add the changes mentioned above to your code, run you app and see beautiful slide in animations in the rows of your RecyclerView whenever you scroll the recyclerView. Feel free to let me know if you have any issues.

Vishal Shrestha / Author & Founder

A developer by profession, a born Adventurer. I mainly do Android but like to get my hands dirty with web development and a little bit of Python. I would't rather go on a Trek than a party and you can find me having a few rounds with the heavy bag to let out the steam ;)

WORK

Research and Development at : Ekghanti

Mobile Technology Lead at : Vimvox Lab

For Business info : My Portfolio Site

0 comments:

Post a Comment

Coprights @ 2017 | The Code City by Vishal Shrestha Vishal Shrestha