androidmaterial-designandroid-support-libraryandroid-buttonandroid-support-design

Rounded corners on material button


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?


Solution

  • 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.