Rounded corners on material button

Juliano Nunes Silva Oliveira picture Juliano Nunes Silva Oliveira · Mar 9, 2017 · Viewed 71.7k times · Source

I'm following the tips from questions like this to create a button style like suggested on Material Design.

Button

However, I need to change the corner radius and haven't been able to do so by inheriting Widget.AppCompat.Button.Colored style and setting the radius parameter.

How can I have the same style but with rounded corners?

Answer

Gabriele Mariotti picture Gabriele Mariotti · May 3, 2018

With the Material Components Library:.

Add the dependency to your build.gradle:

dependencies { implementation ‘com.google.android.material:material:1.2.1’ }

In this case you can use a MaterialButton in your layout file:

<com.google.android.material.button.MaterialButton
   ....
   style="@style/Widget.MaterialComponents.Button"
   app:cornerRadius=".."
   app:strokeColor="@color/colorPrimary"/>

Use app:cornerRadius attribute to change the size of corner radius. This will round off the corners with specified dimensions.
enter image description here

You can also customize the corners using the shapeAppearanceOverlay attribute.

<style name="MyButton" parent="Widget.MaterialComponents.Button.OutlinedButton">
    <item name="shapeAppearanceOverlay">@style/MyShapeAppearance</item>
</style>
<style name="MyShapeAppearance">
    <item name="cornerFamily">rounded</item>
    <item name="cornerFamilyTopRight">cut</item>
    <item name="cornerFamilyBottomRight">cut</item>
    <item name="cornerSizeTopLeft">32dp</item>
    <item name="cornerSizeBottomLeft">32dp</item>
</style>

The official doc is here and all the android specs here.
enter image description here


With Jetpack Compose (1.0.0-alpha02) use the shape parameter:

    Button( onClick = { /* Do something! */ },
            shape = RoundedCornerShape(8.dp)) {
        Text("Button")
    }

enter image description here

    Button(modifier = Modifier.padding(16.dp),
            onClick = { /* Do something! */ },
            shape = RoundedCornerShape(
                    topLeftPercent = 50,
                    topRightPercent = 0,
                    bottomRightPercent = 0,
                    bottomLeftPercent = 50
            )
    ) {
        Text("Button")
    }

enter image description here


OLD Support Library:

With the new Support Library 28.0.0, the Design Library now contains the Material Button.

You can add this button to our layout file with:

<android.support.design.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="XXXXX"
    android:textSize="18sp"
    android:backgroundTint="@color/colorPrimary"
    app:icon="@drawable/ic_android_white_24dp" />

You can set the corner radius with this attribute:

  • app:cornerRadius: Used to define the radius used for the corners of the button

enter image description here

dependencies {
  implementation 'com.android.support:design:28.0.0'
}