Skip to content Skip to sidebar Skip to footer

List Element With Swipe Actions - Buttons Not Clickable

I have a list item with three swipe actions which looks like this: The regular list item and the buttons are two different layouts defined in xml. To reveal the button actions I u

Solution 1:

The problem is solved. ItemTouchHelper.SimpleCallback swallows all your touch events. So you need to register a TouchListener for the buttons. The buttons come in my case from xml. Inspired by this I came up with the following solution:

@SuppressLint("ClickableViewAccessibility")
class NachrichtItemSwipeCallback(private val recyclerView: RecyclerView) :
    ItemTouchHelper.SimpleCallback(0, LEFT) {
    private val itemTouchHelper: ItemTouchHelper

    private var binding: ListItemNachrichtBinding? = null
    private var lastSwipedPosition: Int = -1

    init {
        // Disable animations as they don't work with custom list actions
        (this.recyclerView.itemAnimator as? SimpleItemAnimator)?.supportsChangeAnimations = false

        this.recyclerView.setOnTouchListener { _, touchEvent ->
            if (lastSwipedPosition < 0) return@setOnTouchListener false
            if (touchEvent.action == MotionEvent.ACTION_DOWN) {
                val viewHolder =
                    this.recyclerView.findViewHolderForAdapterPosition(lastSwipedPosition)
                val swipedItem: View = viewHolder?.itemView ?: return@setOnTouchListener false
                val rect = Rect()
                swipedItem.getGlobalVisibleRect(rect)

                val point = Point(touchEvent.rawX.toInt(), touchEvent.rawY.toInt())
                if (rect.top < point.y && rect.bottom > point.y) {
                    // Consume touch event directly
                    val buttons =
                        binding?.buttonActionBar?.children
                            .orEmpty()
                            .filter { it.isClickable }
                            .toList()

                    val consumed = consumeTouchEvents(buttons, point.x, point.y)
                    if (consumed) {
                        animateClosing(binding?.nachrichtListItem)
                    }
                    return@setOnTouchListener false
                }
            }
            return@setOnTouchListener false
        }

        this.itemTouchHelper = ItemTouchHelper(this)
        this.itemTouchHelper.attachToRecyclerView(this.recyclerView)
    }

    // Only for drag & drop functionality
    override fun onMove(
        recyclerView: RecyclerView,
        viewHolder: RecyclerView.ViewHolder,
        target: RecyclerView.ViewHolder
    ): Boolean = false

    override fun onChildDraw(
        canvas: Canvas,
        recyclerView: RecyclerView,
        viewHolder: RecyclerView.ViewHolder,
        dX: Float,
        dY: Float,
        actionState: Int,
        isCurrentlyActive: Boolean
    ) {
        binding = (viewHolder as? NachrichtViewHolder)?.binding
        val foreground = binding?.nachrichtListItem
        val background = binding?.buttonActionBar

        val backgroundWidth = background?.measuredWidth?.toFloat()

        // only draw until start of action buttons
        val x: Float = when {
            dX.absoluteValue > backgroundWidth ?: dX -> backgroundWidth?.unaryMinus() ?: dX
            else -> dX
        }

        foreground?.translationX = x
    }

    override fun onSwiped(viewHolder: RecyclerView.ViewHolder, direction: Int) {
        this.lastSwipedPosition = viewHolder.adapterPosition
        recyclerView.adapter?.notifyItemChanged(this.lastSwipedPosition)
    }

    private fun animateClosing(
        foreground: ConstraintLayout?
    ) {
        foreground ?: return
        ObjectAnimator.ofFloat(foreground, "translationX", 0f).apply {
            duration = DURATION_ANIMATION
            start()
        }.doOnEnd { applyUiWorkaround() }
    }

    // See more at https://stackoverflow.com/a/37342327/3734116
    private fun applyUiWorkaround() {
        itemTouchHelper.attachToRecyclerView(null)
        itemTouchHelper.attachToRecyclerView(recyclerView)
    }

    private fun consumeTouchEvents(
        views: List<View?>,
        x: Int,
        y: Int
    ): Boolean {
        views.forEach { view: View? ->
            val viewRect = Rect()
            view?.getGlobalVisibleRect(viewRect)

            if (viewRect.contains(x, y)) {
                view?.performClick()
                return true
            }
        }
        return false
    }

    companion object {
        private const val DURATION_ANIMATION: Long = 250
    }
}

Post a Comment for "List Element With Swipe Actions - Buttons Not Clickable"