In earlier tutorials we had learned implementation of RecyclerView. Now in this tutorial we will move to RecyclerView Animation part. The best thing of RecyclerView is that it provide inbuilt animations but the ListView and GridView don’t provide inbuilt animation. Now to implement the Animation in RecyclerView it provide some methods that we need to use:
In this tutorial, we are going to learn how to use implement RecyclerView Animation.
1. Create a new project in Eclipse by navigating to File ⇒ New Android ⇒ Application Project and fill required details. By default my activity is MainActivity.java.
2. Open strings.xml located under res=>values folder and add following strings.
1 2 3 4 5 6 7 8 9 |
<resources> <string name="app_name">RecyclerView Animation Demo</string> <string name="hello_world">Hello world!</string> <string name="action_settings">Settings</string> <string name="add">Add</string> <string name="delete">Delete</string> <string name="change">Change</string> </resources> |
3. Open your build.gradle file and below dependency to it.
1 2 3 4 5 |
dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) compile 'com.android.support:appcompat-v7:23.0.1' compile 'com.android.support:recyclerview-v7:23.0.1' } |
4. Create activity_main.xml and add the following code. In this xml file Toolbar is taken in place of ActionBar and 3 RadioButtons to do three operations on RecyclerView and finally take RecyclerView.
If you are new to RecyclerView visit my RecyclerView tutorial.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="fill_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" android:elevation="5dp" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> <!-- Radio Group for doing different action on Recycler View Item Click--> <RadioGroup android:id="@+id/radio_group" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:orientation="horizontal" android:padding="5dp"> <RadioButton android:id="@+id/add_row" android:layout_width="wrap_content" android:layout_height="wrap_content" android:checked="true" android:text="@string/add" /> <RadioButton android:id="@+id/delete_row" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/delete" /> <RadioButton android:id="@+id/change_row" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/change" /> </RadioGroup> <android.support.v7.widget.RecyclerView android:id="@+id/recycler_view" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="1px" /> </LinearLayout> |
5. Now for RecyclerView item row create list_item_row.xml and add views according to your requirement.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/row_item_text" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center_vertical" android:padding="25dp" android:text="Item" android:textColor="@android:color/white" android:textSize="18sp" /> </LinearLayout> |
6. Open your MainActivity.java and the following code to it. In this class we are adding items to RecyclerView and handling RadioButton functionality.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
package com.recyclerview_animation_demo; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.LinearLayoutManager; import android.support.v7.widget.RecyclerView; import android.support.v7.widget.Toolbar; import android.widget.RadioGroup; import java.util.ArrayList; public class MainActivity extends AppCompatActivity { private static RecyclerView_Adapter adapter; private static RadioGroup radio_group; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); radio_group = (RadioGroup) findViewById(R.id.radio_group);//find id of radio group setUpToolbar(); setUpRecyclerView(); onRadioButtonSelected(); } //set up toolbar private void setUpToolbar() { Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); } //Set up recycler view with 20 items private void setUpRecyclerView() { RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler_view); recyclerView.setHasFixedSize(true); recyclerView .setLayoutManager(new LinearLayoutManager(MainActivity.this)); ArrayList<String> arrayList = new ArrayList<>(); for (int i = 1; i <= 20; i++) arrayList.add("ITEM " + i); adapter = new RecyclerView_Adapter(MainActivity.this, arrayList); recyclerView.setAdapter(adapter);// set adapter on recycler view } //on radio button selection listener private void onRadioButtonSelected() { // Implementing checked change listener on radio group radio_group.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() { @Override public void onCheckedChanged(RadioGroup group, int checkedId) { // Finding ID/Position of radio group child int pos = radio_group.indexOfChild(findViewById(checkedId)); adapter.changeActionType(pos);//Change position in adapter class by passing current radio button position } }); } } |
7. Finally create RecyclerView_Adapter.java class and add the following code to it. Below are some methods that are used to operate RecyclerView:
1 2 3 4 5 |
private void deleteItem(int position) { arrayList.remove(position);//remove from list notifyItemRemoved(position);//notify recycler view about item deletion Toast.makeText(context, "Item deleted successfully.", Toast.LENGTH_SHORT).show();//Toast } |
1 2 3 4 5 |
private void addItem(int position) { arrayList.add(position, "NEW ITEM " + position);//add item to list on selected position notifyItemInserted(position);//notify recycler view about item insertion Toast.makeText(context, "Item added successfully.", Toast.LENGTH_SHORT).show();//Toast } |
1 2 3 4 5 |
private void changeItem(int position) { arrayList.set(position, "ITEM CHANGE " + position);//changing item name for selected position notifyItemChanged(position);//notify recycler view about item change Toast.makeText(context, "Item changed successfully.", Toast.LENGTH_SHORT).show();//Toast } |
Now add all these methods to RecyclerView adapter.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 |
package com.recyclerview_animation_demo; import android.content.Context; import android.support.v7.widget.RecyclerView; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.Toast; import com.recyclerview_animation_demo.RecyclerView_OnClickListener.OnClickListener; import java.util.ArrayList; /** * Created by SONU on 23/05/16. */ public class RecyclerView_Adapter extends RecyclerView.Adapter<DemoViewHolder> { // recycler view adapter private ArrayList<String> arrayList; private Context context; private int clickType = 0;//Variable for changing action type on item click public RecyclerView_Adapter(Context context, ArrayList<String> arrayList) { this.context = context; this.arrayList = arrayList; } @Override public DemoViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) { // This method will inflate the custom layout and return as view holder LayoutInflater mInflater = LayoutInflater.from(viewGroup.getContext()); ViewGroup mainGroup = (ViewGroup) mInflater.inflate( R.layout.list_item_row, viewGroup, false); return new DemoViewHolder(mainGroup); } @Override public void onBindViewHolder(DemoViewHolder demoViewHolder, int i) { demoViewHolder.title.setBackgroundColor(GenerateRandom_Color.generateRandomColor());//setting background color of text view demoViewHolder.title.setText(arrayList.get(i));//set Text // Implement click listener over layout demoViewHolder.setClickListener(new OnClickListener() { @Override public void OnItemClick(View view, int position) { switch (view.getId()) { case R.id.row_item_text: //On click type call respective method switch (clickType) { case 0: addItem(position); break; case 1: deleteItem(position); break; case 2: changeItem(position); break; } break; } } }); } @Override public int getItemCount() { return (null != arrayList ? arrayList.size() : 0); } //Method to change current action type void changeActionType(int position) { clickType = position; } //Delete item and notify item private void deleteItem(int position) { arrayList.remove(position);//remove from list notifyItemRemoved(position);//notify recycler view about item deletion Toast.makeText(context, "Item deleted successfully.", Toast.LENGTH_SHORT).show();//Toast } //Add item and notify item private void addItem(int position) { arrayList.add(position, "NEW ITEM " + position);//add item to list on selected position notifyItemInserted(position);//notify recycler view about item insertion Toast.makeText(context, "Item added successfully.", Toast.LENGTH_SHORT).show();//Toast } //Change item and notify item private void changeItem(int position) { arrayList.set(position, "ITEM CHANGE " + position);//changing item name for selected position notifyItemChanged(position);//notify recycler view about item change Toast.makeText(context, "Item changed successfully.", Toast.LENGTH_SHORT).show();//Toast } } |
Here the clickType is to check which RadioButton is selected for changing its value a method is created:
1 2 3 |
void changeActionType(int position) { clickType = position; } |
8. Finally, all done – now you add Animation to your RecyclerView..
Thanks. 🙂
Subscribe to us and get the latest news.