1. What is RecyclerView?

In Android 5.0 Lollipop, Android introduced RecyclerView widget. RecyclerView is flexible and efficient version of ListView. It is an container for rendering larger data set of views that can be recycled and scrolled very efficiently. RecyclerView is like traditional ListView widget, but with more flexibility to customizes and optimized to work with larger datasets. It uses a subclass of RecyclerView.Adapter for providing views that represent items in a data set.

Android SDK doesn’t includes the RecyclerView class. You need to add the following support library graddle dependency to project build.graddle file.

compile 'com.android.support:recyclerview-v7:24.0.0'

This guide explains how to use and customize RecyclerView in Android applications.

2. RecyclerView Example

In the course of this example we will download the data from JSON API, parse and display the items on RecyclerView. As you can notice in the following image, we will be using both RecyclerView and CardView for creating the App UI.

Following steps are required to complete the example:

Create a new Android Application and add the required graddle dependencies
Layout activity and add RecyclerView and ProgressBar
Layout the RecyclerView row item using CardView widget
Create a Custom Adapter for RecyclerView
Create main Activity to initialize UI, make HTTP Server request and render data on RecyclerView
Responding to RecyclerView click event

2.1. Creating Android Project

Let us begin with creating a new Android project in Android Studio. After the project is created, open app build.graddle file and add the following dependency libraries.

dependencies {
    compile 'com.android.support:recyclerview-v7:24.0.0'
    compile 'com.android.support:cardview-v7:24.0.0'
    compile 'com.squareup.picasso:picasso:2.5.2'
    // ...
}

Notice that, we have added RecyclerView, CardView support libraries and Picasso dependency module.

Picasso is an Open Source image loader library created and maintained by Square. It is among the powerful image download and caching library for Android.

Adding Internet Permission:

You might be aware that, Android application must declare all the permissions that are required for application. As we need to download the data form server, we need to add the INTERNET permission. Declare the following permission in AndroidManifest.xml file.

<uses-permission android:name="android.permission.INTERNET" />

2.2. Declaring Activity Layout

Let us now define the layout for Activity. We will add a RecyclerView and ProgressBar inside a RelativeLayout. The progress bar will be displayed while the data data from REST API is being downloaded.

Create a new file activity_main.xml inside layout resource folder and paste the following snippets.

<?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_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#f1f1f1"
    android:padding="12dp"
    tools:context="com.stacktips.recyclerview.MainActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerInParent="true"/>

    <ProgressBar
        android:id="@+id/progress_bar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"/>

</RelativeLayout>

2.3. RecyclerView Row Layout

In the example, each row item is represented by a CardView that hosts a RelativeLayout with an ImageView for the thumbnail and a TextView title. This layout resides in the file list_row.xml.

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:cardview="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="5dp"
    cardview:cardCornerRadius="2dp"
    cardview:cardElevation="3dp"
    cardview:cardUseCompatPadding="true">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/thumbnail"
            android:layout_width="match_parent"
            android:layout_height="180dp"
            android:layout_alignParentTop="true"
            android:scaleType="centerCrop"
            android:src="@drawable/placeholder"/>

        <TextView
            android:id="@+id/title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/thumbnail"
            android:layout_centerVertical="true"
            android:layout_marginLeft="12dp"
            android:maxLines="3"
            android:padding="8dp"
            android:textAppearance="@style/TextAppearance.AppCompat.Headline"
            android:textColor="#444"
            android:textSize="18dp"
            android:textStyle="bold"/>

    </RelativeLayout>
</android.support.v7.widget.CardView>

2.4. Creating RecyclerView Adapter

Android RecyclerView includes special kind of adapter which works pretty much same as traditional Android adapters but with additional functionalities.It uses a subclass of RecyclerView.Adapter for providing views that represent items in a data set.

The additional functionalities of RecyclerView.Adapter are:

It adds two new methods like onCreateViewHolder() and onBindViewHolder() to organize the code. You must override these two methods for inflate the view and to bind data to the view
Implements a ViewHolder by default. Conceptually RecyclerView.ViewHolder works same as the ViewHolder design pattern which we have been using with other Adapters
Takes care of the overhead of recycling and gives better performance and scrolling

Create a new class MyRecyclerViewAdapter.class and copy the following snippets.

public class MyRecyclerViewAdapter extends RecyclerView.Adapter<MyRecyclerViewAdapter.CustomViewHolder> {
    private List<FeedItem> feedItemList;
    private Context mContext;

    public MyRecyclerViewAdapter(Context context, List<FeedItem> feedItemList) {
        this.feedItemList = feedItemList;
        this.mContext = context;
    }

    @Override
    public CustomViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
        View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.list_row, null);
        CustomViewHolder viewHolder = new CustomViewHolder(view);
        return viewHolder;
    }

    @Override
    public void onBindViewHolder(CustomViewHolder customViewHolder, int i) {
        FeedItem feedItem = feedItemList.get(i);

        //Render image using Picasso library
        if (!TextUtils.isEmpty(feedItem.getThumbnail())) {
            Picasso.with(mContext).load(feedItem.getThumbnail())
                    .error(R.drawable.placeholder)
                    .placeholder(R.drawable.placeholder)
                    .into(customViewHolder.imageView);
        }

        //Setting text view title
        customViewHolder.textView.setText(Html.fromHtml(feedItem.getTitle()));
    }

    @Override
    public int getItemCount() {
        return (null != feedItemList ? feedItemList.size() : 0);
    }

    class CustomViewHolder extends RecyclerView.ViewHolder {
        protected ImageView imageView;
        protected TextView textView;

        public CustomViewHolder(View view) {
            super(view);
            this.imageView = (ImageView) view.findViewById(R.id.thumbnail);
            this.textView = (TextView) view.findViewById(R.id.title);
        }
    }
}

Notice that we have created an private ViewHolder class. The ViewHolder class contains the reference to the each of the ui widget on the row.

The FeedItem class is an model class that holds the parsed data retrieved from JSON API. Add a new new file FeedItem.java class in your project source folder and add the following.

public class FeedItem {
    private String title;
    private String thumbnail;

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getThumbnail() {
        return thumbnail;
    }

    public void setThumbnail(String thumbnail) {
        this.thumbnail = thumbnail;
    }
}

2.5. Activity Using RecyclerView

The resulting RecyclerView implementation for this example app consists of MainActivity initialization code. MainActivity creates the mRecyclerView instance, download and parse the data from JSON API, instantiates the adapter and plugs in the adapter to RecyclerView.

The focus of this tutorial is narrow down to RecyclerView, hence it doesn’t include any explanation for download and parse data from server. For learning how to download data from server, you may read Android Networking Tutorial.

Once data is downloaded, inside onPostExecute() we are initializing the adapter and setting adapter to RecyclerView instance by just calling setAdapter() method.

public class MainActivity extends AppCompatActivity {
    private static final String TAG = "RecyclerViewExample";
    private List<FeedItem> feedsList;
    private RecyclerView mRecyclerView;
    private MyRecyclerViewAdapter adapter;
    private ProgressBar progressBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mRecyclerView = (RecyclerView) findViewById(R.id.recycler_view);
        mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
        progressBar = (ProgressBar) findViewById(R.id.progress_bar);

        String url = "http://stacktips.com/?json=get_category_posts&slug=news&count=30";
        new DownloadTask().execute(url);
    }

    public class DownloadTask extends AsyncTask<String, Void, Integer> {

        @Override
        protected void onPreExecute() {
            progressBar.setVisibility(View.VISIBLE);
        }

        @Override
        protected Integer doInBackground(String... params) {
            Integer result = 0;
            HttpURLConnection urlConnection;
            try {
                URL url = new URL(params[0]);
                urlConnection = (HttpURLConnection) url.openConnection();
                int statusCode = urlConnection.getResponseCode();

                // 200 represents HTTP OK
                if (statusCode == 200) {
                    BufferedReader r = new BufferedReader(new InputStreamReader(urlConnection.getInputStream()));
                    StringBuilder response = new StringBuilder();
                    String line;
                    while ((line = r.readLine()) != null) {
                        response.append(line);
                    }
                    parseResult(response.toString());
                    result = 1; // Successful
                } else {
                    result = 0; //"Failed to fetch data!";
                }
            } catch (Exception e) {
                Log.d(TAG, e.getLocalizedMessage());
            }
            return result; //"Failed to fetch data!";
        }

        @Override
        protected void onPostExecute(Integer result) {
            progressBar.setVisibility(View.GONE);

            if (result == 1) {
                adapter = new MyRecyclerViewAdapter(MainActivity.this, feedsList);
                mRecyclerView.setAdapter(adapter);
            } else {
                Toast.makeText(MainActivity.this, "Failed to fetch data!", Toast.LENGTH_SHORT).show();
            }
        }
    }

    private void parseResult(String result) {
        try {
            JSONObject response = new JSONObject(result);
            JSONArray posts = response.optJSONArray("posts");
            feedsList = new ArrayList<>();

            for (int i = 0; i < posts.length(); i++) {
                JSONObject post = posts.optJSONObject(i);
                FeedItem item = new FeedItem();
                item.setTitle(post.optString("title"));
                item.setThumbnail(post.optString("thumbnail"));
                feedsList.add(item);
            }
        } catch (JSONException e) {
            e.printStackTrace();
        }
    }
}

3. Handle RecyclerView Click Event

Handling click event on RecyclerView is not as sweet as handling click listener in ListView or GridView. Android RecyclerView doesn’t provide any built in listeners or handy way of handling click events.

Let us declare a interface that specifies listener’s behavior. When user clicks on the RecyclerView the listener will return the FeedItem for the selected row.

public interface OnItemClickListener {
    void onItemClick(FeedItem item);
}

Now turn on to adapter and declare an instance variable of OnItemClickListener along with getter and setter methods.

private OnItemClickListener onItemClickListener;
public OnItemClickListener getOnItemClickListener() {
    return onItemClickListener;
}

public void setOnItemClickListener(OnItemClickListener onItemClickListener) {
    this.onItemClickListener = onItemClickListener;
}

In activity class, let set the click listener to adapter by calling setOnItemClickListener() method.

adapter.setOnItemClickListener(new OnItemClickListener() {
    @Override
    public void onItemClick(FeedItem item) {
        Toast.makeText(MainActivity.this, item.getTitle(), Toast.LENGTH_LONG).show();

    }
});

Now, attach the View.OnClickListener to each of the view you want to handle click. Add the following snippet to onBindViewHolder of the RecyclerView.Adapter. When ImageView or TextView is clicked, we will receive the event back to the caller activity.

View.OnClickListener listener = new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        onItemClickListener.onItemClick(feedItem);
    }
};
customViewHolder.imageView.setOnClickListener(listener);
customViewHolder.textView.setOnClickListener(listener);

4. Download Source Code

Download

AndroidL ListView

Written by: Nilanchala

A blogger, a bit of tech freak and a software developer. He is a thought leader in the fusion of design and mobile technologies. He is the author of Xamarin Mobile Application Development for Android Book (goo.gl/qUZ0XV3), DZone MVB and founder of stacktips.com.

Discussions

Please note: We reserve the right to delete comments that contains snarky remarks, offensive or off-topic. To know more read our comments policy.

500

newest oldest most voted

Raichand Ray

Hi,
Please look at this nice Tutorial also

https://raichand-java.blogspot.in/2017/12/createretrieveupdate-and-delete-row-in.html
Thanks
Raichand

Dzulhafiz Abdul Rahim

Hi Nilanchala, I had just starting on programming and still learning a lot regarding java classes and etc. Right now I has already make an application with nested RecyclerView from a fragment but I would like to implement your way of onClick. Right now I have 2 RecyclerView adapter which… Read more »

Diana Florez

Thanks a lot!!!

rajender sharma

thanks lot bro

Joseph Joey

Nice tutorial. Can you implement json parsing with recyclerview card view combination? Thanks again.

Nilanchala Panigrahy

Thanks Joseph. This tutorial does exactly that.

Joseph Joey

That’s cool. How can one do a similar thing with volley?

Andy

PLEASE HELP!!! when i try to open existing project code. Android studio throw a message Frameworks detected in android studio. How can i solve this ?

Nilanchala Panigrahy

mRecyclerView.setLayoutManager() should work. In any case are you declaring RecyclerView inside ScrollView?

Nilanchala Panigrahy

Unfortunately we don’t have any tutorial that explains spinner inside recycler view.

Checkout http://stacktips.com/tutorials/android/android-spinner-example for spinner example

Mario German Agudelo

Nilanchala You appreciate your prompt response, effective and place the spinner in the recyclerview and I can select it, my problem is: 1. The value that I select the spinner if this is not saved in the database. 2. When I go to join the activity to check if it… Read more »

Nilanchala Panigrahy

You’re welcome. Happy that it helped you.

Ashok Bethina

Hi, I have implemented a tab layout with fragments. But the code here is implemented by activity. I have to show the RecyclerView in one of the fragments. Can u help me with this public class CollegeListFragment extends Fragment { public CollegeListFragment() { // Required empty public constructor } @Override… Read more »

Kenny Dabiri

Hi Zhang, are you able to implement onclick on the listview items?? if yes, Please kindly show me how. or @PostAuthor can also show me how. Thanks

Rana Saqib Manj

http://stackoverflow.com/questions/36498881/animate-gravity-layout-changes-of-floatingactionbutton-in-android?stw=2

I have a question … please reply me this question…

Akinyemi john

Hi JavaTechig am a fan of yours and i really enjoyed your tutorials, i neead your help can you please make the rss feed item show in a webview when clicked by a user i have tried so many times but it is not working see my code belo for… Read more »

Davy

Make sure layout height’s cardview is not “match_parent” !!

Mehmet

Remove padding in mainActivity

Mario German Agudelo

Hello Nilanchala; What a great video thanks for sharing, I have the following question: I have an application in which the first activity are all of which want to launch a new activity which is a recyclerview, and that the selecionar one of the buttons show me the pertienen information,… Read more »

Mario German Agudelo

Hi Nilanchala, thanks for sharing your knowledge: I have an application which has two buttons on the main activity, the idea is that by giving click on them, I send activity recyclerview which would be the same for the two buttons, the only thing is that by giving click button… Read more »

Dennis Mubamba

i am get getting a no adapter error in my fragment activity, so how can i do this in a activity

Himanshu

@dennismubamba:disqus I am getting a error in main activity when i am calling adapter in main activity. please see this:
http://stackoverflow.com/questions/37566355/adapter-not-working-while-implementing-recyclerview-and-cardview?noredirect=1#comment62620177_37566355

yathavan yogarajah

i developed android Recyclerview, every row have 1progressbar then i click on the item call download function from MainActivity thats work fine. i need to update specific progressbar.

nikita

m followng material design. so cn i replace fragment on the onClick() of cardview with passing some data from recyclerview adapter class to the another fragment?

Oim Trust

how the way to call take it to the next class onClickListener. like the example, DetailActivity.java as the next class.
sorry, i’m a beginner…

Oim Trust

how to way to call them to the next class onClicklistener. like the example, DetailActivity.java as the next class.
Sorry, i’m beginner :-)

Jeff Chenko

Thanks for this tutorial ! I have an issue i think it’s my php file. It would be great if i can have the tutorial php code to compare with mine.

Nilanchala Panigrahy

I think, something wrong with your list row layout.

Nilanchala Panigrahy

I think you’re skipping the following code.

mRecyclerView.setLayoutManager(new LinearLayoutManager(this));

sumit

thanks for the reply, there was some problem with api but i got it now.

Shruti Loddha

You should try this…it was working for me.

Vishal Bhandare

Thank you for this tutorial. It really helps a lot. Can you please explain a bit about the use of Card View in this? & Could you please tell me to do the same in eclipse?

Babu

abe bhai eclipse deprecate ho chuka hai,
studio pe kaam kar.

Nilanchala Panigrahy

I am in process of updating all examples in this blog to Android studio project.

Babu

Perfect. All the best. (y)

Paul

Great tutorial! I didn’t need anything fancy just something short and sweet. This was perfect!

Patient Baïse

Hi,

Nilanchala

i use this code but in some items I can not get the images.
Can I know why?
This is a problem of size jpg or png format?

And also I can not have more than 10 items. What should I do?

Patient Baïse

I use the code but in some items I can not get the images.
Can I know why?
This is a problem of size jpg or png format?
My link is :
http://universfm.org/api/get_category_posts/?id=278
Thank you

Denis Shahov

Hello from Urkaine! Your tutorial is incrediable, perfect!!!!!!!!! THANK YOU !!!!!

Patient Baïse

Hi Nilanchala,

your tutorial is very good but on my projet, I can not get the images in some items .
Can I know why?
my link is :

http://universfm.org/api/get_category_posts/?id=278

dreamcorp

just add this to xml of cardview
card_view:cardUseCompatPadding=”true”

Krishna Dev

i got this code from github, but it’s show configuration error, i cannot solve that error please help me…. anyone…

Vince

JavaTechig this tutorial is amazing would you perhaps give a link with the back-end code, thanks in advance :)

jaydeep

hii.. Nilanchala, I have added RecyclerView in my material tabs fragment, i am trying to add youtube channel videos using pagination to that recycler view from youtube data api v3 but i don’t know why my code dosen’t work … please can you tell me how can i solve this,… Read more »

jaydeep

hii Nilanchala, I have added recyclerView in material tabs , i am using volley to make request.. in my app i try to add list of videos from youtube channel using youtube data api v3, but something went wrong in implementing pagination in recyclerview… please can you tell me how… Read more »

Kanyerezi Patrick

hey man thanks for the tutorial. Am getting the error “RecyclerView﹕ No adapter attached; skipping layout” in my logcat and the application loads upto when it crushes . Wondering what am doing wrong , thanks.

Nilanchala Panigrahy

I guess you’re missing to call following line

mRecyclerView.setLayoutManager(new LinearLayoutManager(this));

Patient Baïse

Hi, when I have no internet connection, the application stops
can you helps me?

Rakhi Dhavale

Thanks for this post, helped me !!

Milad Moafi

hI @javatechig:disqus please provide a toturial that explain XML Parsing instead of JSON…i have some isuues with that.

Nilanchala Panigrahy

Checkout this tutorial explains How to Use Picasso Image Loader Library in Android

Nilanchala Panigrahy

For click event handling in RecyclerView, you won’t find any standard call back such as onListItemClick, you have to write your own click event handling in adapter class. Find a sample here that might help https://github.com/npanigrahy/Android-Lollipop-Navigation-Drawer/blob/master/app/src/main/java/com/javatechig/apps/nav/NavigationDrawerAdapter.java Secondly, for passing data such as array list it is recommended not to pass… Read more »

JavaTechig

Checkout the sample code. Will soon post the tutorial on Javatechig.

https://github.com/npanigrahy/Android-Lollipop-Navigation-Drawer

JavaTechig

Download Picasso image downloader library.

Lara Ruffle Coles

Shouldn’t you be using this bit of code instead in the dependancies section? :-)

From: http://square.github.io/picasso/
Code: compile ‘com.squareup.picasso:picasso:2.5.2’

JohanToc

Hi!

How works this sentences?

return (null != feedItemList ? feedItemList.size() : 0);

I don`t undertand exactly what.
Thanks! Great article.

javatechig

Here i amusing ternary operation to make a null check. Otherwise it will throw a NullPointerException when feedItemList is null. The above code is same as

if(feedItemList !=null){
return feedItemList.size();
}else{
return 0;
}

Please read more about ternary operator here http://en.wikipedia.org/wiki/%3F:#Java

JohanToc

Thanks!

JavaTechig

:-)

EDay

Thank you very much for posting this. I’ve been working literally all day trying to figure out how to refresh my RecycleView in a fragment with an AsyncTask. The second section above gave me what I needed, particularly resetting the adapter in onPostExecute.

javatechig

We are glad it helped you.

Aviv

Thanks!
But instead of
inflate(R.layout.list_row, null);
use
inflate(R.layout.list_row, viewGroup, false);

Thanks a lot!! Everything works perfect

Luizje

You need to run it on a Android OS. So if you don’t want to use a android device you have to run it on a android emulator.. You can use the normal android emulator or you can take a look at Genymotion (in my opinion a better emulator than… Read more »

javatechig

Thanks @Luizje

1. What is RecyclerView?

2. RecyclerView Example

2.1. Creating Android Project

Adding Internet Permission:

2.2. Declaring Activity Layout

2.3. RecyclerView Row Layout

2.4. Creating RecyclerView Adapter

2.5. Activity Using RecyclerView

3. Handle RecyclerView Click Event

4. Download Source Code

Written by: Nilanchala

Read Next..

Discussions