android - Quarter Circle Button with no click events detected on transparent area

Question

I want to create a quarter circular button on the top-right corner of my view. I use ImageView, with svg image set as source, that way representing a close button, see the image below. Everything works fine, except that when I click on empty area of the ImageView, the on click event gets triggered even if there is area under the finger is transparent.

To fix that I created a simple class that implements the ImageView, and override onTouchEvent() method and implemented a way to check if the distance from the finger to the top-right corner is bigger or smaller than the radius of the circle which matches with the width of the view.

But my question is if that is the fastest way to do it, and if there is another way of detecting if touch on the empty(transparent) area of the ImageView was made.

Here is the code for class QuarterCircleButton

class QuarterCircleButton : androidx.appcompat.widget.AppCompatImageView {

    constructor(context: Context) : super(context)
    constructor(context: Context, attrs: AttributeSet?) : super(context, attrs)
    constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr)

    override fun onTouchEvent(event: MotionEvent): Boolean {

        // get radius and radius^2
        val radius = width.toFloat()
        val radius2 = radius * radius
        
        // check if the distance from the finger to the top-right corner is
        // smaller or bigger than the radius of the circle
        val distance = distancePointToPoint2(event.x, event.y, radius, 0f)
        return if (distance <= radius2) {
            super.onTouchEvent(event)
        } else {
            false
        }
    }

    companion object {

        /**
         * Distance between two points that is power of 2
         * @param x1 x coordinate of first point
         * @param y1 y coordinate of first point
         * @param x2 x coordinate of second point
         * @param y2 y coordinate of second point
         */
        fun distancePointToPoint2(x1: Float, y1: Float, x2: Float, y2: Float): Float {
            val dx = (x1 - x2)
            val dy = (y1 - y2)
            return dx * dx + dy * dy
        }
    }
}

Here is the code for the xml

<androidx.constraintlayout.widget.Guideline
     android:id="@+id/leftCloseButton"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:orientation="vertical"
     app:layout_constraintGuide_percent="0.86" />

<com.slaviboy.test.QuarterCircleButton
     android:id="@+id/closeButton"
     android:layout_width="0dp"
     android:layout_height="wrap_content"
     android:adjustViewBounds="true"
     android:scaleType="fitXY"
     android:src="@drawable/close_button"
     app:layout_constraintEnd_toEndOf="parent"
     app:layout_constraintStart_toEndOf="@id/leftCloseButton"
     app:layout_constraintTop_toTopOf="parent" />

question from:https://stackoverflow.com/questions/65557758/quarter-circle-button-with-no-click-events-detected-on-transparent-area

Answer 1

Waitting for answers