RecyclerView Item animation is one of the modern features that we can add to our Android app, the basic working of this is when any user opens our app then the data items that are present in recycler view will animate and then it will show to the user.it is so easy to implement also it can enhance the user experience. A sample video is given below to get an idea about what we will do in this article.
Step-by-Step Implementation
Step 1: Create a New Project in Android Studio
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.
Step 2: Working with the activity_main.xml file
Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file.
XML
<? xml version = "1.0" encoding = "utf-8" ?> < androidx.constraintlayout.widget.ConstraintLayout     android:layout_width = "match_parent"     android:layout_height = "match_parent"     tools:context = ".MainActivity" >       < androidx.recyclerview.widget.RecyclerView         android:id = "@+id/recycler_view"         android:layout_width = "0dp"         android:layout_height = "0dp"         android:layout_marginTop = "16dp"         android:layout_marginBottom = "76dp"         android:clipToPadding = "false"         android:padding = "16dp"         android:scrollbarStyle = "outsideOverlay"         android:scrollbars = "vertical"         app:layout_constraintEnd_toEndOf = "parent"         app:layout_constraintStart_toStartOf = "parent"         app:layout_constraintTop_toTopOf = "parent"         app:layout_constraintBottom_toTopOf = "@id/grid_layout" />       < GridLayout         android:id = "@+id/grid_layout"         android:layout_width = "match_parent"         android:layout_height = "wrap_content"         android:rowCount = "2"         android:columnCount = "2"         android:alignmentMode = "alignMargins"         android:columnOrderPreserved = "false"         android:padding = "16dp"         app:layout_constraintBottom_toBottomOf = "parent"         app:layout_constraintTop_toBottomOf = "@id/recycler_view"         app:layout_constraintStart_toStartOf = "parent"         app:layout_constraintEnd_toEndOf = "parent" >           < Button             android:id = "@+id/fall_down_button"             android:layout_width = "wrap_content"             android:layout_height = "wrap_content"             android:text = "Fall Down" />           < Button             android:id = "@+id/btn_slide_up"             android:layout_width = "wrap_content"             android:layout_height = "wrap_content"             android:text = "Slide Up" />           < Button             android:id = "@+id/btn_rotate_in"             android:layout_width = "wrap_content"             android:layout_height = "wrap_content"             android:text = "Rotate In" />           < Button             android:id = "@+id/btn_scale_in"             android:layout_width = "wrap_content"             android:layout_height = "wrap_content"             android:text = "Scale In" />       </ GridLayout >     </ androidx.constraintlayout.widget.ConstraintLayout > |
Step 3:Â
To Demonstrate the different Animations we have used the buttons for that and we are triggering the animations when buttons are clicked, you can also add a default functionality in which when the user opens the app then the animation will be showed added this feature by adding comments in the code below
MainActivity.java
Java
package com.android.gfgapp;   import android.os.Bundle; import android.view.View; import android.view.animation.AnimationUtils; import android.view.animation.LayoutAnimationController; import android.widget.Button;   import androidx.appcompat.app.AppCompatActivity; import androidx.recyclerview.widget.LinearLayoutManager; import androidx.recyclerview.widget.RecyclerView;   import java.util.ArrayList; import java.util.List;   // why implementing View.OnClickListener because // it can handle click events for views in the activity public class MainActivity extends AppCompatActivity implements View.OnClickListener {       private RecyclerView recyclerView;     private RecyclerViewAdapter recyclerViewAdapter;     private List<String> dataStructure = new ArrayList<>();       private Button fallDownButton, slideUpButton, rotateInButton, scaleInButton;       @Override     protected void onCreate(Bundle savedInstanceState) {         super .onCreate(savedInstanceState);         setContentView(R.layout.activity_main);           // Initialize RecyclerView That we         // created on activity_main.xml file         recyclerView = findViewById(R.id.recycler_view);         recyclerView.setLayoutManager( new LinearLayoutManager( this ));           dataStructure.add( "Array" );         dataStructure.add( "Linked List" );         dataStructure.add( "Stack" );         dataStructure.add( "Queue" );         dataStructure.add( "Tree" );         dataStructure.add( "Graph" );         dataStructure.add( "Hash Table" );         dataStructure.add( "Heap" );         dataStructure.add( "Trie" );         dataStructure.add( "Segment Tree" );           // Seting the adapter         recyclerViewAdapter = new RecyclerViewAdapter( this , dataStructure);         recyclerView.setAdapter(recyclerViewAdapter);           // Set animation for RecyclerView(This is by Default Animation)         // When User Opens the app         // then this animation will be shown         int resId = R.anim.layout_animation_fall_down;         LayoutAnimationController animation = AnimationUtils.loadLayoutAnimation( this , resId);         recyclerView.setLayoutAnimation(animation);         recyclerViewAdapter.notifyDataSetChanged();           // Initialize buttons of activity_main.xml file         fallDownButton = findViewById(R.id.fall_down_button);         slideUpButton = findViewById(R.id.btn_slide_up);         rotateInButton = findViewById(R.id.btn_rotate_in);         scaleInButton = findViewById(R.id.btn_scale_in);           // Seting click listeners for buttons(When User Clicks)         fallDownButton.setOnClickListener( this );         slideUpButton.setOnClickListener( this );         rotateInButton.setOnClickListener( this );         scaleInButton.setOnClickListener( this );     }       @Override     public void onClick(View v) {         int resId = 0 ;           switch (v.getId()) {             case R.id.fall_down_button:                 resId = R.anim.layout_animation_fall_down;                 break ;             case R.id.btn_slide_up:                 resId = R.anim.layout_animation_slide_up;                 break ;             case R.id.btn_rotate_in:                 resId = R.anim.layout_animation_rotate_in;                 break ;             case R.id.btn_scale_in:                 resId = R.anim.layout_animation_scale_in;                 break ;         }           if (resId != 0 ) {             // Set animation for RecyclerView             LayoutAnimationController animation = AnimationUtils.loadLayoutAnimation( this , resId);             recyclerView.setLayoutAnimation(animation);             recyclerViewAdapter.notifyDataSetChanged();         }     } } |
Step 4: Cretaed one java class as RecyclerViewAdapter.java to manage and control the data displayed in the RecyclerView. Added ViewHolders By RightClicking > Implement Methods and all
Â
RecyclerViewAdapter.java
Java
package com.android.gfgapp;   import android.content.Context; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.TextView;   import androidx.annotation.NonNull; import androidx.recyclerview.widget.RecyclerView;   import java.util.List;   public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.ViewHolder> {       // Declaring the private member variables     private Context context;     private List<String> dataStructure;       // Constructor for RecyclerViewAdapter right click and you can add that     public RecyclerViewAdapter(Context context, List<String> dataStructure) {         this .context = context;         this .dataStructure = dataStructure;     }       @NonNull     @Override     public ViewHolder onCreateViewHolder( @NonNull ViewGroup parent, int viewType) {         // Inflating the item layout and returning a new ViewHolder object         View view = LayoutInflater.from(context).inflate(R.layout.item_layout, parent, false );         return new ViewHolder(view);     }       @Override     public void onBindViewHolder( @NonNull ViewHolder holder, int position) {         // Binding data to the view holder         holder.colorTextView.setText(dataStructure.get(position));     }       @Override     public int getItemCount() {         // Returning the number of items in the data list         return dataStructure.size();     }       public static class ViewHolder extends RecyclerView.ViewHolder {           // Declaring view holder's         // private member variables         TextView dsa;           // Constructor for ViewHolder         public ViewHolder( @NonNull View itemView) {             super (itemView);             // Initializing the view holder's             // private member variables             dsa = itemView.findViewById(R.id.dsa);         }     } } |
layout file that is used in RecyclerViewAdapter class above
item_layout.xml
XML
<? xml version = "1.0" encoding = "utf-8" ?> < LinearLayout     android:layout_width = "match_parent"     android:layout_height = "wrap_content"     android:padding = "16dp"     android:orientation = "horizontal" >         < TextView         android:id = "@+id/dsa"         android:layout_width = "wrap_content"         android:layout_height = "wrap_content"         android:textSize = "18sp"         android:textStyle = "bold" />     </ LinearLayout > |
Step 5:
First Create one Android Resource Directory by right-clicking on the res folder like that.
Â
All the animation that is used in the video
fall_down.xml:
XML
<? xml version = "1.0" encoding = "utf-8" ?>     android:interpolator = "@android:anim/decelerate_interpolator" >       < translate         android:fromYDelta = "-50%"         android:toYDelta = "0"         android:duration = "500" />       < alpha         android:fromAlpha = "0"         android:toAlpha = "1"         android:duration = "500" />       < scale         android:fromXScale = "105%"         android:fromYScale = "105%"         android:toXScale = "100%"         android:toYScale = "100%"         android:pivotX = "50%"         android:pivotY = "50%"         android:duration = "500" />   </ set > |
fall_down_animation.xml:
XML
<? xml version = "1.0" encoding = "utf-8" ?>     < translate         android:duration = "500"         android:fromYDelta = "-50%"         android:toYDelta = "0%" />     < alpha         android:duration = "500"         android:fromAlpha = "0.0"         android:toAlpha = "1.0" /> </ set > |
layout_animation_fall_down.xml:
XML
<? xml version = "1.0" encoding = "utf-8" ?> < layoutAnimation     android:animation = "@anim/fall_down"     android:animationOrder = "normal"     android:delay = "30%" /> |
layout_animation_rotate_in.xml:
XML
<? xml version = "1.0" encoding = "utf-8" ?> Â Â Â Â android:animation = "@anim/rotate_in_animation" Â Â Â Â android:delay = "20%" /> |
layout_animation_scale_in.xml:
XML
<? xml version = "1.0" encoding = "utf-8" ?> Â Â Â Â android:animation = "@anim/scale_in_animation" Â Â Â Â android:delay = "20%" /> |
layout_animation_slide_up.xml:
XML
<? xml version = "1.0" encoding = "utf-8" ?> Â Â Â Â android:animation = "@anim/fall_down_animation" Â Â Â Â android:delay = "20%" /> |
rotate_in_animation.xml:
XML
<? xml version = "1.0" encoding = "utf-8" ?>     < rotate         android:duration = "500"         android:fromDegrees = "180"         android:interpolator = "@android:anim/accelerate_decelerate_interpolator"         android:pivotX = "50%"         android:pivotY = "50%"         android:toDegrees = "0" />     < alpha         android:duration = "500"         android:fromAlpha = "0.0"         android:toAlpha = "1.0" /> </ set > |
scale_in_animation.xml:
XML
<? xml version = "1.0" encoding = "utf-8" ?>     < scale         android:duration = "500"         android:fromXScale = "0"         android:fromYScale = "0"         android:pivotX = "50%"         android:pivotY = "50%"         android:toXScale = "1"         android:toYScale = "1" />     < alpha         android:duration = "500"         android:fromAlpha = "0.0"         android:toAlpha = "1.0" /> </ set > |
slide_up_animation.xml:
XML
<? xml version = "1.0" encoding = "utf-8" ?>     < translate         android:duration = "500"         android:fromYDelta = "100%"         android:toYDelta = "0%" />     < alpha         android:duration = "500"         android:fromAlpha = "0.0"         android:toAlpha = "1.0" /> </ set > |
Project Structure
Â