Android App Rounded Corner Button

Here I’ll show you how to create a rounded corner button in android app developed from AndroidStudio.

Requirements

A PC of course 😄
AndroidStudio (here I use 4.2.2)
Basic android app development knowledge

Lets Start

Create new android project if you don’t have one. Or you can try in your current project so it’s up to you 😉
Right click on drawable -> New -> Drawable Resource File
Give drawable file name, the name is up to you but in this sample I named it rounded_corner and then OK.

Give this snipped code to the drawable file.

1
2
3
4
5


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

Drawable file content

Add the rounded corner drawable to button element in layout file with this code attribute android:background="@drawable/rounded_corner". Also, you can modify with following attributes

1
2
3
4


<!-- to tint button background -->
android:backgroundTint="@color/text_primary_light"
<!-- to recolor the button's text -->
android:textColor="@color/pastel_sand_3"

Drawable file content

Update: 2021-08-14 (Ripple)

With custom drawable, the ripple effect will disappear. So, to achieve it back then you can add new drawable ( read step 2 ) but this time I name the file as ripple_dark. Then give this snipped code to the drawable file

1
2
3
4
5
6


<?xml version="1.0" encoding="utf-8"?>
<ripple
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/text_secondary_dark">
    <item android:drawable="@drawable/rounded_corner" />
</ripple>

note that the code @color/text_secondary_dark is defined in res/values/colors.xml. You can change it to any color you prefered.

Next step, add ripple_dark in android:background of <Button> element in layout.

Ok, thats all I can share now, hope this can help you on creating android application with AndroidStudio. As always, see you in next article guys 👋