<h3><span style="color: #000080;"><strong>What is RecyclerView?</strong></span></h3>
<p>The <span style="color: #008000;"><strong>RecyclerView</strong></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>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>Get <span style="color: #0000ff;"><strong>GITHUB</strong></span> code from <span style="color: #0000ff;"><a style="color: #0000ff;" href="https://github.com/arunk7839/RecyclerViewKotlinExample"><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://www.youtube.com/watch?v=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><strong><span style="color: #000080;">Creating New Project</span></strong></h3>
<p><strong>1</strong>. 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><strong>2</strong>. Open <span style="color: #008000;"><strong>build.gradle</strong></span> and add recyclerview dependency <span style="color: #333399;"><strong>com.android.support:recyclerview-v7:26.1.0</strong></span> and rebuild the project.</p>
<p><span style="color: #0000ff;"><strong>Build.gradle</strong></span></p>
<pre style="padding-left: 30px;"><strong>dependencies {</strong>
 
<span style="color: #008000;"><strong>// RecyclerView</strong></span>
<strong> implementation <span style="color: #333399;">'com.android.support:recyclerview-v7:26.1.0'</span></strong>
<strong>}</strong>

</pre>
<p><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><span style="color: #0000ff;"><strong>activity_booklist.xml</strong></span></p>
<pre style="padding-left: 30px;"><em><;?</em><strong>xml version=</strong><strong>"1.0" </strong><strong>encoding=</strong><strong>"utf-8"</strong><em>?>;
 </em><;<strong>RelativeLayout </strong><strong>xmlns:</strong><strong>android</strong><strong>=</strong><strong>"http://schemas.android.com/apk/res/android"
 </strong><strong>xmlns:</strong><strong>app</strong><strong>=</strong><strong>"http://schemas.android.com/apk/res-auto"
 </strong><strong>xmlns:</strong><strong>tools</strong><strong>=</strong><strong>"http://schemas.android.com/tools"
 </strong><strong>android</strong><strong>:layout_width=</strong><strong>"match_parent"
 </strong><strong>android</strong><strong>:layout_height=</strong><strong>"match_parent"
 </strong><strong>tools</strong><strong>:context=</strong><strong>"com.example.lenovo.recyclerview.activity.BookListActivity"</strong>>;
 
 <;<strong>android.support.v7.widget.RecyclerView
 </strong><strong>android</strong><strong>:id=</strong><strong>"@+id/recycler_view"</strong><strong> android</strong><strong>:scrollbars=</strong><strong>"vertical"
 </strong><strong>android</strong><strong>:layout_width=</strong><strong>"match_parent"
 </strong><strong>android</strong><strong>:layout_height=</strong><strong>"wrap_content"
 </strong>>;
 
 <;/<strong>android.support.v7.widget.RecyclerView</strong>>;
 
 <;/<strong>RelativeLayout</strong>>;

</pre>
<h3><span style="color: #000080;"><strong>Writing the Adapter Class</strong></span></h3>
<p>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><strong>4</strong>. Create a class named <span style="color: #008000;"><strong>Book.java</strong></span> and declare bookName, authorName and ImageResource(for Image). No need to set setter/getter function as it creates in its own.</p>
<p><span style="color: #0000ff;"><strong>Book.java </strong></span></p>
<pre style="padding-left: 30px;"><strong>package com.example.lenovo.recyclerviewkotlin</strong>

<strong>data class Book(var authorName: String,var bookName: String,var imageResource: Int)</strong>


</pre>
<p><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 name, image, and author name.</p>
<p><span style="color: #0000ff;"><strong>book_list_row.xml</strong></span></p>
<pre style="padding-left: 30px;"><strong><;?xml version="1.0" encoding="utf-8"?>;</strong>
<strong><;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"</strong>
<strong> android:layout_width="match_parent"</strong>
<strong> android:layout_height="wrap_content"</strong>
<strong> android:layout_margin="5dp"</strong>
<strong> android:orientation="horizontal">;</strong>

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

<strong> <;LinearLayout</strong>

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


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

<strong> <;TextView</strong>
<strong> android:id="@+id/author_name"</strong>
<strong> android:layout_width="wrap_content"</strong>
<strong> android:layout_height="wrap_content"</strong>
<strong> android:textSize="18sp"</strong>
<strong> android:textStyle="bold" />;</strong>
<strong> <;/LinearLayout>;</strong>
<strong><;/LinearLayout>;</strong>

</pre>
<p><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, bookName and bookImage) set to each row.</p>
<p><strong><span style="color: #0000ff;">BookAdapter.java</span></strong></p>
<pre style="padding-left: 30px;"><strong>package com.example.lenovo.recyclerviewkotlin</strong>

<strong>import android.support.v7.widget.RecyclerView</strong>
<strong>import android.view.LayoutInflater</strong>
<strong>import android.view.View</strong>
<strong>import android.view.ViewGroup</strong>
<strong>import android.widget.ImageView</strong>
<strong>import android.widget.TextView</strong>
<strong>import android.widget.Toast</strong>


<strong>class BookAdapter(val bookList: List<;Book>;) : RecyclerView.Adapter<;BookAdapter.MyViewHolder>;() {</strong>


<strong> class MyViewHolder(view: View) : RecyclerView.ViewHolder(view) {</strong>

<strong> val authorName: TextView = view.findViewById(R.id.author_name)</strong>
<strong> val bookName: TextView = view.findViewById(R.id.book_name)</strong>
<strong> val imageView: ImageView = view.findViewById(R.id.img_book)</strong>

<strong> fun bindItems(item: Book) {</strong>

<strong> authorName.setText(item.authorName)</strong>
<strong> bookName.setText(item.bookName)</strong>
<strong> imageView.setImageResource(item.imageResource)</strong>

<span style="color: #008000;"><strong> //setting onclicklistener on each item</strong></span>
<strong> itemView.setOnClickListener({</strong>

<strong> Toast.makeText(itemView.context, item.bookName + " " + " book is Clicked", Toast.LENGTH_SHORT).show()</strong>
<strong> })</strong>
<strong> }</strong>
<strong> }</strong>

<strong> override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyViewHolder {</strong>
<strong> val view = LayoutInflater.from(parent.context).inflate(R.layout.book_list_row, parent, false)</strong>
<strong> return MyViewHolder(view)</strong>

<strong> }</strong>

<strong> override fun onBindViewHolder(holder: MyViewHolder, position: Int) {</strong>

<strong> holder.bindItems(bookList.get(position));</strong>


<strong> }</strong>

<strong> override fun getItemCount(): Int {</strong>
<strong> return bookList.size</strong>
<strong> }</strong>


<strong>}</strong>

</pre>
<p><strong>7</strong>. Open drawable folder under res directory and paste all the book photos which you have copied from somewhere else.</p>
<p><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><strong><span style="color: #0000ff;">BookListActivity.java</span></strong></p>
<pre style="padding-left: 30px;"><strong>package com.example.lenovo.recyclerviewkotlin</strong>

<strong>import android.support.v7.app.AppCompatActivity</strong>
<strong>import android.os.Bundle</strong>
<strong>import android.support.v7.widget.DefaultItemAnimator</strong>
<strong>import android.support.v7.widget.DividerItemDecoration</strong>
<strong>import android.support.v7.widget.LinearLayoutManager</strong>
<strong>import android.support.v7.widget.RecyclerView</strong>
<strong>import java.util.ArrayList</strong>

<strong>class BookListActivity : AppCompatActivity() {</strong>

<strong> private var recyclerView: RecyclerView? = null</strong>
<strong> private val bookList = ArrayList<;Book>;()</strong>
<strong> private val mAdapter: BookAdapter? = null</strong>

<strong> override fun onCreate(savedInstanceState: Bundle?) {</strong>
<strong> super.onCreate(savedInstanceState)</strong>
<strong> setContentView(R.layout.booklist)</strong>
<strong> val recyclerView: RecyclerView = findViewById(R.id.recycler_view)</strong>

<strong> prepareBookData()</strong>


<span style="color: #008000;"><strong> //vertical RecyclerView</strong></span>
<strong> recyclerView!!.layoutManager = LinearLayoutManager(applicationContext)</strong>

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

 
<strong> val adapter = BookAdapter(bookList)</strong>

<span style="color: #008000;"><strong> //now adding the adapter to recyclerview</strong></span>
<strong> recyclerView!!.adapter = adapter</strong>

<strong> }</strong>

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

<strong> }</strong>

<strong>}</strong>

</pre>
<p><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-1560 aligncenter" src="https://c1ctech.com/wp-content/uploads/2020/02/Screenshot_1581062693.png" alt="Screenshot_1581062693" width="366" height="650" /></p>
<p style="padding-left: 30px;">
<h3><span style="color: #000080;"><strong>Adding RecyclerView Divider/Separator</strong></span></h3>
<p>9.You can add the divider line between rows by using <span style="color: #008000;"><strong>DividerItemDecoration</strong></span> provided by the support library. Add item decoration on RecyclerView as shown below.</p>
<pre style="padding-left: 60px;"><span style="color: #008000;"><strong>// adding inbuilt divider line</strong></span>
<strong>recyclerView!!.addItemDecoration(DividerItemDecoration(this, LinearLayoutManager.VERTICAL))</strong>

<strong>val adapter = BookAdapter(bookList)</strong>

<span style="color: #008000;"><strong>//now adding the adapter to recyclerview</strong></span>
<strong>recyclerView!!.adapter = adapter</strong>

</pre>
<p><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="aligncenter wp-image-107 " src="https://c1ctech.com/wp-content/uploads/2018/02/Screenshot_2018-02-17-13-43-56-576x1024.png" alt="" width="375" height="667" /></p>
<p style="padding-left: 30px;">
<h3><span style="color: #000080;"><strong>Displaying Horizontal Scrolling RecyclerView</strong></span></h3>
<p><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="padding-left: 60px;"><span style="color: #008000;"><strong>//horizontal RecyclerView</strong></span>
<strong>recyclerView.setLayoutManager(new LinearLayoutManager(getApplicationContext(),LinearLayoutManager.HORIZONTAL,false));</strong></pre>
<h3><span style="color: #000080;"><strong>Final Code</strong></span></h3>
<p>Below is the complete code of <span style="color: #008000;"><strong>BookListActivity.java</strong></span></p>
<p><strong><span style="color: #0000ff;">BookListActivity.java</span></strong></p>
<pre style="padding-left: 30px;"><strong>package com.example.lenovo.recyclerviewkotlin</strong>

<strong>import android.support.v7.app.AppCompatActivity</strong>
<strong>import android.os.Bundle</strong>
<strong>import android.support.v7.widget.DefaultItemAnimator</strong>
<strong>import android.support.v7.widget.DividerItemDecoration</strong>
<strong>import android.support.v7.widget.LinearLayoutManager</strong>
<strong>import android.support.v7.widget.RecyclerView</strong>
<strong>import java.util.ArrayList</strong>

<strong>class BookListActivity : AppCompatActivity() {</strong>

<strong> private var recyclerView: RecyclerView? = null</strong>
<strong> private val bookList = ArrayList<;Book>;()</strong>
<strong> private val mAdapter: BookAdapter? = null</strong>

<strong> override fun onCreate(savedInstanceState: Bundle?) {</strong>
<strong> super.onCreate(savedInstanceState)</strong>
<strong> setContentView(R.layout.booklist)</strong>
<strong> val recyclerView: RecyclerView = findViewById(R.id.recycler_view)</strong>

<strong> prepareBookData()</strong>


<span style="color: #008000;"><strong> //vertical RecyclerView</strong></span>
<strong> recyclerView!!.layoutManager = LinearLayoutManager(applicationContext)</strong>

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

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

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

<strong> val adapter = BookAdapter(bookList)</strong>

<span style="color: #008000;"><strong> //now adding the adapter to recyclerview</strong></span>
<strong> recyclerView!!.adapter = adapter</strong>

<strong> }</strong>

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

<strong> }</strong>

<strong>}</strong>

</pre>
<p><strong>Now when you run the app, it will look like this.</strong></p>
<p><img class="aligncenter wp-image-107 " src="https://c1ctech.com/wp-content/uploads/2018/02/Screenshot_2018-02-17-13-43-56-576x1024.png" alt="" width="469" height="833" />