Android RecyclerView can be said as the extension of Android Listview with more efficiency. By the term efficiency it means RecyclerView is capable handling large set of data or list item while scrolling them. It performs great by limiting the size or number of views. It is useful while loading large amount of data via network.
One of the Android Recyclerview’s advantage lies in its display. It has in-built animation that handles the scrolling smoothly. It looks more great when it is used with CoordinatorLayout.
SET UP
However, we will learn how to implement a basic Android RecyclerView to some listed data. For that, first we need to set up our build.gradle. RecyclerView doesn’t come with android by default. For that we need to add android support library for design in our project. To do that go to your build.gradle(app level) and write the following lines in dependencies section.
|
1 2 3 4 5 |
dependencies{ compile 'com.android.support:design-v7:X.X.X' .......... .......... } |
Also you can add dependencies separately as ‘com.android.support:design-v7:X.X.X’ is the super-set of the materials includes in it. We will be required only two things here
- Android RecyclerView for the list
- CardView to display cards (looks good with RecyclerView)
|
1 2 3 4 5 6 |
dependencies{ compile 'com.android.support:recyclerview-v7:X.X.X' compile 'com.android.support:cardview-v7:X.X.X' .......... .......... } |
Here version v7:X.X.X is the version number. You can use whatever you have. We used v7:25.0.1 which is current now.
Alright, dependencies added. Next we will create our activity where we will show the RecyclerView. Here we have created RecyclerViewActivity. You can name it whatever you want.
Our layout file for RecyclerViewActivity will be
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_recycler_view" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.digitstory.testapplication.RecyclerViewActivity"> <android.support.v7.widget.RecyclerView android:background="#F2F2F2" android:id="@+id/recyclerView" android:layout_width="match_parent" android:layout_height="match_parent"/> </RelativeLayout> |
Here we have added our RecycerView in our layout. Before we move to our activity code we need to know about layout managers. Android RecyclerView comes with 3 built-in layout managers. They are –
- LinearLayoutManager to show list with vertically or horizontally scrolling.
- GridLayoutManager to show items in grid view (like photo albums).
- StaggeredGridLayoutManager to show items in staggered grid view.
We will use simply LinearLayoutManager here to implement vertically scrolling.Our list will be showing some call history with Call objects. Now let’s take a look at our RecyclerViewActivity
|
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 |
package com.digitstory.testapplication; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.support.v7.widget.LinearLayoutManager; import android.support.v7.widget.RecyclerView; import java.util.ArrayList; import java.util.List; public class RecyclerViewActivity extends AppCompatActivity { private RecyclerView recyclerView; private LinearLayoutManager linearLayoutManager; private List<Call> callsList; private CallsAdapter callsAdapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_recycler_view); recyclerView=(RecyclerView)findViewById(R.id.recyclerView); // Set Layout Manager linearLayoutManager=new LinearLayoutManager(this); recyclerView.setLayoutManager(linearLayoutManager); // Limiting the size recyclerView.setHasFixedSize(true); // Initialize list items init(); } private void init(){ callsList=new ArrayList<Call>(); // Initiating Adapter callsAdapter=new CallsAdapter(RecyclerViewActivity.this); recyclerView.setAdapter(callsAdapter); // Adding some demo data(Call Objects). // You can get them from your data server callsList.add(new Call("John","9:30 AM")); callsList.add(new Call("Rob","9:40 AM")); callsList.add(new Call("Peter","9:45 AM")); callsList.add(new Call("Jack","9:50 AM")); callsList.add(new Call("Bob","9:55 AM")); callsList.add(new Call("Sandy","10:00 AM")); callsList.add(new Call("Kate","10:05 AM")); callsList.add(new Call("Daniel","10:10 AM")); callsList.add(new Call("Roger","10:15 AM")); callsList.add(new Call("Sid","10:20 AM")); callsList.add(new Call("Kora","10:25 AM")); callsList.add(new Call("Nick","10:30 AM")); callsList.add(new Call("Rose","10:35 AM")); callsList.add(new Call("Mia","10:40 AM")); callsList.add(new Call("Scott","10:45 AM")); // Set items to adapter callsAdapter.setCallsFeed(callsList); callsAdapter.notifyDataSetChanged(); } } |
Now we will see our Call object. We have added a java class called Call.java i.e. our call object.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
package com.digitstory.testapplication; public class Call { private String callerName,callTime; public Call(String callerName, String callTime) { this.callerName = callerName; this.callTime = callTime; } public String getCallerName() { return callerName; } public String getCallTime() { return callTime; } } |
Finally, the adapter to show call lists.
|
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 |
package com.digitstory.testapplication; 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.TextView; import java.util.ArrayList; import java.util.List; public class CallsAdapter extends RecyclerView.Adapter<CallsAdapter.ViewHolder> { private List<Call> callsFeed=new ArrayList(); // Context is not used here but may be required to // perform complex operations or call methods from outside private Context context; // Constructor public CallsAdapter(Context context){ this.context=context; } public void setCallsFeed(List<Call> callsFeed){ this.callsFeed=callsFeed; } // Invoked by layout manager to replace the contents of the views @Override public void onBindViewHolder(ViewHolder holder, final int position) { Call call = callsFeed.get(position); holder.showCallDetails(call); } @Override public int getItemCount(){return callsFeed.size();} // Invoked by layout manager to create new views @Override public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { // Attach layout for single cell int layout = R.layout.calls_feed_layout; View v = LayoutInflater .from(parent.getContext()) .inflate(layout, parent, false); return new ViewHolder(v); } // Reference to the views for each items to display desired information public class ViewHolder extends RecyclerView.ViewHolder { private TextView callerNameTextView,callTimeTextView; public ViewHolder(View itemView) { super(itemView); // Initiate view callerNameTextView=(TextView)itemView.findViewById(R.id.callerName); callTimeTextView=(TextView)itemView.findViewById(R.id.callTime); } public void showCallDetails(Call call){ // Attach values for each item String callerName =call.getCallerName(); String callTime =call.getCallTime(); callerNameTextView.setText(callerName); callTimeTextView.setText(callTime); } } } |
And the layout for every single cell in the RecyclerView
|
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 |
<?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" app:cardCornerRadius="5dp" android:layout_margin="3dp" android:layout_width="match_parent" android:layout_height="wrap_content"> <LinearLayout android:padding="10dp" android:gravity="center_vertical" android:layout_width="match_parent" android:layout_height="wrap_content"> <ImageView android:src="@drawable/ic_call" android:layout_width="20dp" android:layout_height="20dp" /> <RelativeLayout android:layout_marginLeft="10dp" android:layout_width="wrap_content" android:layout_height="wrap_content"> <TextView android:textSize="18sp" android:textColor="#3498DB" android:id="@+id/callerName" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:textSize="14sp" android:textColor="#222" android:layout_marginTop="2dp" android:layout_below="@+id/callerName" android:id="@+id/callTime" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </RelativeLayout> </LinearLayout> </android.support.v7.widget.CardView> |
Here you can see we have used CardView which is a part of android.support.design. This makes RecyclerView more pretty.
Now just run the application and enjoy smooth scrolling of RecyclerView.
Hope you liked this article. Feel free to comment if you have any query. Share it to inspire us.
Reference : Google
