Categories
Android

Android RecyclerView with example

Android RecyclerView
Android RecyclerView

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.

build.gradle(app)
1
2
3
4
5
6
7
8
9
 
 
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)

build.gradle(app)
1
2
3
4
5
6
7
8
9
10
 
 
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

activity_recycler_view.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
 
<?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

RecyclerViewActivity.java
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
 
 
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.

Call.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
 
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.

CallAdpter.java
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
 
 
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

calls_feed_layout.xml
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
 
 
<?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

By Abhishek Pachal

Abhishek is a developer cum blogger working more than 6 years. He loves programming especially open stack technologies. He has decent knowledge in Android development, Wordpress, MongoDB, Node.js and so on. Beside this Abhishek finds himself busy in painting, front-end designing.