How To Make An Irregular Shape Component Clickable? Android

I want to make a clickable component with this irregular shape, but I have no idea how I could do it, I have been looking for a couple of days but I have not seen any solution. The

Solution 1:

With the Material Components Library you can define CornerTreatment to apply to the components. There are some built-in CornerTreatment like CutCornerTreatment or RoundedCornerTreatment but you can built your own CornerTreatment.

Something like:

classConcaveRoundedCornerTreatment : CornerTreatment() {

  overridefungetCornerPath(
      shapePath: ShapePath,
      angle: Float,
      interpolation: Float,
      radius: Float
  ) {
    val interpolatedRadius = radius * interpolation
    shapePath.reset(0f, interpolatedRadius, ANGLE_LEFT, ANGLE_LEFT - angle)
    shapePath.addArc(
        -interpolatedRadius,
        -interpolatedRadius,
        interpolatedRadius,
        interpolatedRadius,
        ANGLE_BOTTOM,
        -angle
    )
  }

  companionobject {
    constval ANGLE_LEFT = 180fconstval ANGLE_BOTTOM = 90f
  }
}

And just apply it to the Button:

<com.google.android.material.button.MaterialButton
    android:id="@+id/concave"
    app:cornerRadius="16dp"
    ..>

with:

valmaterialButton= findViewById<MaterialButton>(R.id....)
    valconcaveRoundedCornerTreatment= ConcaveRoundedCornerTreatment()

    materialButton.shapeAppearanceModel = materialButton.shapeAppearanceModel.toBuilder()
            .setTopRightCorner(concaveRoundedCornerTreatment)
            .build()

Solution 2:

create a shape drawable like this:

<?xml version="1.0" encoding="utf-8"?><layer-listxmlns:android="http://schemas.android.com/apk/res/android"><item><shapexmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle"><solidandroid:color="@color/colorPrimary" /><strokeandroid:width=".05dp"android:color="#d2d2d2" /><cornersandroid:bottomLeftRadius="10dp"android:bottomRightRadius="10dp"android:topLeftRadius="10dp"android:topRightRadius="10dp" /></shape></item><itemandroid:bottom="410dp"android:left="100dp"android:right="-100dp"android:top="-300dp"><shapexmlns:android="http://schemas.android.com/apk/res/android"android:shape="oval"><solidandroid:color="#ffffff" /></shape></item>

then set this drawable as background for your view(eg:linearlayout) Note:please adjust the dimensions according to your need