Material-components-android: MaterialButton with specific corners rounded

[TanyaYu]

I am trying to make a button with only one side rounded (left or right).

Since the attribute app:cornerRadius is applied to all four corners of the button, I've tried to set the background:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/white" />
    <corners
        android:bottomLeftRadius="30dp"
        android:topLeftRadius="30dp" />
</shape>

<android.support.design.button.MaterialButton
        style="@style/Widget.MaterialComponents.Button"
        android:background="@drawable/my_background"/>

But it didn't work, because I suppose setting a custom background is not supported for it.

Any ideas how to reach only one rounded side for MaterialButton?

[tommybuonomo]

Hi @TanyaYu,
You can achieve this working with MaterialShapeDrawable. You'll be able to set custom corners treatments to the MaterialShapeDrawable, and apply it to your button.

For example:

    val leftShapePathModel = ShapePathModel()
    leftShapePathModel.topLeftCorner = RoundedCornerTreatment(/*radius corner in dp*/)
    leftShapePathModel.bottomRightCorner= RoundedCornerTreatment(/*radius corner in dp*/)
    val leftRoundedMaterialShape = MaterialShapeDrawable(leftShapePathModel)
    button.setBackgroundDrawable(leftRoundedMaterialShape)

[TanyaYu]

Thanks @tommybuonomo

[w8193725]

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <corners
        android:topLeftRadius="30dip"
        android:topRightRadius="0dip"
        android:bottomRightRadius="0dip"
        android:bottomLeftRadius="30dip" />

    <!--<size-->
        <!--android:height="31dp"-->
        <!--android:width="175dp" />-->
    <stroke android:width="2px" android:color="#000000" />


    <solid android:color="@color/colorBlack"/>
    <padding android:left="5dp"
        android:right="5dp"
        android:top="5dp"
        android:bottom="5dp"/>

</shape>

Try this and modify it.

[kenshin171]

How do i do this while retaining the onClick feedback animations?
e.g. ripple for api >= 21
e.g. color change api < 21

[AndroidDeveloperLB]

@tommybuonomo Pretty sure it's supposed to be in pixels.
Also, when I choose it this way, it becomes black and without any effect when clicking.
How can I set it to just have this shape for the button, yet keep the color and the clicking effect ?
I've also noticed that it's deprecated and that we should use ShapeAppearanceModel instead:
https://developer.android.com/reference/com/google/android/material/shape/ShapePathModel

So I think the correct way to do something like that could be like:

https://blog.octo.com/en/android-materialshapedrawable/

Example:

        <com.google.android.material.button.MaterialButton
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:text="asd"
            app:backgroundTint="@color/colorPrimary"
            app:shapeAppearance="@style/CustomShapeAppearance" />

    <style name="CustomShapeAppearance">
        <item name="cornerSizeTopLeft">16dp</item>
        <item name="cornerSizeTopRight">16dp</item>
    </style>