DEV Community

Vincent Tsen
Vincent Tsen

Posted on • Edited on • Originally published at vtsen.hashnode.dev

Step-by-step Guides to Implement RecycleView

#android #beginners #programming #kotlin

Simple RecycleView demo to create dynamic lists to efficiently display large sets of data for your Android app

This is the Android RecycleView adapter architecture class diagram. I draw this because it helps me to understand the overall picture.

Android_RecycleView_Adapter_Class_Diagram.drawio.png

1. Implement and create ViewModel to hold RecycleView ItemData

This is just an example of recycle view ItemData. For simplicity, it just holds one data, which is the id.

data class ItemData (val id : Int)
Enter fullscreen mode Exit fullscreen mode

mockItems() is used to create a fake data. In practice, the data could be coming from repository either through remote and local data source.

class MainViewModel : ViewModel() {
    private val _items = MutableLiveData<List<ItemData>>()
    val items: LiveData<List<ItemData>>
        get() = _items

    init {
        mockItems()
    }

    private fun mockItems() {
        val itemDataList = mutableListOf<ItemData>()

        for(count in 1..100) {
            val data = ItemData(id = count)
            itemDataList.add(data)
        }
        _items.postValue(itemDataList)
    }
}
Enter fullscreen mode Exit fullscreen mode

In MainFragment, create the ViewModel. See my previous post - Recommended Ways To Create ViewModel

private val viewModel: MainViewModel by viewModels()
Enter fullscreen mode Exit fullscreen mode

2. Implement RecycleView item.xml layout

item.xml represents a single element in the RecycleView.

Before updating the layout, you need to enable the data binding in your app build.gradle.

buildFeatures {  
    dataBinding true  
}
Enter fullscreen mode Exit fullscreen mode

Add data variable into the item.xml, add TextView and assign the itemData.Id to the android:text attribute.

<?xml version="1.0" encoding="utf-8"?>  
<layout 
    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">  

    <data>  
        <variable 
            name="itemData"  
            type="com.example.android.recycleviewdemo.ui.main.ItemData" />  
    </data>  

    <androidx.constraintlayout.widget.ConstraintLayout  
         android:layout_width="match_parent"  
         android:layout_height="wrap_content">  

        <TextView  android:id="@+id/itemId"  
             android:layout_width="wrap_content"  
             android:layout_height="wrap_content"  
             android:text="@{Integer.toString(itemData.id)}" 
             android:textAppearance="@style/TextAppearance.AppCompat.Large"  
             android:textSize="34sp"  
             android:textStyle="bold"  
             app:layout_constraintBottom_toBottomOf="parent"  
             app:layout_constraintEnd_toEndOf="parent"  
             app:layout_constraintStart_toStartOf="parent"  
             app:layout_constraintTop_toTopOf="parent"  
             tools:text="1" />  
    </androidx.constraintlayout.widget.ConstraintLayout>  
</layout>
Enter fullscreen mode Exit fullscreen mode

3. Add RecycleView into MainFragment layout

Add viewModel data variable, add RecycleView (uses LinearLayoutManager).

<?xml version="1.0" encoding="utf-8"?>

<layout 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">

    <data>
        <variable
            name="viewModel"
            type="com.example.android.recycleviewdemo.ui.main.MainViewModel" />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".ui.main.MainFragment">

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recycler_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
            tools:listitem="@layout/item"/>

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

4. ImplementItemViewHolder that extends RecycleView.ViewHolder

Implement the bindData() function bind the itemData into item layout view.

class ItemViewHolder(
    private val binding: ItemBinding
) : RecyclerView.ViewHolder(binding.root) {

    private lateinit var _itemData: ItemData

    fun bindData(itemData: ItemData) {
        _itemData = itemData
        binding.itemData = _itemData
        binding.executePendingBindings()
    }
}
Enter fullscreen mode Exit fullscreen mode

5. Implement ItemDiffCallback singleton object

This is required in the next step to create the RecycleViewAdapter

object ItemDiffCallback : DiffUtil.ItemCallback<ItemData>() {
    override fun areItemsTheSame(oldItem: ItemData, newItem: ItemData): Boolean {
        return oldItem.id == newItem.id
    }

    override fun areContentsTheSame(oldItem: ItemData, newItem: ItemData): Boolean {
        return (oldItem == newItem)
    }
}
Enter fullscreen mode Exit fullscreen mode

6. Implement RecycleViewAdapter that extends ListAdapter

Extents ListAdapter<ItemData, ItemViewHolder> and passing in the ItemDiffCallback, implement onCreateViewHolder() and onBindViewHolder() functions.

class RecycleViewAdapter()
    : ListAdapter<ItemData, ItemViewHolder> (ItemDiffCallback) {

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ItemViewHolder {

        val itemBinding = ItemBinding.inflate(
            LayoutInflater.from(parent.context),
            parent, false)

        return ItemViewHolder(itemBinding)
    }

    override fun onBindViewHolder(holder: ItemViewHolder, position: Int) {
        holder.bindData(getItem(position))
    }
}
Enter fullscreen mode Exit fullscreen mode

7. Create RecycleViewAdapter and assign it to RecycleView in onCreateView() fragment

You also need to observe the viewModel.item live data and call ListAdapter.submitList()

override fun onCreateView(
    inflater: LayoutInflater, container: ViewGroup?,
    savedInstanceState: Bundle?
): View {

    val binding = MainFragmentBinding.inflate(inflater)

    val adapter = RecycleViewAdapter()
    binding.recyclerView.adapter = adapter

    viewModel.items.observe(viewLifecycleOwner, { items ->
        adapter.submitList(items)
    })

    return binding.root
}
Enter fullscreen mode Exit fullscreen mode

That's it! It is done!

Android_RecycleView_Adapter_Class_Diagram_01.gif

References

See Also

Originally published at https://vtsen.hashnode.dev.

Top comments (0)

Read next

kaankaya profile image

Dirty Code: Simple Rules to Avoid It

Kaan Kaya -

colindickson_78 profile image

Using Weak Pointers in Go

Colin Dickson -

pvsdev profile image

Brain debugging. Interview with Anders Schau Knatten, author of "C++ Brain Teasers: Exercise Your Mind"

Anastasiia Vorobeva -

mikeyoung44 profile image

AI System Learns How Objects Interact in Images to Generate New Scenes with Same Relationships

Mike Young -