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?

Mien

Google have new framework, new technologies is better Jetpack Compose – Kilmarx

@Kilmarx Your comment doesn't make any sense. It's just advertising for the current flavour of the month. – Bhatt

Answer 1

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.

Wrapper

However, this removes the ripple effect from the button. How to get the ripple effect on customized button? – Brower

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.. – Cumbersome

This worked after I removed app:background on Button – Cosetta

Answer 2

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

Pram

it will be the best solution but after Android Studio 3.2 release currently Android Studio 3.1 will not compile Android P – Reentry

@Reentry It is not totally correct. It works with android Studio 3.1 or higher. And yes it requires to be compiled with Android P – Pram

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 – Reentry

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 – Saintjust

I believe it should be ‘com.google.android.material:material:1.1.0-alpha08’ or higher, no sign of shapeAppearance in 1.0.0 – Autolycus

after updating material library to 1.2.0 corner round has gone – Ruralize

@AbuNayem I've tried the code in the answer and it work with 1.1.0-1.2.0 and 1.3.0-alpha02 – Pram

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) – Weeks

@MortenHolmgaard apply the default 0dp in the shapeAppearanceOverlay and override the single corner – Pram

No that did not work. But I figured out that setting app:cornerRadius="@null" made the shapeAppearanceOverlay work. – Weeks

Answer 3

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"/>

Tiebout

Isn't this provided by Support Library v28 MaterialButton? – Burrow

Answer 4

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"

Prostitution

How do you set this into styles.xml file? I tried setting <item name="cornerRadius">25dp</item> but not working. – Jason

are you using com.google.android.material libs and material button please read link carefully – Prostitution

yeah, I forgot to add Material Button – Jason

Keep it simple. Thank you very much. – Chadchadabe

Answer 5

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>

Heiner

Answer 6

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>

Outhouse

Answer 7

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" />

Bialy

Answer 8

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" />
    ````

Superordinate

Answer 9

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>

Pimbley

Answer 10

shape = RoundedCornerShape(4.dp)

worked for me in the new Kotlin Jetpack Compose in Android Studio

Worser