Rounded button with shadow in Android

To create a rounded button, we need to create a new shape resource and configure it as shown below. This shape resource has to be assigned to the button as background, and can not only be applied to a button, but also to any component, like text fields, list elements, etc.

Rounded corners

Create the resource file in /res/drawable with “shape” as root element and include the element “corners”. This element has the attribute “radius” to set the value of the radius for all corners. To set different values for different corners, use the attributes “bottomRightRadius”, “bottomLeftRadius”, “topRightRadius” and “topLeftRadius”.

<shape android:shape="rectangle"

   <corners android:radius="20dip" />
     android:color="@color/drk_button" />

The gradient element is a gradient background and the stroke element configures the border of the button.


The next step is to create the shadow. The effect of the shadow can be done by adding a second shape under the original button shape, changing its color to a darker one.

<shape android:shape="rectangle"

     <solid android:color="@color/black_alpha"/>
     <corners android:radius="20dip"/>


To overlap different items we have to use a “layer-list” resource and include the previous shapes. The shadow should appear in first place and then the original button with some displacement. In this example, we are creating the shadow at the bottom of the button and an offset of 4px.


   <item android:drawable="@drawable/shadow"/>
     android:bottom="4px" />  


Compare results

Compare buttons

Share Button


  1. Muy bonito, muchas gracias.
    Sin embargo, tengo un problema: me aparece el siguiente error y no sé por qué:
    “error: Error: No resource found that matches the given name (at ‘color’ with value ‘@color/black_alpha’)”.
    ¿Por qué puede ser? ¿Cómo se puede definir este color?

  2. Muchas gracias por el post y tus excelentes explicaciones. Muy útil para los que empezamos con Android.

    He usado el ejemplo en una práctica para el curso que sigo y el resultado ha sido genial.

    Gracias de nuevo.

  3. Okay, this may be a stupid question for you, but:
    To which document do I have to add this code?
    What exactly are the steps to do to get a button into a rounded shape?

    Thanks 😉

    1. As the post says, you have to add this code in a new resource file created in the /res/drawable folder of your app project.

Leave a Reply

Your email address will not be published.