This tutorial usages concepts covered in Android RecyclerView Using Kotlin With Example.

In this article, we had gone through an issue in RecyclerView – There were no clear gap between two items in it. We couldn’t really differentiate between two items – where does one end and other starts. So, here, we are going to learn some tips and tricks and concepts to solve this problem. We will learn how to add divider in recyclerView using Kotlin.

Getting Started

There are multiple ways to add divider in recyclerView –

1. Using RecyclerView.ItemDecoration class.
2. Using predefined DividerItemDecoration class.
3. Using view class with proper padding and margin.

Let go through one by one –

Add Divider in RecyclerView using RecyclerView.ItemDecoration

We have already covered on how to add divider using RecyclerView.ItemDecoration in our previous article. So, visit article on Using RecyclerView.ItemDecoration.

Add Divider Using DividerItemDecoration

Android provides predefined class DividerItemDecoration which can be used to add divider in recyclerView.

Follow steps below –

1. Create a new drawable file, divider.xml, in res/layout folder. Then, add below code in it –

   <?xml version="1.0" encoding="utf-8"?>
   <shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
       <size
           android:width="1dp"
           android:height="1dp" />
       <solid android:color="#f0f0f0" />
   </shape>
   

2. Now, we need to create an object of DividerItemDecoration class and set drawable in it. Then, add it to recyclerView. So, open MainActivity.kt file. Then, add below code inside setupRecyclerView() method –

   val divider = DividerItemDecoration(
   	baseContext,
   	(layoutManager as LinearLayoutManager).orientation
   )
   divider.setDrawable(AppCompatResources.getDrawable(context, R.drawable.divider)!!)
   addItemDecoration(divider)
   

   Finally, code inside MainActivity.kt file is –

   package com.tutorialwing.recyclerview
   
   import android.os.Bundle
   import android.widget.Toast
   import androidx.appcompat.app.AppCompatActivity
   import androidx.appcompat.content.res.AppCompatResources
   import androidx.recyclerview.widget.DividerItemDecoration
   import androidx.recyclerview.widget.LinearLayoutManager
   import com.tutorialwing.recyclerview.databinding.ActivityMainBinding
   
   class MainActivity : AppCompatActivity() {
   
   	private lateinit var binding: ActivityMainBinding
   
   	override fun onCreate(savedInstanceState: Bundle?) {
   		super.onCreate(savedInstanceState)
   
   		binding = ActivityMainBinding.inflate(layoutInflater)
   		setContentView(binding.root)
   
   		setupRecyclerView()
   	}
   
   	private fun setupRecyclerView() {
   		binding.recyclerView.apply {
   			layoutManager = LinearLayoutManager(context)
   			adapter = CustomAdapter(createAnimalList()) { animal, position ->
   				Toast.makeText(
   					this@MainActivity,
   					"Clicked on animal: ${animal.name}",
   					Toast.LENGTH_SHORT
   				).show()
   			}
   			val divider = DividerItemDecoration(
   				baseContext,
   				(layoutManager as LinearLayoutManager).orientation
   			)
   			divider.setDrawable(AppCompatResources.getDrawable(context, R.drawable.divider)!!)
   			addItemDecoration(divider)
   		}
   	}
   
   	private fun createAnimalList(): ArrayList<Animal> {
            // Other code to create list of animals.
   	}
   }
   

3. Now, run application. We will get output as below –
   

Add Divider Using view class in XML file

Till now, we have seen how to add divider in RecyclerView using Kotlin File, Now, we will see how to add divider using xml file.

As we have figured out – divider is nothing but a line between two views. So, we can create a line in xml file using View class.

Follow steps below to do it –

1. Open list_item.xml file. Then, add below code in it –

   <?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="wrap_content"
       android:background="?android:attr/selectableItemBackground"
       tools:context=".MainActivity">
   
       <ImageView
           android:id="@+id/image"
           android:layout_width="80dp"
           android:layout_height="80dp"
           android:contentDescription="@string/animal_image_description"
           android:paddingStart="5dp"
           android:paddingTop="5dp"
           android:paddingBottom="5dp"
           app:layout_constraintStart_toStartOf="parent"
           app:layout_constraintTop_toTopOf="parent" />
   
       <TextView
           android:id="@+id/name"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_marginStart="10dp"
           android:paddingTop="5dp"
           android:paddingEnd="5dp"
           android:paddingBottom="5dp"
           app:layout_constraintStart_toEndOf="@+id/image"
           app:layout_constraintTop_toTopOf="parent" />
   
       <View
           android:layout_width="0dp"
           android:layout_height="1dp"
           android:background="#f0f0f0"
           app:layout_constraintEnd_toEndOf="parent"
           app:layout_constraintStart_toStartOf="parent"
           app:layout_constraintTop_toBottomOf="@id/image" />
   
   </androidx.constraintlayout.widget.ConstraintLayout>
   

   Notice that we have add View class that only draws a line with 1dp in height.

2. Comment decorator part of code in MainActivity. Then, run application. We will get output as shown below –
   

That’s how we add divider in recyclerView using Kotlin With Example