Subscribe Now

* You will receive the latest news and updates on your favorite celebrities!

Trending News

Blog Post

How to display list of data into Recyclerview in Android
Kotlin

How to display list of data into Recyclerview in Android

RecyclerView In Android

 

Recycling  is very important as waste has a huge negative impact on the natural environment. Same as real world in computer programming world recycling a memory is very important. Programmer dynamically allocates memory to program, when requested, and free it up for reuse when it is no longer needed. In a same way Recycling play a huge role in Android world. For Displaying scrollable list of items Google introduced Listview with Android SDK API 1. But with complex list of data Listview not provide good performance as it not reuse cell (Recycle) while scrolling up/down (We can achieve this using Viewholder concept in Listview). Recyclerview is introduced in API 21(Lollipop) to overcome all this problems which we face in Listview. Recyclerview is game changer for android developer. Recyclerview is advance and improved version of Listview. Today we are going to discuss about Recyclerview in Android.

Recyclerview Architecture

 

Recyclerview Architecture

List of Components of Recyclerview

1.  Viewholder:

RecyclerView.ViewHolder class is used by adapter to bind view with a position. ViewHolder holds the information of the view. ViewHolder is compulsory when we use RecyclerView. For making ViewHolder extend class with RecyclerView.ViewHolder.

2. Layout Manager:

LayoutManager is also compulsory when we are using RecyclerView. It is responsible for displaying user interface while we are using RecyclerView. There are 3 types of Predefined LayoutManager for RecyclerView.

1. LinearLayoutManager:
This is most common LayoutManager used for Displaying list of data using RecyclerView. Using LinearLayoutManager we can display list of data vertically as well as horizontally.

2. GridLayoutManager:
Using this layout manager we can display data in grid like any photo gallery. Here it gives us lots of flexibility like we can give different span counts.

3. StaggeredGridLayoutManager:
Through this layout manager, we can create staggered lists. Just like the Pinterest screen.

3. ItemDecoration:

As per the official Android Developers Documentation An ItemDecoration allows the application to add a special drawing and layout offset to specific item views from the adapter’s data set. This can be useful for drawing dividers between items, highlights, visual grouping boundaries and more.

4. Item Animator:

Animation has touch new heights in real world as well as in Android also. Now imagine if we could add animation in to scrollable list. In ListView there is no special provision for this but in RecyclerView we have ItemAnimation class for animation on items as changes are made to the adapter. Subclasses of ItemAnimator can be used to implement custom animations for actions on ViewHolder items.

Now Let’s make one android project for better understand how we can display scrollable list of data into RecyclerView.

Implementation



Step 1:

Add below dependency into build.gradle

dependencies { 
    implementation 'com.android.support:recyclerview-v7:28.0.0-rc01'
    implementation 'com.github.bumptech.glide:glide:4.7.1'
}

 

Step 2:

Create one layout file which will display list of movies name it as list_item_movie.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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="wrap_content"
    android:background="@android:color/white">

    <ImageView
        android:id="@+id/imageMovie"
        android:layout_width="110dp"
        android:layout_height="150dp"
        android:contentDescription="@string/app_name"
        android:scaleType="fitXY"
        android:src="@drawable/ic_avengers" />

    <TextView
        android:id="@+id/textMovieTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingEnd="16dp"
        android:paddingLeft="16dp"
        android:paddingStart="16dp"
        android:textColor="@android:color/black"
        android:textSize="20sp"
        app:layout_constraintStart_toEndOf="@id/imageMovie"
        tools:text="Avengers" />

    <TextView
        android:id="@+id/textMovieViews"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp"
        android:paddingEnd="16dp"
        android:paddingLeft="16dp"
        android:paddingStart="16dp"
        android:textColor="@android:color/black"
        android:textSize="14sp"
        app:layout_constraintStart_toEndOf="@id/imageMovie"
        app:layout_constraintTop_toBottomOf="@id/textMovieTitle"
        tools:text="Views: 100" />

    <TextView
        android:id="@+id/textReleaseDate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp"
        android:paddingEnd="16dp"
        android:paddingLeft="16dp"
        android:paddingStart="16dp"
        android:textColor="@android:color/black"
        android:textSize="14sp"
        app:layout_constraintStart_toEndOf="@id/imageMovie"
        app:layout_constraintTop_toBottomOf="@id/textMovieViews"
        tools:text="Release Date: 16 Feb 2018" />

</android.support.constraint.ConstraintLayout>

 

Step 3:

Now create one ViewHolder class by extending RecyclerView.ViewHolder and name it as MovieListViewHolder.

package com.android4dev.recyclerview.adapter

import android.support.v7.widget.RecyclerView
import android.view.View
import com.android4dev.recyclerview.model.MovieModel
import com.bumptech.glide.Glide
import kotlinx.android.synthetic.main.list_item_movie.view.*
import java.util.*

class MovieListViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
    fun bindView(movieModel: MovieModel) {
        itemView.textMovieTitle.text = movieModel.movieTitle
        itemView.textMovieViews.text = "Views: " + movieModel.movieViews
        itemView.textReleaseDate.text = "Release Date: " + movieModel.releaseDate

        Glide.with(itemView.context).load(movieModel.moviePicture!!).into(itemView.imageMovie)
    }

}

 

Step 4:

Now create one Adapter class by extending RecyclerView.Adapter name it as MovieListAdapter.

package com.android4dev.recyclerview.adapter

import android.support.v7.widget.RecyclerView
import android.view.LayoutInflater
import android.view.ViewGroup
import com.android4dev.recyclerview.R
import com.android4dev.recyclerview.model.MovieModel

class MovieListAdapter : RecyclerView.Adapter<RecyclerView.ViewHolder>() {

    private var listOfMovies = mutableListOf<MovieModel>()
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
        return MovieListViewHolder(LayoutInflater.from(parent.context).inflate(R.layout.list_item_movie, parent, false))
    }

    override fun getItemCount(): Int = listOfMovies.size

    override fun onBindViewHolder(viewHolder: RecyclerView.ViewHolder, position: Int) {
        val movieViewHolder = viewHolder as MovieListViewHolder
        movieViewHolder.bindView(listOfMovies[position])
    }

    fun setMovieList(listOfMovies: List<MovieModel>) {
        this.listOfMovies = listOfMovies.toMutableList()
        notifyDataSetChanged()
    }

    fun addMoreData(listOfMovies: List<MovieModel>) {
        this.listOfMovies.addAll(listOfMovies)
        notifyDataSetChanged()
    }
}

 

override fun getItemCount(): Int = listOfMovies.size using this method RecyclerView decide how many rows it will display.

What is BindViewHolder?

For Understanding onBindViewHolder() we need to first check how RecyclerView display data into rows. Let us consider we need to display 100 record in RecyclerView. But RecyclerView will not created all 100 rows at same time. Instead of that RecyclerView creates only the 10 views that are on screen. This way you get 10x better speed and memory usage. But what happens when you start scrolling and need to start showing next views?

Again a simple approach would be to create a new view for each new row that you need to show. But this way by the time you reach the end of the list you will have created 100 views and your memory usage would be the same as in the first approach. And creating views takes time, so your scrolling most probably wouldn’t be smooth.

This is why RecyclerView takes advantage of the fact that as you scroll and new rows come on screen also old rows disappear off screen. Instead of creating new view for each new row, an old view is recycled and reused by binding new data to it. This happens exactly in onBindViewHolder(). Initially you will get new unused view holders and you have to fill them with data you want to display. But as you scroll you’ll start getting view holders that were used for rows that went off screen and you have to replace old data that they held with new data.

Step 5:

Now create one class VerticalSpaceItemDecoration and extend it using RecyclerView.ItemDecoration().

package com.android4dev.recyclerview.recyclerview_helper

import android.graphics.Rect
import android.support.v7.widget.RecyclerView
import android.view.View

/***
 * Made by Lokesh Desai (Android4Dev)
 */
class VerticalSpaceItemDecoration(private val verticalSpaceHeight: Int) : RecyclerView.ItemDecoration() {

    override fun getItemOffsets(outRect: Rect, view: View, parent: RecyclerView,
                                state: RecyclerView.State) {
        outRect.bottom = verticalSpaceHeight
    }
}

 

This class is responsible for adding space into every rows.

Step 6:

Create one more class for adding divider dynamically, Name that class as DividerItemDecoration and extend it using RecyclerView.ItemDecoration() class.

package com.android4dev.recyclerview.recyclerview_helper

import android.content.Context
import android.support.v7.widget.RecyclerView
import android.support.v4.content.ContextCompat
import android.content.res.TypedArray
import android.graphics.Canvas
import android.graphics.drawable.Drawable

/***
 * Made by Lokesh Desai (Android4Dev)
 */
class DividerItemDecoration
/**
 * Default divider will be used
 */(context: Context) : RecyclerView.ItemDecoration() {
    private val ATTRS = intArrayOf(android.R.attr.listDivider)

    private var divider: Drawable? = null

    init {
        val styledAttributes = context.obtainStyledAttributes(ATTRS)
        divider = styledAttributes.getDrawable(0)
        styledAttributes.recycle()
    }

    /**
     * Custom divider will be used
     */
    constructor(context: Context, resId: Int) : this(context) {
        divider = ContextCompat.getDrawable(context, resId)
    }

    override fun onDraw(c: Canvas, parent: RecyclerView, state: RecyclerView.State) {
        val left = parent.paddingLeft
        val right = parent.width - parent.paddingRight

        val childCount = parent.childCount
        for (i in 0 until childCount) {
            val child = parent.getChildAt(i)

            val params = child.layoutParams as RecyclerView.LayoutParams

            val top = child.bottom + params.bottomMargin
            val bottom = top + divider!!.intrinsicHeight

            divider!!.setBounds(left, top, right, bottom)
            divider!!.draw(c)
        }
    }
}

 

For adding  custom divider view we will use below lines

constructor(context: Context, resId: Int) : this(context) {
        divider = ContextCompat.getDrawable(context, resId)
    }

 

Step 7:

 Now create one Activity and name it as RecyclerViewLinearLayoutActivity.

package com.android4dev.recyclerview

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.support.v7.widget.LinearLayoutManager
import com.android4dev.recyclerview.R.id.recyclerViewMovies
import com.android4dev.recyclerview.adapter.MovieListAdapter
import com.android4dev.recyclerview.adapter.MovieListViewHolder
import com.android4dev.recyclerview.base.BaseActivity
import com.android4dev.recyclerview.model.MovieModel
import com.android4dev.recyclerview.recyclerview_helper.DividerItemDecoration
import com.android4dev.recyclerview.recyclerview_helper.VerticalSpaceItemDecoration
import kotlinx.android.synthetic.main.activity_main.*

class RecyclerViewLinearLayoutActivity : BaseActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        initView()
    }

    private fun initView() {
        recyclerViewMovies.layoutManager = LinearLayoutManager(this)
        recyclerViewMovies.addItemDecoration(VerticalSpaceItemDecoration(48))

        //This will for default android divider
        recyclerViewMovies.addItemDecoration(DividerItemDecoration(this))

        //This will for custom divider
//        recyclerViewMovies.addItemDecoration(DividerItemDecoration(this, R.drawable.drawable_divider_view))
        val movieListAdapter = MovieListAdapter()
        recyclerViewMovies.adapter = movieListAdapter
        movieListAdapter.setMovieList(generateDummyData())
    }

    private fun generateDummyData(): List<MovieModel> {
        val listOfMovie = mutableListOf<MovieModel>()

        var movieModel = MovieModel(1, "Avengers", 500, "16 Feb 2018", R.drawable.ic_avengers)
        listOfMovie.add(movieModel)

        movieModel = MovieModel(2, "Avengers: Age of Ultron", 400, "17 March 2018", R.drawable.ic_avengers_2)
        listOfMovie.add(movieModel)

        movieModel = MovieModel(3, "Iron Man 3", 550, "17 April 2018", R.drawable.ic_ironman_3)
        listOfMovie.add(movieModel)

        movieModel = MovieModel(4, "Avengers: Infinity War", 1500, "15 Jan 2018", R.drawable.ic_avenger_five)
        listOfMovie.add(movieModel)

        movieModel = MovieModel(5, "Thor: Ragnarok", 200, "17 March 2018", R.drawable.ic_thor)
        listOfMovie.add(movieModel)

        movieModel = MovieModel(6, "Black Panther", 250, "17 May 2018", R.drawable.ic_panther)
        listOfMovie.add(movieModel)

        movieModel = MovieModel(7, "Logan", 320, "17 Dec 2018", R.drawable.ic_logan)
        listOfMovie.add(movieModel)

        return listOfMovie
    }
}


As we can see first assign LinearLayoutManager with RecyclerView.LayoutManager using  recyclerViewMovies.layoutManager = LinearLayoutManager(this). Without LayoutManager RecyclerView will not able to display any list of data.  Than create object of the adapter using val movieListAdapter = MovieListAdapter(). After attach adapter with RecyclerView using  recyclerViewMovies.adapter = movieListAdapter.

Now we have already created two classes for divider and vertical spaces. Use those classes with RecyclerView like this
//For Vertical Spaces
recyclerViewMovies.addItemDecoration(VerticalSpaceItemDecoration(48)) 
//For Dividers
recyclerViewMovies.addItemDecoration(DividerItemDecoration(this))

Here in this example we have used LinearLayoutManager for displaying list of movies vertically. Now run the project and you will able to see following result.

RecyclerView Android

Summary

From long time we are using ListView. But after MaterialDesign introduced it is hard to manage List of data using ListView. Because using ListView it is hard to manage complex list. With RecyclerView most of the issues related to ListView has been resolved. If you don’t have complex list of data than it is ok to use ListView but if you have complex list of data than it is always recommended to use RecyclerView In Android.

Source Code

Check out Github Project Which Contains All RecyclerView Examples

You Can Also Refer

 

 

Related posts

31 Comments

  1. How to integrate RecyclerView Using GridLayoutManager (Kotlin) - Android4Dev

    […] displaying list of data in Grid like Photo Gallery we can use GridLayoutManager. In Previous Blog we have discussed What is  RecyclerView? Today we are going to learn about GridLayoutManager using […]

  2. How to use RecyclerView with StaggeredGridLayoutManager (Kotlin) - Android4Dev

    […] How to integrate RecyclerView With LinearLayoutManager? […]

  3. RecyclerView Multiple View Types (Header & Footer) - Android4Dev

    […] How to integrate RecyclerView With LinearLayoutManager? […]

  4. Avatar
    joker123 download

    Hello! Quick question that’s totally off topic. Do you know how
    to make your site mobile friendly? My website looks weird
    when viewing from my iphone4. I’m trying to find a
    theme or plugin that might be able to fix this problem.
    If you have any recommendations, please share.
    Thanks! https://kasino.vin/downloads/67-download-joker123

  5. Avatar
    mobile slot machine download

    I know that because articles drive around 60% of my traffic.

    Tweak it and thereafter place around the website or blog.
    It lets your potential customer see a person need to know people are
    discussing about. http://www.dealingcity.ru/bitrix/rk.php?goto=http://fanaticoonlinemenu.com/__media__/js/netsoltrademark.php?d=918kiss.bid%2Fdownloads%2F216-download-mega888-for-android-and-ios

  6. Avatar
    movie streaming for free

    Ꭲhank you for the auspicious writeup. It inn facdt was a amusement account it.

    Look advanced to far added agreeable from you! By the way, how caan we communicate? https://omovies.org/movie/73119/neg-maron-2005-hd-720p-full-movie

  7. Avatar
    omovies

    Wow! This blog looks exactly lіke my οld one!
    It’s on a entirely different topic but іt has pretty much tthe samje layoyt and design. Excellent choice of colors! https://Omovies.org/movie/186584/code-name-diamond-head-1977-hd-720p-full-movie

  8. Avatar
    about his

    Spot on with thօs write-up, I honestly think this sіte needs a
    great deal more attention. I’ll probably bbe returning to see more, thanks forr the info! https://omovies.org/movie/491707/caffe-italia-montreal-1985-hd-720p-full-movie

  9. Avatar
    http://Issuu.com

    Pretty! This was an incredibly wonderful post.
    Many thanks for providing this information.

  10. Avatar
    Harvard.edu

    Keep on writing, great job!

  11. Avatar
    http://people.com.cn

    My brother suggested I might like this website. He was entirely right.

    This post truly made my day. You can not imagine just how much time I had spent for this info!
    Thanks!

  12. Avatar
    p2c energies

    Hi to every one, for the reason that I am in fact keen of reading this blog’s post to be updated on a regular basis.
    It contains fastidious data.

  13. Avatar
    Nonton Anime Subtitle Indonesia

    Wow, that’s what I was looking for, what a stuff!
    present here at this webpage, thanks admin of this web page.

  14. Avatar
    Nonton Anime Subtitle Indonesia

    I am genuinely happy to read this weblog posts which consists of tons of
    useful information, thanks for providing these kinds of data.

  15. Avatar
    Nonton Anime Subtitle Indonesia

    Great blog! Do you have any tips and hints for aspiring writers?
    I’m hoping to start my own blog soon but I’m a little lost on everything.
    Would you recommend starting with a free platform like WordPress or go for a paid option? There are so many options
    out there that I’m completely confused .. Any ideas? Bless you!

  16. Avatar
    Sheryl

    I have read so many posts concerning the blogger lovers but this paragraph is actually a nice post, keep it up.

  17. Avatar
    Streaming Jav Online Free - JavPlay

    I’ve learn a few excellent stuff here. Certainly worth bookmarking for
    revisiting. I wonder how so much attempt you place to create one of these magnificent informative website.

  18. Avatar
    roofing contractor

    Nicely done (or should I say, “blogged” ha!)…

  19. Avatar
    amateur videos xvideod

    Keep on writing, great job!

  20. Avatar
    Streaming Jav Online Free - JavPlay

    I read this piece of writing fully about the difference of latest
    and preceding technologies, it’s awesome article.

  21. Avatar
    google

    I for all time emailed this website post page to all my friends, for the reason that if like to read it afterward my friends will too.

  22. Avatar
    google

    Thank you for any other informative blog. Where else may I get that kind of info written in such a
    perfect method? I have a undertaking that I’m just now working
    on, and I have been on the look out for such info.

  23. Avatar
    Reece Builders

    That is a great tip particularly to those fresh to the blogosphere.
    Short but very accurate information… Appreciate your sharing this one.

    A must read article!

  24. Avatar
    Irritate hemorrhoids

    It’s actually a great and useful piece of info.
    I am glad that you shared this helpful info with us.
    Please keep us up to date like this. Thank you for sharing.

  25. Avatar
    dịch tiếng trung sang tiếng anh

    Terrific article! That is the kind of info that should be shared across the internet.

    Disgrace on the seek engines for not positioning this post upper!
    Come on over and talk over with my web site . Thank you =)

  26. Avatar
    Nonton Anime Subtitle Indonesia

    Very good post. I’m experiencing many of these issues as well..

  27. Avatar
    google

    Greetings! Very helpful advice within this article! It’s the little changes
    that make the largest changes. Thanks for sharing!

  28. Avatar
    Streaming Jav Online Free - JavPlay

    Thank you, I’ve recently been searching for info about this topic for a long time and yours
    is the greatest I have came upon so far. But, what about the conclusion? Are you
    sure about the source?

  29. Avatar
    google.co.uk

    I do trust all of the concepts you have introduced in your post.
    They are very convincing and will definitely work. Still, the posts are
    very quick for newbies. May you please prolong them
    a bit from next time? Thanks for the post.

  30. Avatar
    Watch Jav Free HD

    I always spent my half an hour to read this blog’s content daily along with a mug
    of coffee.

  31. Avatar
    check out this site

    Appreciate the recommendation. Will try it out.

Leave a Reply

Required fields are marked *