RecyclerView or ListView? : Pros, cons, and examples with Kotlin

jbc7ag

Jess Barrientos

Posted on September 17, 2020

RecyclerView or ListView? : Pros, cons, and examples with Kotlin

ListView is very easy to implement, but that doesn't mean we should use it on all our projects. We have more options that will help us improve our performance and make our life easier. So we must use ListView when we have a small list of items, this is because the ListView shows the items in a different and unique view, so the more items we have, the more elements we need to create when the user scrolls up/down the list.

On the other hand, we have RecyclerView that as its name says, recycles the view, this means that once the view is off the screen, RecyclerView will reuse it. To achieve that we need to add a little more code and care when we implement this type of lists.

Alt Text

ListView: Pros & Cons

Pros

  • Easy to implement
  • OnItemClickListener

Cons

  • Bad performance in huge List of items
  • Complicate way to use ViewHolder pattern (but can use it)
  • Vertical list only

RecyclerView: Pros & Cons

Pros

  • Animations when adding, updating, and removing items
  • Item decoration (borders, dividers)
  • We can use It as a list or grid
  • It let us use it together with DiffUti
  • Faster performance, especially if you use RecyclerView.setHasFixedSize
  • Mandatory ViewHolder pattern

Cons

  • More code and sometimes unnecessary more difficult
  • Not an easy way to add OnItemClickListener

RecyclerView example

These three things you need to implement a very basic RecyclerView:

First of all, add it to the dependencies

  implementation 'androidx.recyclerview:recyclerview:1.1.0'
Enter fullscreen mode Exit fullscreen mode

Layout, in your XML file, add the reference to RecyclerView

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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="match_parent"
    tools:context=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/recyclerView"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>
Enter fullscreen mode Exit fullscreen mode

Adapter. We need to create an adapter to implement ViewHolder Pattern, as we said in RecyclerView is mandatory to use it.

class listAdapter(val data: List<String>): RecyclerView.Adapter<listAdapter.MyViewHolder> (){

    class MyViewHolder(val textView: TextView) : RecyclerView.ViewHolder(textView)

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyViewHolder {
        val textView = LayoutInflater.from(parent.context)
            .inflate(android.R.layout.simple_list_item_1, parent, false) as TextView
        return MyViewHolder(textView)

    }

    override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
        holder.textView.text = data[position];
    }
    override fun getItemCount() = data.size
}
Enter fullscreen mode Exit fullscreen mode

Implementation, this is an example of how we can use the adapter we created and how to show our items

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val listItems = listOf("1", "2", "3", "4", "5", "6", "7");

         setContentView(R.layout.activity_main)
         val myManager: RecyclerView.LayoutManager = LinearLayoutManager(this)
         val myAdaapter: RecyclerView.Adapter<*> = listAdapter(listItems)
         val recyclerView: RecyclerView = findViewById(R.id.recyclerView);
         recyclerView.layoutManager = myManager;
         recyclerView.adapter = myAdaapter;
         recyclerView.setHasFixedSize(true);

    }
}
Enter fullscreen mode Exit fullscreen mode

ListView example

For a simple listview you don't need too much code, first of all the layout should have ListView reference.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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="match_parent"
    tools:context=".MainActivity">

    <ListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/listview"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>
Enter fullscreen mode Exit fullscreen mode

Implementation. Then we can create a simple adapter to show our items

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val listItems = listOf("1", "2", "3", "4", "5", "6", "7");

        setContentView(R.layout.list_view_layout)
        val listview : ListView = findViewById(R.id.listview)
        val myAdapter = ArrayAdapter(this, android.R.layout.simple_list_item_1, listItems)
        listview.adapter = myAdapter


    }
}
Enter fullscreen mode Exit fullscreen mode

If you want to take a look at the code in an Android Project here is a repo with these examples: RecyclerView vs ListView

💖 💪 🙅 🚩
jbc7ag
Jess Barrientos

Posted on September 17, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related