Search code examples
androidandroid-recyclerviewandroid-drawableitemtouchhelper

Android ItemTouchHelper: How to draw growing circle during Swipe

I am using an ItemTouchHelper to trigger a swipe action for a RecylcerView item. When swiping, a circle should appear in the background from the halfway point and this should get bigger and bigger until the complete item becomes the colour of the circle.

The result should look something like this:

enter image description here

enter image description here

enter image description here

Currently I'm using the onChildDraw method of the ItemTouchHelper

override fun onChildDraw(c: Canvas,recyclerView: RecyclerView, viewHolder: RecyclerView.ViewHolder,
dX: Float, dY: Float, actionState: Int, isCurrentlyActive: Boolean) {

...

val backgroundGrey = ColorDrawable()
backgroundGrey.Color.parseColor("#CFD8DC")
backgroundGrey.setBounds(
    itemView.right + dx,
    itemView.top,
    itemView.right,
    itemView.bottom
)
backgroundGrey.draw(c)

val itemHeight = itemView.bottom - itemView.top
val iconTop = itemView.top + (itemHeight - icon.intrinsicHeight) / 2
val iconMargin = (itemHeight - icon.intrinsicHeight) * 2
val iconLeft = itemView.right + iconMargin - icon.intrinsicWidth + dx
val iconRight = itemView.right + iconMargin + dx
val iconBottom = iconTop + icon.intrinsicHeight

val circle = GradientDrawable()
circle.shape = GradientDrawable.OVAL
circle.cornerRadii = floatArrayOf(0f, 0f, 0f, 0f, 0f, 0f, 0f, 0f)
circle.setColor(Color.parseColor("#ba000d"))

cirle.setBounds(iconLeft, iconTop, iconRight, iconBottom) // Size like Icon
//cirle.setBounds(itemView.right + dx, itemView.top, itemView.right,itemView.bottom) // circle gets stretched
//cirle.setBounds(0, 0, 1500,1500) // circle overlaps other recyclerview items
cirle.draw(c)

val icon = ContextCompat.getDrawable(context, R.drawable.ic_baseline_delete_24)
icon.setBounds(iconLeft, iconTop, iconRight, iconBottom)
icon.draw(c)

}

I have tried different approaches, but none has brought the desired result. The various results look like this:

enter image description here

or

enter image description here

Does anyone have an idea how to achieve the result from the top images?

Solution

  • You might want to put a clip on your canvas before drawing the circle as described e.g. in here.