<h3 style="text-align: left;"><span style="color: #333399;"><strong>RecyclerView</strong></span></h3>
<p style="text-align: left;">The<span style="color: #3366ff;"> <span style="color: #008000;"><strong>RecyclerView</strong></span></span> widget is a more advanced and flexible version of <span style="color: #008000;"><strong>ListView</strong></span>. This widget is a container for displaying large data sets that can be scrolled very efficiently by maintaining a limited number of views.</p>
<p style="text-align: left;">Here I would demonstrate you a working example of RecyclerView, with some basic functionality. The RecyclerView we are going to design contains a list of books displaying the book Image, name, and author.</p>
<p>Download <span style="color: #0000ff;"><strong>Github</strong></span> code from <span style="color: #0000ff;"><a style="color: #0000ff;" href="https://github.com/arunk7839/RecyclerViewExample"><strong>Here</strong></a>.</span></p>
<p><amp-youtube layout="responsive" width="1200" height="900" data-videoid="A8MmmRm34K4" title="Android RecyclerView Example"><a placeholder href="https://youtu.be/A8MmmRm34K4"><img src="https://i.ytimg.com/vi/A8MmmRm34K4/hqdefault.jpg" layout="fill" object-fit="cover" alt="Android RecyclerView Example"></a></amp-youtube></p>
<h3 style="text-align: left;"><strong><span style="color: #333399;">Creating New Project</span></strong></h3>
<p style="text-align: left;"><span style="color: #000000;"><strong>1. </strong></span> In Android Studio, go to <span style="color: #008000;"><strong>File </strong><strong>⇒</strong><strong> New Project</strong></span> and fill all the details required to create a new project. When it prompts to select a default activity, select <span style="color: #008000;"><strong>Blank Activity</strong></span> and proceed.</p>
<p style="text-align: left;"><strong>2. </strong>Open <span style="color: #008000;"><strong>build.gradle</strong></span> and add recycler view dependency <span style="color: #0000ff;"><strong>com.android.support:recyclerview-v7:26.1.0</strong> </span>and rebuild the project.</p>
<p style="text-align: left;"><strong>Build.gradle</strong></p>
<pre>dependencies {
 implementation fileTree(dir: 'libs', include: ['*.jar'])
 <span style="color: #008000;"> //<strong>RecyclerView</strong></span>
 implementation <span style="color: #0000ff;"><strong>'com.android.support:recyclerview-v7:26.1.0'</strong></span>
 
}</pre>
<p style="text-align: left;"><strong>3. </strong>I have refracted <span style="color: #008000;"><strong>activity_main.xml</strong></span> by the name<span style="color: #008000;"><strong> activity_booklist.xml</strong></span> in which I have added one <span style="color: #008000;"><strong>RecyclerView</strong></span> with the following basic properties.</p>
<p style="text-align: left;"><span style="color: #0000ff;"><strong>activity_booklist.xml</strong></span></p>
<pre><;?xml version="1.0" encoding="utf-8"?>;
<;RelativeLayout 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"
 tools:context="com.example.lenovo.recyclerview.activity.BookListActivity">;

 <;android.support.v7.widget.RecyclerView
 android:id="@+id/recycler_view"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:scrollbars="vertical">;

 <;/android.support.v7.widget.RecyclerView>;

<;/RelativeLayout>;</pre>
<h3 style="text-align: left;"><span style="color: #333399;"><strong>Writing the Adapter Class</strong></span></h3>
<p style="text-align: left;">After adding the RecyclerView widget, let’s start writing the adapter class to render the data. The RecyclerView adapter is same as ListView but the override methods are different.</p>
<p style="text-align: left;"><strong>4. </strong>Create a class named <span style="color: #008000;"><strong>Book.java</strong></span> and declare bookName, authorName and ImageResource(for Image). Also add the getter/setter methods to each variable.</p>
<p style="text-align: left;"><span style="color: #0000ff;"><strong>Book.java </strong></span></p>
<pre>package com.example.lenovo.recyclerview.model;

public class Book {
 String authorName;
 String bookName;
 int imageResource;

 public Book(String authorName, String bookName, int imageResource) {
 this.authorName = authorName;
 this.bookName = bookName;
 this.imageResource = imageResource;
 }

 public String getAuthorName() {
 return authorName;
 }

 public void setAuthorName(String authorName) {
 this.authorName = authorName;
 }

 public String getBookName() {
 return bookName;
 }

 public void setBookName(String bookName) {
 this.bookName = bookName;
 }

 public int getImageResource() {
 return imageResource;
 }

 public void setImageResource(int imageResource) {
 this.imageResource = imageResource;
 }
}</pre>
<p style="text-align: left;"><strong>5. </strong>Create a layout XML named <span style="color: #008000;"><strong>book_list_row.xml</strong></span> with the below code. This layout file shows a single row in recycler view by displaying book<strong><span style="color: #008000;"> name, image, and author name</span>.</strong></p>
<p style="text-align: left;"><span style="color: #0000ff;"><strong>book_list_row.xml</strong></span></p>
<pre><;?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"
 android:layout_margin="5dp"
 android:orientation="horizontal">;

 <;ImageView
 android:id="@+id/img_book"
 android:layout_width="100dp"
 android:layout_height="200dp" />;

 <;LinearLayout
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginLeft="10dp"
 android:layout_marginTop="10dp"
 android:orientation="vertical">;

 <;TextView
 android:id="@+id/book_name"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:textAllCaps="true"
 android:textColor="@color/colorPrimaryDark"
 android:textSize="22sp"
 android:textStyle="bold" />;

 <;TextView
 android:id="@+id/author_name"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:textSize="18sp"
 android:textStyle="bold" />;
 <;/LinearLayout>;
<;/LinearLayout>;</pre>
<p style="text-align: left;"><strong>6. </strong>Now create a class named <span style="color: #008000;"><strong>BookAdapter.java</strong></span> and add the below code. Here <span style="color: #0000ff;"><strong>onCreateViewHolder() </strong></span>method inflates <span style="color: #008000;"><strong>book_list_row.xml</strong>.</span> In <span style="color: #0000ff;"><strong>onBindViewHolder()</strong></span> method the appropriate book data (authorName, book name, and book image) set to each row.</p>
<p style="text-align: left;"><span style="color: #0000ff;"><strong>BookAdapter.java</strong></span></p>
<pre>package com.example.lenovo.recyclerview.adapter;

import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import com.example.lenovo.recyclerview.R;
import com.example.lenovo.recyclerview.model.Book;
import java.util.List;

public class BookAdapter extends RecyclerView.Adapter<;BookAdapter.MyViewHolder>; {

 private List<;Book>; bookList;

 public BookAdapter(List<;Book>; bookList) {
 this.bookList = bookList;
 }

 public class MyViewHolder extends RecyclerView.ViewHolder {
 public TextView authorName, bookName;
 public ImageView imageView;

 public MyViewHolder(View view) {
 super(view);
 authorName = (TextView) view.findViewById(R.id.author_name);
 bookName = (TextView) view.findViewById(R.id.book_name);
 imageView = (ImageView) view.findViewById(R.id.img_book);
 }

 }

 @Override
 public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
 View itemView = LayoutInflater.from(parent.getContext()).inflate(R.layout.book_list_row, parent, false);
 return new MyViewHolder(itemView);

 }

 @Override
 public void onBindViewHolder(MyViewHolder holder, int position) {
 holder.authorName.setText(bookList.get(position).getAuthorName());
 holder.bookName.setText(bookList.get(position).getBookName());
 holder.imageView.setImageResource(bookList.get(position).getImageResource());

 }

 @Override
 public int getItemCount() {
 return bookList.size();
 }
}

</pre>
<p style="text-align: left;"><strong>7. </strong>Open drawable folder under res directory and paste all the book photos which you have copied from somewhere else.</p>
<p style="text-align: left;"><strong>8. </strong>Now open <span style="color: #008000;"><strong>BookListActivity.java</strong></span> refracted form of <span style="color: #008000;"><strong>MainActivity.java</strong></span> and do the below changes. Here <span style="color: #0000ff;"><strong>prepareMovieData()</strong></span> method adds sample data to list view.</p>
<!-- WP QUADS Content Ad Plugin v. 2.0.98.1 -->
<div class="quads-location quads-ad2" id="quads-ad2" style="float:none;margin:0px;">

</div>

<p style="text-align: left;"><span style="color: #0000ff;"><strong>BookListActivity.java</strong></span></p>
<pre>package com.example.lenovo.recyclerview.activity;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
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 android.view.MotionEvent;
import android.view.View;
import android.widget.Toast;

import com.example.lenovo.recyclerview.R;
import com.example.lenovo.recyclerview.adapter.BookAdapter;
import com.example.lenovo.recyclerview.model.Book;

import java.util.ArrayList;
import java.util.List;

public class BookListActivity extends AppCompatActivity {
 private RecyclerView recyclerView;
 private List<;Book>; bookList = new ArrayList<;Book>;();
 private BookAdapter mAdapter;

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

 recyclerView = (RecyclerView) findViewById(R.id.recycler_view);

 prepareBookData();

 mAdapter = new BookAdapter(bookList);
 <strong><span style="color: #008000;"> //vertical RecyclerView</span></strong>
 recyclerView.setLayoutManager(new LinearLayoutManager(getApplicationContext()));

 <strong><span style="color: #008000;">//provides basic animations on remove, add, and move events that happen to the items in a RecyclerView.
 //RecyclerView uses a DefaultItemAnimator by default.</span></strong>
 recyclerView.setItemAnimator(new DefaultItemAnimator());
 recyclerView.setAdapter(mAdapter);

 }

 <strong><span style="color: #008000;"> //preparing bookList data</span></strong>
 private void prepareBookData() {
 Book book = new Book("Munshi Premchand", "Nirmala", R.drawable.nirmala);
 bookList.add(book);
 book = new Book("Harivansh Rai Bachchan", "Madhushala", R.drawable.madhushala2);
 bookList.add(book);
 book = new Book("Ramdhari Singh Dinkar", "Rashmirathi", R.drawable.rashmirathi);
 bookList.add(book);
 book = new Book("Dharamvir Bharti", "Gunahon Ka Devta", R.drawable.gunahokedevta2);
 bookList.add(book);
 book = new Book("Munshi Premchand", "Shatranj Ke Khiladi", R.drawable.shatranj2);
 bookList.add(book);
 book = new Book("Bhisham Sahni", "Tamas", R.drawable.tamas);
 bookList.add(book);
 book = new Book("Dharamvir Bharti", "Suraj Ka Satva Ghoda", R.drawable.suraj);
 bookList.add(book);
 book = new Book("Munshi Premchand", "Karmabhumi", R.drawable.karmabhumi);
 bookList.add(book);
 book = new Book("Kashinath Singh", "Kassi Ka Assi", R.drawable.kashi_ka_assi);
 bookList.add(book);
 book = new Book("Bhagwati Charan Verma", "Chitralekha", R.drawable.chitralekha);
 bookList.add(book);

 }
}</pre>
<p style="text-align: left;"><span style="color: #0000ff;"><strong>Now if you run the app you can see the book list will look like this:</strong></span></p>
<p style="text-align: left;"><img class=" wp-image-1560 aligncenter" src="https://c1ctech.com/wp-content/uploads/2020/02/Screenshot_1581062693.png" alt="Screenshot_1581062693" width="355" height="632" /></p>
<h3 style="text-align: left;"><strong><span style="color: #333399;">Adding RecyclerView Divider/Separator</span></strong></h3>
<p style="text-align: left;"><strong>9. </strong>You can add the divider line between rows by using<span style="color: #0000ff;"> <strong><a style="color: #0000ff;" href="https://developer.android.com/reference/android/support/v7/widget/DividerItemDecoration.html">DividerItemDecoration</a></strong></span> provided by the support library. Add item decoration on RecyclerView as shown below.</p>
<pre style="text-align: left;"><span style="color: #000000;"><strong><span style="color: #008000;">// adding inbuilt divider line</span></strong><em>
</em><strong>recyclerView</strong>.addItemDecoration(<strong>new </strong>DividerItemDecoration(<strong>this</strong>, LinearLayoutManager.<strong><em>VERTICAL</em></strong>));</span></pre>
<pre style="text-align: left;"><strong><span style="color: #008000;">//setting Adapter</span></strong>
<span style="color: #000000;"> <strong>recyclerView</strong>.setAdapter(<strong>mAdapter</strong>);</span></pre>
<p style="text-align: left;"><span style="color: #0000ff;"><strong>Now if you run the app, you should see a divider line separating each row.</strong></span></p>
<p><img class=" wp-image-107 aligncenter" src="https://c1ctech.com/wp-content/uploads/2018/02/Screenshot_2018-02-17-13-43-56-576x1024.png" alt="" width="362" height="644" /></p>
<p style="text-align: left;">
<h2></h2>
<h3 style="text-align: left;"><strong><span style="color: #333399;">Displaying Horizontal Scrolling RecyclerView</span></strong></h3>
<p style="text-align: left;"><strong>10. </strong>If you want to display the RecyclerView in Horizontal manner, you can do that just by changing a single line of code. All you have to do is provide direction to layout manager i.e <span style="color: #008000;"><strong>LinearLayoutManager.HORIZONTAL</strong></span> as shown below.</p>
<pre style="text-align: left;"><span style="color: #000000;"><em><strong><span style="color: #008000;">//horizontal recyclerView</span></strong>
</em><strong>recyclerView</strong>.setLayoutManager(<strong>new </strong>LinearLayoutManager(getApplicationContext(),LinearLayoutManager.<strong><em>HORIZONTAL</em></strong>,<strong>false</strong>));</span></pre>
<h3 style="text-align: left;"><strong><span style="color: #333399;">Complete Code</span></strong></h3>
<p style="text-align: left;">Below is the complete code of <span style="color: #008000;"><strong>BookListActivity.java.</strong></span></p>
<p style="text-align: left;"><span style="color: #0000ff;"><strong>BookListActivity.java</strong></span></p>
<pre>package com.example.lenovo.recyclerview.activity;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
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 android.view.MotionEvent;
import android.view.View;
import android.widget.Toast;

import com.example.lenovo.recyclerview.R;
import com.example.lenovo.recyclerview.adapter.BookAdapter;
import com.example.lenovo.recyclerview.model.Book;

import java.util.ArrayList;
import java.util.List;

public class BookListActivity extends AppCompatActivity {
 private RecyclerView recyclerView;
 private List<;Book>; bookList = new ArrayList<;Book>;();
 private BookAdapter mAdapter;

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

 recyclerView = (RecyclerView) findViewById(R.id.recycler_view);

 prepareBookData();

 mAdapter = new BookAdapter(bookList);
 <span style="color: #008000;"><strong> //vertical RecyclerView</strong></span>
 recyclerView.setLayoutManager(new LinearLayoutManager(getApplicationContext()));

 <strong><span style="color: #008000;"> //horizontal RecyclerView</span></strong>
 //recyclerView.setLayoutManager(new LinearLayoutManager(getApplicationContext(),LinearLayoutManager.HORIZONTAL,false));

 <strong><span style="color: #008000;">//provides basic animations on remove, add, and move events that happen to the items in a RecyclerView.
 //RecyclerView uses a DefaultItemAnimator by default.</span></strong>
 recyclerView.setItemAnimator(new DefaultItemAnimator());

 <strong><span style="color: #008000;">//adding inbuilt divider line</span></strong>
 recyclerView.addItemDecoration(new DividerItemDecoration(this, LinearLayoutManager.VERTICAL));
 recyclerView.setAdapter(mAdapter);

 }

 <span style="color: #008000;"><strong> //preparing bookList data</strong></span>
 private void prepareBookData() {
 Book book = new Book("Munshi Premchand", "Nirmala", R.drawable.nirmala);
 bookList.add(book);
 book = new Book("Harivansh Rai Bachchan", "Madhushala", R.drawable.madhushala2);
 bookList.add(book);
 book = new Book("Ramdhari Singh Dinkar", "Rashmirathi", R.drawable.rashmirathi);
 bookList.add(book);
 book = new Book("Dharamvir Bharti", "Gunahon Ka Devta", R.drawable.gunahokedevta2);
 bookList.add(book);
 book = new Book("Munshi Premchand", "Shatranj Ke Khiladi", R.drawable.shatranj2);
 bookList.add(book);
 book = new Book("Bhisham Sahni", "Tamas", R.drawable.tamas);
 bookList.add(book);
 book = new Book("Dharamvir Bharti", "Suraj Ka Satva Ghoda", R.drawable.suraj);
 bookList.add(book);
 book = new Book("Munshi Premchand", "Karmabhumi", R.drawable.karmabhumi);
 bookList.add(book);
 book = new Book("Kashinath Singh", "Kassi Ka Assi", R.drawable.kashi_ka_assi);
 bookList.add(book);
 book = new Book("Bhagwati Charan Verma", "Chitralekha", R.drawable.chitralekha);
 bookList.add(book);

 }
}

</pre>
<p style="text-align: left;"><span style="color: #0000ff;"><strong>Now if you run the app you can see the book list will look like this:</strong></span></p>
<p><img class=" wp-image-107 aligncenter" src="https://c1ctech.com/wp-content/uploads/2018/02/Screenshot_2018-02-17-13-43-56-576x1024.png" alt="" width="424" height="754" />