RecyclerView add icon on right swipe

Question

I've added the touchCallback to my RecyclerView and i was adding a background color when the item is swiped with a relative icon.

The issue is that I achieved the positioning of the icon on left swipe, but i can't set it correctly when the item is swiped to right.

I just can see the icon partially while i would it to be shown as in the left swipe..

Actually all looks like this:

And my touchCallback function is the following:

private fun initSwipe(recycler: RecyclerView) {
    val simpleItemTouchCallback = object : ItemTouchHelper.SimpleCallback(0, ItemTouchHelper.LEFT or ItemTouchHelper.RIGHT) {
        private val clearPaint = Paint().apply { xfermode = PorterDuffXfermode(PorterDuff.Mode.CLEAR) }
        override fun onMove(recyclerView: RecyclerView, viewHolder: RecyclerView.ViewHolder, target: RecyclerView.ViewHolder): Boolean {
            return false
        }

        override fun onSwiped(viewHolder: RecyclerView.ViewHolder, direction: Int) {
            val position = viewHolder.adapterPosition

            if (direction == ItemTouchHelper.LEFT) {

                Toast.makeText(activity, position.toString(), Toast.LENGTH_LONG).show()
                recycler.adapter?.notifyItemChanged(position)
            } else {

                Toast.makeText(activity, position.toString(), Toast.LENGTH_LONG).show()
                recycler.adapter?.notifyItemChanged(position)
            }


        }

        override fun onChildDraw(
            c: Canvas,
            recyclerView: RecyclerView,
            viewHolder: RecyclerView.ViewHolder,
            dX: Float,
            dY: Float,
            actionState: Int,
            isCurrentlyActive: Boolean
        ) {
            val background = ColorDrawable()
            val itemView = viewHolder.itemView
            val itemHeight = itemView.bottom - itemView.top
            val isCanceled = dX == 0f && !isCurrentlyActive

            if (isCanceled) {
                clearCanvas(c, itemView.right + dX, itemView.top.toFloat(), itemView.right.toFloat(), itemView.bottom.toFloat())
                super.onChildDraw(c, recyclerView, viewHolder, dX, dY, actionState, isCurrentlyActive)
                return
            }

            if (dX > 0) {
                val editIcon = ContextCompat.getDrawable(requireContext(), R.drawable.ic_edit)
                val intrinsicWidth = editIcon?.intrinsicWidth
                val intrinsicHeigh = editIcon?.intrinsicHeight
                // Draw the green background
                val backgroundColor = Color.parseColor("#32a852")
                background.color = backgroundColor
                background.setBounds(itemView.left, itemView.top, dX.toInt() + 10, itemView.bottom)
                background.draw(c)

                // Calculate position of delete icon
                val deleteIconTop = itemView.top + (itemHeight - intrinsicHeigh!!) / 2
                val deleteIconMargin = (itemHeight - intrinsicHeigh) / 2
                val deleteIconLeft = itemView.left - deleteIconMargin - intrinsicWidth!!
                val deleteIconBottom = deleteIconTop + intrinsicHeigh

                // Draw the delete icon
                editIcon.setBounds(deleteIconLeft, deleteIconTop, deleteIconMargin, deleteIconBottom)
                editIcon.draw(c)
            }else {
                val deleteIcon = ContextCompat.getDrawable(requireContext(), R.drawable.ic_delete)
                val intrinsicWidth = deleteIcon?.intrinsicWidth
                val intrinsicHeigh = deleteIcon?.intrinsicHeight
                // Draw the delete background
                val backgroundColor = Color.parseColor("#f44336")
                background.color = backgroundColor
                background.setBounds(itemView.right + dX.toInt(), itemView.top, itemView.right, itemView.bottom)
                background.draw(c)

                // Calculate position of delete icon
                val deleteIconTop = itemView.top + (itemHeight - intrinsicHeigh!!) / 2
                val deleteIconMargin = (itemHeight - intrinsicHeigh) / 2
                val deleteIconLeft = itemView.right - deleteIconMargin - intrinsicWidth!!
                val deleteIconRight = itemView.right - deleteIconMargin
                val deleteIconBottom = deleteIconTop + intrinsicHeigh

                // Draw the delete icon
                deleteIcon.setBounds(deleteIconLeft, deleteIconTop, deleteIconRight, deleteIconBottom)
                deleteIcon.draw(c)
            }

            super.onChildDraw(c, recyclerView, viewHolder, dX, dY, actionState, isCurrentlyActive)
        }


        private fun clearCanvas(c: Canvas?, left: Float, top: Float, right: Float, bottom: Float) {
            c?.drawRect(left, top, right, bottom, clearPaint)
        }
    }


    val itemTouchHelper = ItemTouchHelper(simpleItemTouchCallback)
    itemTouchHelper.attachToRecyclerView(recycler)
}

Answer 1

I created a library for that exact usage, it adds the icons and optionally texts too, in both swiping directions. You can add it to your build.gradle. Here's the link to the documentation: https://github.com/kevingermainbusiness/ItemDecorator

Answer 2

Left side of the icon should be at the left edge of the view plus the margin size:

val deleteIconLeft = itemView.left + deleteIconMargin

You didn't calculate a right side. The right side should be the left side plus the width:

val deleteIconRight = deleteIconLeft + instrinsicWidth!!

And then you need to use the right side, not the margin, when setting bounds:

editIcon.setBounds(deleteIconLeft, deleteIconTop, deleteIconRight, deleteIconBottom)