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 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
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
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 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 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 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 version = "1.0" encoding = "utf-8" ?>
< layoutAnimation
android:animation = "@anim/fall_down"
android:animationOrder = "normal"
android:delay = "30%" />
|
layout_animation_rotate_in.xml:
<? xml version = "1.0" encoding = "utf-8" ?>
android:animation = "@anim/rotate_in_animation"
android:delay = "20%" />
|
layout_animation_scale_in.xml:
<? xml version = "1.0" encoding = "utf-8" ?>
android:animation = "@anim/scale_in_animation"
android:delay = "20%" />
|
layout_animation_slide_up.xml:
<? xml version = "1.0" encoding = "utf-8" ?>
android:animation = "@anim/fall_down_animation"
android:delay = "20%" />
|
rotate_in_animation.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 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 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 >
|