How To Use RecyclerView in Android App to Display Large Amount of Items on Screen

RecyclerView in Android platform is an important component that is present often in many Android apps.

Just like ListView, Android recyclerview is used to display large amount of items on screen, but with improved performance and other benefits.

RecyclerView in Android uses an adapter to represent the information we want to show as list. In Android Listview we also use adapter, but Android recyclerview extends this concept and improves the way this adapter is used to increase the overall performance.

In this Android recyclerview tutorial, we’ll learn how to use recyclerview to manage and display items on screen.

Let’s Get Started

Add dependecy in build.gradle

compile 'com.android.support:support-v4:25.2.0'
compile 'com.android.support:design:25.2.0'
compile 'com.android.support:recyclerview-v7:25.2.0'

activity_main.xml

 <?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:paddingBottom="@dimen/activity_vertical_margin"
 android:paddingLeft="@dimen/activity_horizontal_margin"
 android:paddingRight="@dimen/activity_horizontal_margin"
 android:paddingTop="@dimen/activity_vertical_margin"
 tools:context="com.spaceo.recyclerviewdemo.MainActivity">
<android.support.v7.widget.RecyclerView
 android:id="@+id/recyclerview"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:scrollbars="vertical">
</android.support.v7.widget.RecyclerView>
</RelativeLayout>

row.xml

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical" android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:padding="10dp">
 <TextView
 android:id="@+id/txtName"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="ewrwerwerwer"
 android:maxLines="2"
 android:ellipsize="end"
 android:textSize="17sp"
 android:textColor="@android:color/black"
 />
 <TextView
 android:id="@+id/txtDate"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="erewrwer"
 />
</LinearLayout>

Model class

 public class NewsModel {
 private String title,date;
 public NewsModel(String title,String date){
 this.title=title;
 this.date=date;
 }
 public String getTitle() {
 return title;
 }
 public void setTitle(String title) {
 this.title = title;
 }
 public String getDate() {
 return date;
 }
 public void setDate(String date) {
 this.date = date;
 }
}

NewsAdapter.class

public class NewsAdapter extends RecyclerView.Adapter<NewsAdapter.MyViewHolder> {
private List<NewsModel> list;
private final OnItemClickListener listener;
public NewsAdapter(List<NewsModel> newsList,OnItemClickListener listener) {
this.list = newsList;
this.listener = listener;
}
@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View itemView = LayoutInflater.from(parent.getContext())
.inflate(R.layout.row, parent, false);
return new MyViewHolder(itemView);
}
@Override
public void onBindViewHolder(MyViewHolder holder, int position) {
holder.bind(list.get(position), listener);
}
@Override
public int getItemCount() {
return list.size();
}
public class MyViewHolder extends RecyclerView.ViewHolder {
public TextView title, date;
public MyViewHolder(View view) {
super(view);
title = (TextView) view.findViewById(R.id.txtName);
date = (TextView) view.findViewById(R.id.txtDate);
}
public void bind(final NewsModel item, final OnItemClickListener listener) {
title.setText(item.getTitle());
date.setText(item.getDate());
itemView.setOnClickListener(new View.OnClickListener() {
@Override public void onClick(View v) {
listener.onItemClick(item);
}
});
}
}
//Interface to handle click event
public interface OnItemClickListener {
void onItemClick(NewsModel item);
}
}

MainActivity

 package com.spaceo.recyclerviewdemo;
import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.DefaultItemAnimator;
import android.support.v7.widget.DividerItemDecoration;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {
 private List<NewsModel> newsList = new ArrayList<>();
 private RecyclerView recyclerView;
 private NewsAdapter mAdapter;
 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 recyclerView = (RecyclerView) findViewById(R.id.recyclerview);
 mAdapter = new NewsAdapter(newsList, new NewsAdapter.OnItemClickListener() {
 @Override
 public void onItemClick(NewsModel item) {
 //Click on item will open NewsDetail screen
 startActivity(new Intent(MainActivity.this,NewsDetailActivity.class).putExtra("title",item.getTitle()).putExtra("date",item.getDate()));
 }
 });
 //Set Layout to recyclerview
 RecyclerView.LayoutManager mLayoutManager = new LinearLayoutManager(this);
 //Set divider
 DividerItemDecoration dividerItemDecoration = new DividerItemDecoration(recyclerView.getContext(),DividerItemDecoration.VERTICAL);
 recyclerView.addItemDecoration(dividerItemDecoration);
 recyclerView.setLayoutManager(mLayoutManager);
 //Give animation
 recyclerView.setItemAnimator(new DefaultItemAnimator());
 recyclerView.setAdapter(mAdapter);
 setNewsData();
 }
 private void setNewsData() {
 //Set news data
 NewsModel news = new NewsModel("Gupshup brings Microsoft Cognitive Services Intelligent APIs to InterBot","05-12-2017");
 newsList.add(news);
 news = new NewsModel("Decks cleared for Snapdeal to land in Flipkart's basket","05-11-2017");
 newsList.add(news);
 news = new NewsModel("The Apple Watch could help doctors spot the leading cause of hear","05-10-2017");
 newsList.add(news);
 news = new NewsModel("Microsoft's new strategy: A deeper meaning","05-10-2017");
 newsList.add(news);
 news = new NewsModel("Mario Andretti vs. semi-autonomous tech on the track","05-09-2017");
 newsList.add(news);
 news = new NewsModel("What to bring on a plane if your laptop is banned","05-08-2017");
 newsList.add(news);
 news = new NewsModel("Risky to chase growth over unit economics: Liew, Lightspeed Venture Partners","05-07-2017");
 newsList.add(news);
 news = new NewsModel("OnePlus 5 shows up on GeekBench, beats Galaxy S8+ and iPhone 7 Plus","05-06-2017");
 newsList.add(news);
 news = new NewsModel("Google Pixel smartphone available at discount of Rs 13,000","05-05-2017");
 newsList.add(news);
 news = new NewsModel("Oppo planning to export handsets from India","05-04-2017");
 newsList.add(news);
 news = new NewsModel("OnePlus 5 smartphone is arriving this summer","05-04-2017");
 newsList.add(news);
 news = new NewsModel("Decoupled solutions with Hybris","05-03-2017");
 newsList.add(news);
 mAdapter.notifyDataSetChanged();
 }
}

NewsDetail.class

 package com.spaceo.recyclerviewdemo;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.widget.TextView;

/**
 * Created by Khyati on 12/5/17.
 */
public class NewsDetailActivity extends AppCompatActivity {
 private TextView txtTitle,txtDate;
 private String title,date;
 @Override
 protected void onCreate(@Nullable Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_detail);
 Bundle b=getIntent().getExtras();
 if(b!=null){
 title=b.getString("title");
 date=b.getString("date");
 }
 txtTitle=(TextView)findViewById(R.id.txtTitle);
 txtDate=(TextView)findViewById(R.id.txtDate);
 txtTitle.setText(title);
 txtDate.setText(date);
 }
}

activity_detail.xml

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical" android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:padding="10dp">
 <TextView
 android:id="@+id/txtTitle"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:textSize="18sp"
 android:textColor="@android:color/black"/>
 <TextView
 android:id="@+id/txtDate"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginTop="10dp"/>
</LinearLayout>

AndroidManifest.xml

 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
 package="com.spaceo.recyclerviewdemo">
 <application
 android:allowBackup="true"
 android:icon="@mipmap/ic_launcher"
 android:label="@string/app_name"
 android:supportsRtl="true"
 android:theme="@style/AppTheme">
 <activity android:name=".MainActivity">
 <intent-filter>
 <action android:name="android.intent.action.MAIN" />
 <category android:name="android.intent.category.LAUNCHER" />
 </intent-filter>
 </activity>
 <activity android:name=".NewsDetailActivity"/>
 </application>
</manifest>

And done!

Once you successfully implement this code, you can easily display large amount of items easily on screen. Although, if an app is complex, then implementing recyclerview may become bit difficult. So, if you’re not completely aware with it, you can consult with Android app development company to implement the Android recyclerview correctly.

Get a free copy of Android Recycler View Demo from Github.