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?

Google have new framework, new technologies is better [Jetpack Compose](https://stackoverflow.com/questions/6054562/how-to-make-the-corners-of-a-button-round/64087445#64087445) — Ucdemir, Sep 27 '20 at 10:38
@Ucdemir Your comment doesn't make any sense. It's just advertising for the current flavour of the month. — The incredible Jan, Nov 11 '21 at 08:34

Gabriele Mariotti · Answer 1 · 2021-08-28T10:54:23.957

174

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'
}

edited Aug 28 '21 at 10:54

answered May 03 '18 at 13:03

Gabriele Mariotti

320,139
94
887
841

1

it will be the best solution but after Android Studio 3.2 release currently Android Studio 3.1 will not compile Android P – amorenew May 10 '18 at 08:37
@amorenew It is not totally correct. It works with android Studio 3.1 or higher. And yes it requires to be compiled with Android P – Gabriele Mariotti May 10 '18 at 17:26
I got an error on my Android studio 3.1 when I revert back to Android O it got solved So I suspect it could be the studio – amorenew May 10 '18 at 20:45
1

When using the new MaterialButton, to make it work you also have to use the new MaterialComponents theme. For example set your theme to extend from Theme.MaterialComponents.Light.NoActionBar instead of Theme.AppCompat.Light.NoActionBar – Jordy Oct 30 '18 at 14:27
3

I believe it should be `‘com.google.android.material:material:1.1.0-alpha08’` or higher, no sign of shapeAppearance in `1.0.0` – Boris Treukhov Jul 17 '19 at 14:35
1

after updating material library to 1.2.0 corner round has gone – Abu Nayem Aug 07 '20 at 13:51
@AbuNayem I've tried the code in the answer and it work with `1.1.0`-`1.2.0` and `1.3.0-alpha02` – Gabriele Mariotti Aug 07 '20 at 16:42
I am using the shapeAppearanceOverlay to round a single corner - but what to do if as in my case the default button style defines an app:cornerRadius? Setting app:cornerRadius on the style with shapeAppearanceOverlay, to 0dp results in no corner radius appearance! (radius for the shadow from elevation seems correct though) – Morten Holmgaard Mar 02 '21 at 14:36
@MortenHolmgaard apply the default 0dp in the shapeAppearanceOverlay and override the single corner – Gabriele Mariotti Mar 02 '21 at 15:11
No that did not work. But I figured out that setting app:cornerRadius="@null" made the shapeAppearanceOverlay work. – Morten Holmgaard Mar 02 '21 at 20:11

Nikita Shaposhnik · Accepted Answer · 2020-01-28T11:20:04.017

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.

However, this removes the ripple effect from the button. How to get the ripple effect on customized button? — ssudaraka, Mar 14 '17 at 10:30
use a selector to manage all the stats of the button because with this method no animation will be played on the button on touch/hover/interaction/disable etc.. — Rachid Boudjelida, Jan 29 '20 at 22:28

Christer · Answer 3 · 2018-09-06T12:50:23.403

Rounded Material Button with Ripple effect

Create a file in drawable folder ripple.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?android:attr/colorControlHighlight">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="@color/colorPrimary" />
            <corners android:radius="20dp" />
        </shape>
    </item>
    <item android:drawable="@drawable/rounded_shape" />
</ripple>

Create a file in drawable folder rounded_shape.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"   >
    <solid
        android:color="@color/colorPrimary" >
    </solid>
    <corners
        android:radius="20dp"   >
    </corners>
</shape>

And on your Button:

<Button
android:id="@+id/button1"
android:background="@drawable/ripple"
android:text="Login"/>

Isn't this provided by Support Library v28 **MaterialButton**? — IgorGanapolsky, Mar 21 '19 at 14:20

score 10 · Answer 4 · edited Nov 21 '19 at 15:58

10

Now use MaterialButton for rounded button many more thing you can do with this. please follow link

and add app:cornerRadius="8dp"for rounded corner

and don't forget to add google material libs in build.gradle

implementation "com.google.android.material:material:1.1.0"

edited Nov 21 '19 at 15:58

dsh

12,037
3
33
51

answered Apr 24 '19 at 06:13

Lokesh

3,247
2
33
62

How do you set this into styles.xml file? I tried setting `25dp` but not working. – akshay bhange Aug 05 '19 at 08:12
are you using com.google.android.material libs and material button please read link carefully – Lokesh Aug 07 '19 at 05:37
yeah, I forgot to add Material Button – akshay bhange Aug 07 '19 at 10:18
Keep it simple. Thank you very much. – gregoryp Aug 16 '21 at 16:44

Emre Kilinc Arslan · Answer 5 · 2019-05-31T10:27:34.807

I will tell you my exact solution for this . Inside selector tags, you can put items (functionality of the buttons)

Second item of the selector tag has the opposite behaviour. You can add as much as selector (button behaviour) ADD THIS DRAWABLE XML AS A BACKGROUND OF THE BUTTON android:background="@drawable/this xml"

    <?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#ffffff"> <!-- this is the ripple color(first touch color changes into this color) -->
    <item>
        <selector> 
            <item android:state_enabled="true">
                <shape xmlns:android="http://schemas.android.com/apk/res/android"
                    android:shape="rectangle">
                    <!-- default button color -->

                    <solid android:color="@color/colorPrimary"></solid>

                    <corners android:radius="151dp"></corners>

                </shape>
            </item>
            <item> //first item was state enabled so this is automatically state disabled
                <shape xmlns:android="http://schemas.android.com/apk/res/android"
                    android:shape="rectangle">
                    <!-- button disabled color opposite behaviour -->
                    <solid android:color="#e9d204"></solid>

                    <corners android:radius="151dp"></corners>

                </shape>
            </item>
        </selector>
    </item>
    <item>
        <selector>
            <item android:state_pressed="true">
                <shape xmlns:android="http://schemas.android.com/apk/res/android"
                    android:shape="rectangle">
                    <!-- button first touch of your finger color -->
                    <solid android:color="#1989fa"></solid>

                    <corners android:radius="151dp"></corners>

                </shape>
            </item>
        </selector>
    </item>
    <item>
        <selector>
            <item android:state_hovered="true">
                <shape xmlns:android="http://schemas.android.com/apk/res/android"
                    android:shape="rectangle">
                    <!-- hovered with a note pencil -->
                    <solid android:color="#4affffff"></solid>

                    <corners android:radius="151dp"></corners>

                </shape>
            </item>
        </selector>
    </item>

</ripple>

score 4 · Answer 6 · answered Dec 08 '17 at 20:53

Also another simple way is wrap it around cardView,Remember to set the layout_width and layout_height of the cardView to wrap_content, also all the needed margin the button will need should be applied to the cardView

<android.support.v7.widget.CardView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:cardCornerRadius="8dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginBottom="40dp"
            app:elevation="10dp">

            <android.support.v7.widget.AppCompatButton
                android:id="@+id/login_twitter"
                android:tag="login_twitter"
                android:layout_width="300dp"
                android:layout_height="60dp"
                android:paddingLeft="10dp"
           android:foreground="?attr/selectableItemBackgroundBorderless"
                android:textColor="@color/blue_grey_ligthen_5"
                android:drawableLeft="@drawable/twitter"
                android:background="@color/twitter"
                android:text="@string/login_with_twitter" />
        </android.support.v7.widget.CardView>

score 2 · Answer 7 · answered May 06 '21 at 10:03

If you don't want to change the theme for the whole app.You can use the material theme for this view specifically:

<com.google.android.material.button.MaterialButton
    android:id="@+id/fooButon"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    android:fontFamily="sans-serif"
    android:padding="8dp"
==> android:theme="@style/Theme.MaterialComponents.Light"
    app:backgroundTint="@color/base_white" />

score 1 · Answer 8 · answered Mar 14 '23 at 19:53

just use MaterialButton and corner radius, but dont set background Color. to set background color, use backgrountTint and it should work properly

<com.google.android.material.button.MaterialButton
            android:id="@+id/post_comment"
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:cornerRadius="10dp"
            android:backgroundTint="@color/blue"
            android:text="Jogapla"
            android:textAllCaps="false"
            android:textSize="14sp"
            android:textColor="@color/white"
            android:fontFamily="@font/sfpro_heavy"
            android:layout_marginHorizontal="10dp"
            android:layout_marginBottom="10dp" />
    ````

score 0 · Answer 9 · answered Jul 03 '19 at 04:37

Try below code Create a drawable file called circular_button.xml and insert the below

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#008577" />
<corners android:bottomRightRadius="100dp"
    android:bottomLeftRadius="100dp"
    android:topRightRadius="100dp"
    android:topLeftRadius="100dp"/>
</shape>

Then change the background of the button to this drawable file

 <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:background="@drawable/circle_button"
      android:text="Button"/>

If you want a full circle button you can use the below drawable

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

    <solid
        android:color="#008577"/>

    <size
        android:width="120dp"
        android:height="120dp"/>
</shape>

Rounded corners on material button

9 Answers9

Update:

Old answer:

Linked

Related