Rounded corners on material button

Question

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

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 1

With the Material Components Library:.

Add the dependency to your build.gradle:

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

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.

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.

---

With Jetpack Compose 1.0.x use the shape parameter:

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

    Button(modifier = Modifier.padding(16.dp),             onClick = { /* Do something! */ },             shape = RoundedCornerShape(                 50,  // topEndPercent                 0,   // topEndPercent                 0,   // bottomEndPercent                 50.  // bottomStartPercent             )     ) {         Text("Button")     } 

---

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

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

Answer 2

Update:

Answer by Gabriele Mariotti below is now better.

Old answer:

You need to inherit that style.

Add into your styles.xml:

 <style name="AppTheme.RoundedCornerMaterialButton" parent="Widget.AppCompat.Button.Colored">         <item name="android:background">@drawable/rounded_shape</item>  </style> 

Add file drawable/rounded_shape.xml:

<shape     xmlns:android="http://schemas.android.com/apk/res/android"     android:shape="rectangle"   >      <solid         android:color="@color/colorAccent" >     </solid>      <corners         android:radius="11dp"   >     </corners>  </shape> 

And finally in your layout:

 <Button        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="Test Text"        style="@style/AppTheme.RoundedCornerMaterialButton"/> 

Edit: updated answer to use theme's color rather than hardcoded one.