Skip to main content

How to add custom item decorations to a RecyclerView in Kotlin Android

How to add custom item decorations to a RecyclerView in Kotlin Android.

Here is a step-by-step tutorial on how to add custom item decorations to a RecyclerView in Kotlin Android:

Step 1: Create a new Android project​

Start by creating a new Android project in Android Studio. Choose an appropriate name and package for your project.

Step 2: Add RecyclerView to your layout file​

Open the layout file (e.g., activity_main.xml) and add a RecyclerView widget to it. Customize the layout as per your requirements.

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

Step 3: Create a custom item decoration class​

Create a new Kotlin class file for your custom item decoration. This class will extend the RecyclerView.ItemDecoration class and override the getItemOffsets() method to define the spacing and decoration for each item.

class CustomItemDecoration(private val spacing: Int) : RecyclerView.ItemDecoration() {

    override fun getItemOffsets(
        outRect: Rect,
        view: View,
        parent: RecyclerView,
        state: RecyclerView.State
    ) {
        super.getItemOffsets(outRect, view, parent, state)

        // Set the spacing for each item
        outRect.top = spacing
        outRect.left = spacing
        outRect.right = spacing
        outRect.bottom = spacing
    }
}

Step 4: Apply the item decoration to the RecyclerView​

In your activity or fragment code, initialize the RecyclerView and apply the custom item decoration to it.

val recyclerView: RecyclerView = findViewById(R.id.recyclerView)
val layoutManager = LinearLayoutManager(this)
recyclerView.layoutManager = layoutManager

// Create an instance of your custom item decoration
val itemDecoration = CustomItemDecoration(16)

// Apply the item decoration to the RecyclerView
recyclerView.addItemDecoration(itemDecoration)

Step 5: Customize the item decoration​

You can further customize the item decoration by modifying the getItemOffsets() method in the CustomItemDecoration class. For example, you can check the position of the item and apply different spacing or decoration based on certain conditions.

override fun getItemOffsets(
    outRect: Rect,
    view: View,
    parent: RecyclerView,
    state: RecyclerView.State
) {
    super.getItemOffsets(outRect, view, parent, state)

    val position: Int = parent.getChildAdapterPosition(view)

    if (position % 2 == 0) {
        // Apply different spacing or decoration for even items
        outRect.top = spacing
        outRect.left = spacing
        outRect.right = spacing
        outRect.bottom = spacing
    } else {
        // Apply different spacing or decoration for odd items
        outRect.top = spacing * 2
        outRect.left = spacing * 2
        outRect.right = spacing * 2
        outRect.bottom = spacing * 2
    }
}

That's it! You have successfully added a custom item decoration to your RecyclerView in Kotlin Android. You can experiment with different spacing values and decoration styles to achieve the desired visual effect for your RecyclerView.