Search code examples
androidkotlinandroid-recyclerviewrounded-corners

Make horizontal RecyclerView first and last item with rounded corner


All images inside recyclerView are in square shape. I have to provide corner radius to recyclerView but the inner items are square

I tried giving a shape to recyclerview but unable to achieve

Is there a way to round first and last item in android easy

round_recycler.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/white"/>

    <stroke android:width="1dp"
        android:color="@android:color/transparent"
        />

    <padding android:left="8dp"
        android:top="8dp"
        android:right="8dp"
        android:bottom="8dp"
        />

    <corners android:bottomRightRadius="7dp"
        android:bottomLeftRadius="7dp"
        android:topLeftRadius="7dp"
        android:topRightRadius="7dp"/>
</shape>

Only i have to rounded first and last item or RecylerView I also try clipOutline true to my item_row_layout

item_row_layout.xml

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

    <data>
        <import type="android.view.View" />
        <variable
            name="item"
            type="planet.beyond.domain.models.RecentBO" />

    </data>

    <planet.beyond.gallerycleanarchitecture.utis.AspectRatioImageView
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/ivPhoto"
        imagePath="@{item.imageUrl}"
        android:layout_width="90dp"
        android:clipToOutline="true"
        android:layout_height="90dp"
        android:foreground="?android:attr/selectableItemBackground"
        android:scaleType="centerCrop"
        tools:src="@tools:sample/avatars" />
</layout>

enter image description here


Solution

  • Since you're using Kotlin and DataBinding an easy way of performing such thing could be to map your item's collection to determine which one is the first item and which one is the last one.

    There are many ways you can perform this and for simplicity's sake I'll just provide a wrapper class to illustrate how I'd approach the problem:

    data class RecentBOItem(
      val data: RecentBO,
      val isFirst: Boolean,
      val isLast: Boolean
    )
    

    And having the viewmodel do something like the following:

    suspend fun getSomething(): List<RecentBOItem> {
      val recentBos = getRecentBOsFromNetwork()
      val lastIndex = recentBos.lastIndex
      return recent.withIndex().map { (index, recentBo) ->
        RecentBOItem(
          data = recentBo,
          isFirst = index == 0,
          isLast = index == lastIndex
        )
      }
    }
    

    And then provide a @BindingAdapter for the RecentBOItem that sets the round corners shape based off the isFirst and isLast flags. (That is setting the suitable R.drawable as background)