How to create curved like this in recyclerView. When selecting an item in the recyclerView, the background of the recyclerView will be raised a small part like this

Is there a repo or solution for this?

I tried research but no results. My experience with customView is not much.

How to create curved like this in recyclerView. When selecting an item in the recyclerView, the background of the recyclerView will be raised a small part like this

Is there a repo or solution for this?

I tried research but no results. My experience with customView is not much.

• android
• kotlin
• android-recyclerview

1 Answer 1

To Create a curved Recyclerview with a "raised" selection effect, implement a custom item layout for curved drawing and a custom ItemDecoration to manage the raised appearance and selection state. Handle selection in your adapter and optionally use ValueAnimator for smooth transitions.

Custom Item Layout (CurvedItemLayout.kt):

 class CurvedItemLayout @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : ConstraintLayout(context, attrs, defStyleAttr) {

    private val path = Path()

    override fun onDraw(canvas: Canvas) {
        // Clear previous path
        path.reset()

        // Define the curve parameters (adjust these)
        val curveRadius = 20f // Adjust curve radius
        val width = width.toFloat()
        val height = height.toFloat()

        // Start from bottom left
        path.moveTo(0f, height)
        // Line to top left
        path.lineTo(0f, curveRadius)
        // Curve to top right
        path.quadTo(width / 2, 0f, width, curveRadius)
        // Line to bottom right
        path.lineTo(width, height)
        // Close the path
        path.close()

        // Draw the path with background color
        canvas.drawPath(path, paint) // 'paint' is your background paint

        super.onDraw(canvas) // Draw children on top
    }
}

Custom Item Decoration (CurveDecoration.kt):

class CurveDecoration(private val curveRadius: Float) : RecyclerView.ItemDecoration() {

    private var selectedPosition = RecyclerView.NO_POSITION

    fun setSelectedPosition(position: Int) {
        this.selectedPosition = position
    }

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

        val position = parent.getChildAdapterPosition(view)
        if (position == selectedPosition) {
             // Add extra bottom padding for the "raised" effect
            outRect.bottom = curveRadius.toInt() // Adjust as needed
        }
    }

    override fun onDrawOver(c: Canvas, parent: RecyclerView, state: RecyclerView.State) {
        super.onDrawOver(c, parent, state)

        // ... (Code to draw shadow or highlight under selected item)
    }
}

Adapter and Usage:

class YourAdapter(...) : RecyclerView.Adapter<YourViewHolder>() {
    // ...

    var selectedPosition = RecyclerView.NO_POSITION

    // ...

    override fun onBindViewHolder(holder: YourViewHolder, position: Int) {
       // ...

       holder.itemView.setOnClickListener {
           val previousSelected = selectedPosition
           selectedPosition = position
           notifyItemChanged(previousSelected)
           notifyItemChanged(selectedPosition)
       }
    }
}

// In your Activity/Fragment
val recyclerView = findViewById<RecyclerView>(R.id.recyclerView)
val adapter = YourAdapter(...)
recyclerView.adapter = adapter

val curveDecoration = CurveDecoration(20f) // Adjust curve radius
recyclerView.addItemDecoration(curveDecoration)

// Update selected position in the decoration when it changes in the adapter
adapter.registerAdapterDataObserver(object : RecyclerView.AdapterDataObserver() {
    override fun onItemRangeChanged(positionStart: Int, itemCount: Int, payload: Any?) {
         curveDecoration.setSelectedPosition(adapter.selectedPosition)
    }
})

Try Above code