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:
class ConcaveRoundedCornerTreatment : CornerTreatment() {
override fun getCornerPath(
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
)
}
companion object {
const val ANGLE_LEFT = 180f
const val ANGLE_BOTTOM = 90f
}
}
And just apply it to the Button:
<com.google.android.material.button.MaterialButton
android_id="@+id/concave"
app_cornerRadius="16dp"
..>
with:
val materialButton = findViewById<MaterialButton>(R.id....)
val concaveRoundedCornerTreatment = 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-list xmlns_android="http://schemas.android.com/apk/res/android">
<item>
<shape xmlns_android="http://schemas.android.com/apk/res/android"
android_shape="rectangle">
<solid android_color="@color/colorPrimary" />
<stroke
android_width=".05dp"
android_color="#d2d2d2" />
<corners
android_bottomLeftRadius="10dp"
android_bottomRightRadius="10dp"
android_topLeftRadius="10dp"
android_topRightRadius="10dp" />
</shape>
</item>
<item
android_bottom="410dp"
android_left="100dp"
android_right="-100dp"
android_top="-300dp">
<shape xmlns_android="http://schemas.android.com/apk/res/android"
android_shape="oval">
<solid android_color="#ffffff" />
</shape>
</item>
then set this drawable as background for your view(eg:linearlayout)
Note:please adjust the dimensions according to your need
Problem :
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. There should be text and images inside the component.
Any suggestion?
Thank you
Comments
Comment posted by Gabriele Mariotti
Use a MaterialButton with a custom ShapeAppareance
Comment posted by JoSeBu
@gabrielemariotti I’m looking for but can’t see the shapeappareance property for MaterialButton
Comment posted by CornerTreatments and EdgeTreatment
Check the
Comment posted by JoSeBu
@gabrielemariotti yes, but is for rounded corners or cut corners, i need an “inverse rounded” corners. Or something I’m not seeing … Can you clarify it me?
Comment posted by Gabriele Mariotti
You can build your own CornerTreatment. Just “draw” the corner path. In my answer you can find an example.
Comment posted by Gabriele Mariotti
@JoSeBu Yes, you can apply the
Comment posted by JoSeBu
I am testing changing only: val materialButton = findViewById
Comment posted by Gabriele Mariotti
@JoSeBu Just use the
Comment posted by Gabriele Mariotti
I am using the 1.2.0-beta01, but to be honest I am not sure that the issue is the version. There is nothing special in my layout.
Comment posted by JoSeBu
because indeed the version was the problem, with your version it works correctly, thank you very much
Comment posted by JoSeBu
ok, this is to put it vertical, I have tried with rotate and I could not rotate it, only one square comes out. And with this I would have the problem that I cannot put any type of shadow, in the end this is like putting a background image. From what I see making forms of this style it is not contemplated in android, right?