How to customize/decorate a button in Android Studio?

How can we customize button in Android Studio?. It can be a background color, its shape, its fonts, image, etc. It can be accomplished by using the background property of the button that should be drawable.

Let see how we can do it by example-

First, create a button on an activity.

<Button    android:id="@+id/button"    android:layout_width="wrap_content"  

  android:layout_height="wrap_content"    android:text="Button" 

   tools:layout_editor_absoluteX="45dp"    tools:layout_editor_absoluteY="31dp" />

Now create a drawable resource file. To create this expand your app in project directory structure. Right click on res directory, then select New ----> Android resource file. Now put the file name (

I have used button1.xml) then Ok.

Now in this resource file (button1.xml), write the code for button customization.

See below the code-

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle">

 <!--shape of button [You can use here rectangle, oval, line, Ring] -->

<solid android:color="#eeffeeee" /> <!--color of button -->

<corners android:bottomRightRadius="38dp" 

   android:bottomLeftRadius="38dp"  

  android:topRightRadius="38dp"   

 android:topLeftRadius="38dp"/> <!--corners of button -->

</shape>

Now in button, add the background property like -

android:background="@drawable/button1" 

button1 is drawable resource file name that you have created in res ---> drawable folder.

Some time we require image as well as test on button then -

Copy your image in res ---> drawable folder. Make sure that the file name should only contain characters and digits and file name should start only from small letter alphabets.

Now use another property in your button -

android:drawableLeft="@drawable/icon"

Where icon is image file name, which you have copied in res --> drawable.

Now See the complete activity code and structure.

Here is the complete reference of resource file (copied from

https://developer.android.com/guide/topics/resources/drawable-resource#StateList) :-

 <?xml version="1.0" encoding="utf-8"?>

<shapexmlns:android="http://schemas.android.com/apk/res/android"

android:shape=["rectangle" | "oval" | "line" | "ring"] >
<corners

android:radius="integer"

android:topLeftRadius="integer"

android:topRightRadius="integer"

android:bottomLeftRadius="integer"

android:bottomRightRadius="integer" />
<gradient

android:angle="integer"

android:centerX="float"

android:centerY="float"

android:centerColor="integer"

android:endColor="color"

android:gradientRadius="integer"

android:startColor="color"

android:type=["linear" | "radial" | "sweep"]
android:useLevel=["true" | "false"] />
<padding

android:left="integer"

android:top="integer"

android:right="integer"

android:bottom="integer" />
<size

android:width="integer"

android:height="integer" />
<solid

android:color="color" />
<stroke

android:width="integer"

android:color="color"

android:dashWidth="integer"

android:dashGap="integer" />

 </shape>

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape=["rectangle" | "oval" | "line" | "ring"] >
    <corners
        android:radius="integer"
        android:topLeftRadius="integer"
        android:topRightRadius="integer"
        android:bottomLeftRadius="integer"
        android:bottomRightRadius="integer" />
    <gradient
        android:angle="integer"
        android:centerX="float"
        android:centerY="float"
        android:centerColor="integer"
        android:endColor="color"
        android:gradientRadius="integer"
        android:startColor="color"
        android:type=["linear" | "radial" | "sweep"]
        android:useLevel=["true" | "false"] />
    <padding
        android:left="integer"
        android:top="integer"
        android:right="integer"
        android:bottom="integer" />
    <size
        android:width="integer"
        android:height="integer" />
    <solid
        android:color="color" />
    <stroke
        android:width="integer"
        android:color="color"
        android:dashWidth="integer"
        android:dashGap="integer" />
</shape>

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape=["rectangle" | "oval" | "line" | "ring"] >
    <corners
        android:radius="integer"
        android:topLeftRadius="integer"
        android:topRightRadius="integer"
        android:bottomLeftRadius="integer"
        android:bottomRightRadius="integer" />
    <gradient
        android:angle="integer"
        android:centerX="float"
        android:centerY="float"
        android:centerColor="integer"
        android:endColor="color"
        android:gradientRadius="integer"
        android:startColor="color"
        android:type=["linear" | "radial" | "sweep"]
        android:useLevel=["true" | "false"] />
    <padding
        android:left="integer"
        android:top="integer"
        android:right="integer"
        android:bottom="integer" />
    <size
        android:width="integer"
        android:height="integer" />
    <solid
        android:color="color" />
    <stroke
        android:width="integer"
        android:color="color"
        android:dashWidth="integer"
        android:dashGap="integer" />
</shape>