Android RecyclerView Dividers: Simple and Custom Divider

In this article, you will learn how to create a simple and custom Android RecyclerView Divider.

Start with a Simple RecyclerView

In order to add dividers to a RecyclerView, we first need a simple RecyclerView to put these dividers on. You are welcome to copy and paste the code below that I’ll be working with, or use your own. The code below creates a simple vertical RecyclerView with 20 items.

MainActivity.kt

class MainActivity : AppCompatActivity() {

    private lateinit var viewAdapter: RecyclerView.Adapter<*>
    private lateinit var viewManager: RecyclerView.LayoutManager

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

        val dataset: List<String> = (1..20).map { i -> "Item ${i}" }

        viewAdapter = MainAdapter(dataset)
        viewManager = LinearLayoutManager(this)

        mainRecyclerView.apply {
            setHasFixedSize(true)
            adapter = viewAdapter
            layoutManager = viewManager
            addItemDecoration(DividerItemDecoration(this.context, DividerItemDecoration.VERTICAL))
        }
    }
}

MainAdapter.kt

class MainAdapter(private val dataset: List<String>) : RecyclerView.Adapter<MainAdapter.MainViewHolder>() {
    class MainViewHolder(v: View) : RecyclerView.ViewHolder(v) {
        val label: TextView = v.findViewById<TextView>(R.id.item_name)
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MainAdapter.MainViewHolder {
        val v = LayoutInflater.from(parent.context).inflate(R.layout.row, parent, false)
        return MainViewHolder(v)
    }

    override fun onBindViewHolder(holder: MainAdapter.MainViewHolder, position: Int) {
        holder.label.text = dataset[position]
    }

    override fun getItemCount() = dataset.size
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/mainRecyclerView"
        android:layout_height="wrap_content"
        android:layout_width="match_parent" />

</LinearLayout>

row.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:padding="20dp">
    <TextView
            android:id="@+id/item_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
</LinearLayout>

Simple Divider with DividerItemDecoration

The simplest way to add dividers to the RecyclerView is to add a DividerItemDecoration. This will add simple line dividers with one line of code. Make the following change to the MainActivity.kt file and you are good to go.

MainActivity.kt

...
mainRecyclerView.apply {
    setHasFixedSize(true)
    adapter = viewAdapter
    layoutManager = viewManager
    addItemDecoration(DividerItemDecoration(this.context, DividerItemDecoration.VERTICAL))
}
...
Android RecyclerView Dividers Simple

Custom Drawable with DividerItemDecoration

If you don’t like the simple dividers, you have the option of setting a custom drawable to customize the color and height of the divider. In this example, I’ve created a thick magenta divider to make a point, but you could use anything you like. Create a drawable XML file and then set it in the code and you are good to go.

divider.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
    <size
            android:width="1dp"
            android:height="10dp" />
    <solid android:color="#f0a" />
</shape>

Notice the height being 10x the width here, to make the dividers appear thicker. The color is set with the android:color attribute on the solid.

MainActivity.kt

...
mainRecyclerView.apply {
    setHasFixedSize(true)
    adapter = viewAdapter
    layoutManager = viewManager
    var itemDecoration = DividerItemDecoration(this.context, DividerItemDecoration.VERTICAL)
    itemDecoration.setDrawable(getDrawable(R.drawable.divider)!!)
    addItemDecoration(itemDecoration)
}
...
Android RecyclerView Dividers Custom

Conclusion

With these principles, you should be able to create satisfactory dividers for your RecyclerView with the color, height and margin that you want. If you have further questions, please leave a comment below.

One thought on “Android RecyclerView Dividers: Simple and Custom Divider”

Leave a Reply

Your email address will not be published. Required fields are marked *