How to make the corners of a button round

Question

I want to make the corners of a button round  Is there an easy way to achieve this in Android

User · Answer

Is there an easy way to achieve this in Android?

Yes, today there is, and it is very simple.
Just use the MaterialButton in the Material Components library with the app:cornerRadius attribute.

Something like:

    <com.google.android.material.button.MaterialButton
        android:text="BUTTON"
        app:cornerRadius="8dp"
        ../>

It is enough to obtain a Button with rounded corners.

You can use one of Material button styles. For example:

<com.google.android.material.button.MaterialButton
    style="@style/Widget.MaterialComponents.Button.OutlinedButton"
    .../>

Also starting from the version 1.1.0 you can also change the shape of your button. Just use the shapeAppearanceOverlay attribute in the button style:

  <style name="MyButtonStyle" parent="Widget.MaterialComponents.Button">
    <item name="shapeAppearanceOverlay">@style/ShapeAppearanceOverlay.MyApp.Button.Rounded</item>
  </style>

  <style name="ShapeAppearanceOverlay.MyApp.Button.Rounded" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">16dp</item>
  </style>

Then just use:

<com.google.android.material.button.MaterialButton
   style="@style/MyButtonStyle"
   .../>

You can also apply the shapeAppearanceOverlay in the xml layout:

<com.google.android.material.button.MaterialButton
   app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MyApp.Button.Rounded"
   .../>

The shapeAppearance allows also to have different shape and dimension for each corner:

<style name="ShapeAppearanceOverlay.MyApp.Button.Rounded" parent="">
    <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>

User · Answer

Create a xml file in drawable folder like below   lt  xml version  1 0  encoding  utf-8   gt   lt shape xmlns android  http   schemas android com apk res android      android shape  rectangle  android padding  10dp  gt       lt  -- you can use any color you want I used here gray color-- gt       lt solid android color   ABABAB   gt        lt corners android radius  10dp   gt   lt  shape gt    Apply this as background to button you want make corners round   Or you can use separate radius for every corner like below  android bottomRightRadius  10dp  android bottomLeftRadius  10dp  android topLeftRadius  10dp  android topRightRadius  10dp

User · Answer

Create file myButton xml   lt  xml version  1 0  encoding  utf-8   gt   lt shape xmlns android  http   schemas android com apk res android  gt       lt solid android color   color colorButton   gt       lt corners android radius  10dp   gt   lt  shape gt    add to your button    lt Button         android layout width  wrap content          android layout height  wrap content          android background   drawable myButton   gt

User · Answer

drawable folder    lt  xml version  1 0  encoding  utf-8   gt   lt shape xmlns android  http   schemas android com apk res android      android shape  rectangle  gt       lt solid android color   FFFFFF   gt       lt corners android radius  30dp   gt       lt stroke android width  2dp  android color   999999   gt   lt  shape gt    layout folder    lt Button     android id    id button2       lt  -- add style to avoid square background -- gt      style   style Widget AppCompat Button Borderless      android background   drawable corner button      android layout width  wrap content      android layout height  wrap content        gt    make sure add style to avoid square background

User · Answer

if you are using vector drawables  then you simply need to specify a  lt corners gt  element in your drawable definition  I have covered this in a blog post    If you are using bitmap   9-patch drawables then you ll need to create the corners with transparency in the bitmap image

User · Answer

This link has all the information you need  Here  Shape xml    lt  xml version  1 0  encoding  UTF-8   gt   lt shape      xmlns android  http   schemas android com apk res android              android shape  rectangle  gt        lt solid   android color   EAEAEA   gt        lt corners    android bottomLeftRadius  8dip                  android topRightRadius  8dip                  android topLeftRadius  1dip                  android bottomRightRadius  1dip                    gt   lt  shape gt    and main xml    lt  xml version  1 0  encoding  UTF-8   gt   lt LinearLayout xmlns android  http   schemas android com apk res android                android orientation  vertical                android layout width  fill parent                android layout height  fill parent  gt        lt TextView   android layout width  fill parent                  android layout height  wrap content                  android text  Hello Android from NetBeans   gt        lt Button android id    id button              android layout width  wrap content              android layout height  wrap content              android text  Nishant Nair              android padding  5dip              android layout gravity  center              android background   drawable button shape                gt   lt  LinearLayout gt    This should give you your desired result   Best of luck

User · Answer

Simple way i found out was to make a new xml file in the drawable folder and then point the buttons background to that xml file  heres the code i used    lt  xml version  1 0  encoding  utf-8   gt   lt shape xmlns android  http   schemas android com apk res android  android shape  rectangle  gt    lt solid android color   ff8100   gt   lt corners android radius  5dp   gt    lt  shape gt

User · Answer

If you want change corner radius as well as want a ripple effect in button when pressed use this -  Put button background xml in drawable   lt  xml version  quot 1 0 quot  encoding  quot utf-8 quot   gt   lt ripple xmlns android  quot http   schemas android com apk res android quot      android color  quot  F7941D quot  gt        lt item android id  quot  android id mask quot  gt           lt shape android shape  quot rectangle quot  gt               lt solid android color  quot  F7941D quot    gt               lt corners android radius  quot 10dp quot    gt           lt  shape gt       lt  item gt        lt item android id  quot  android id background quot  gt           lt shape android shape  quot rectangle quot  gt               lt solid android color  quot  FFFFFF quot    gt               lt corners android radius  quot 10dp quot    gt           lt  shape gt       lt  item gt    lt  ripple gt    Apply this background to your button   lt Button     android background  quot  drawable button background quot      android id  quot   id myBtn quot      android layout height  quot wrap content quot      android layout width  quot wrap content quot      android text  quot My Button quot    gt

User · Answer

If you want something like this    here is the code   1 Create a xml file in your drawable folder like mybutton xml and paste the following markup    lt  xml version  1 0  encoding  utf-8   gt   lt selector xmlns android  http   schemas android com apk res android   gt       lt item android state pressed  true   gt           lt shape android shape  rectangle    gt               lt corners android radius  3dip    gt               lt stroke android width  1dip  android color   5e7974    gt               lt gradient android angle  -90  android startColor   345953  android endColor   689a92     gt                       lt  shape gt       lt  item gt       lt item android state focused  true  gt           lt shape android shape  rectangle    gt               lt corners android radius  3dip    gt               lt stroke android width  1dip  android color   5e7974    gt               lt solid android color   58857e   gt                  lt  shape gt       lt  item gt         lt item  gt          lt shape android shape  rectangle    gt               lt corners android radius  3dip    gt               lt stroke android width  1dip  android color   5e7974    gt               lt gradient android angle  -90  android startColor   8dbab3  android endColor   58857e    gt                      lt  shape gt       lt  item gt   lt  selector gt    2 Now use this drawable for the background of your view  If the view is button then something like this    lt Button     android id    id button1      android layout width  wrap content      android layout height  wrap content      android padding  10dp      android textColor   ffffff      android background   drawable mybutton      android text  Buttons    gt

User · Answer

You can also use the card layout like below    lt androidx cardview widget CardView         android layout width  quot match parent quot          android layout height  quot 60dp quot          app cardCornerRadius  quot 30dp quot  gt            lt LinearLayout             android layout width  quot match parent quot              android layout height  quot match parent quot                gt                lt TextView                 android layout width  quot match parent quot                  android layout height  quot match parent quot                  android gravity  quot center quot                  android text  quot Template quot                     gt            lt  LinearLayout gt        lt  androidx cardview widget CardView gt

User · Answer

Create rounded btn xml file in Drawable folder      lt  xml version  1 0  encoding  utf-8   gt   lt shape xmlns android  http   schemas android com apk res android  gt         lt solid android color   color  FFFFFF   gt             lt stroke android width  1dp          android color   color  000000            gt         lt padding android left  1dp           android top  1dp           android right  1dp           android bottom  1dp             gt          lt corners android bottomRightRadius  5dip  android bottomLeftRadius  5dip            android topLeftRadius  5dip  android topRightRadius  5dip   gt      lt  shape gt    and use this xml file as a button background    lt Button android id    id btn  android layout width  wrap content  android layout height  wrap content  android background   drawable rounded btn  android text  Test    gt

User · Answer

style button with icon       lt Button         android id    id buttonVisaProgress          android layout width  fill parent          android layout height  wrap content          android layout gravity  center horizontal          android layout marginTop  5dp          android background   drawable shape          android onClick  visaProgress          android drawableTop   drawable ic 1468863158 double loop          android padding  10dp          android text  Visa Progress          android textColor   android color white    gt    shape xml       lt  xml version  1 0  encoding  utf-8   gt   lt shape xmlns android  http   schemas android com apk res android  android shape  rectangle  gt   lt corners android radius  14dp    gt   lt gradient     android angle  45      android centerColor   1FA8D1      android centerX  35       android endColor   060d96      android startColor   0e7e1d      android type  linear    gt   lt padding     android bottom  0dp      android left  0dp      android right  0dp      android top  0dp    gt   lt size     android width  270dp      android height  60dp    gt   lt stroke     android width  3dp      android color   000000    gt

User · Answer

create shape xml in drawable folder  like shape xml   lt  xml version  1 0  encoding  utf-8   gt   lt shape xmlns android  http   schemas android com apk res android   gt     lt stroke android width  2dp      android color   FFFFFF   gt     lt gradient      android angle  225      android startColor   DD2ECCFA      android endColor   DD000000   gt   lt corners     android bottomLeftRadius  7dp      android bottomRightRadius  7dp      android topLeftRadius  7dp     android topRightRadius  7dp    gt   lt  shape gt    and in myactivity xml  you can use   lt Button     android id    id btn Shap      android layout width  wrap content      android layout height  wrap content       android text   string Shape      android background   drawable shape   gt

User · Answer

Create an XML file like below one  Set it as background for the button  Change the radius attribute to your wish  if you need more curve for the button    button background xml   lt shape xmlns android  http   schemas android com apk res android      android shape  rectangle  gt       lt solid android color   color primary    gt       lt corners android radius  5dp    gt   lt  shape gt    Set background to your button    lt Button     android id    id button1      android layout width  wrap content      android layout height  wrap content      android background   drawable button background   gt

[android] How to make the corners of a button round?

Examples related to android

Examples related to android-button

Examples related to rounded-corners