How to create Gradient Android Buttons Different Designs

In this post we will see how we can create Android Button with Gradient background. We will be creating 3 different Android buttons with gradient background. I hope you find it helpful and appealing. So let’s start.android gradient buttons.

First we will create all the android drawable button resource for our gradient background.

Create following drawable resource android file and edit it as below:

res>drawable>gradientbutton1.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="270"
android:centerColor="#F82634"
android:endColor="#FA3B6F"
android:startColor="#FA7D6F" />

<padding
android:bottom="7dp"
android:left="7dp"
android:right="7dp"
android:top="7dp" />

<corners android:radius="8dp" />
</shape>

res>drawable>gradientbutton2.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="270"
android:centerColor="#4ea3fc"
android:endColor="#22c4fb"
android:startColor="#00e1fa" />

<padding
android:bottom="7dp"
android:left="7dp"
android:right="7dp"
android:top="7dp" />

<corners android:radius="8dp" />
</shape>

res>drawable>gradientbutton3.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="270"
android:centerColor="#41ec86"
android:endColor="#3bf5bc"
android:startColor="#38f9d7" />

<padding
android:bottom="7dp"
android:left="7dp"
android:right="7dp"
android:top="7dp" />

<corners android:radius="8dp" />
</shape>

res>drawable>buttonstyle1.xml:

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

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

<item
android:state_pressed="true"
android:state_enabled="true"
android:drawable="@drawable/button_pressed" />

<item
android:state_enabled="true"
android:drawable="@drawable/gradientbutton1" />
</selector>

res>drawable>buttonstyle2.xml:

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

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

<item
android:state_pressed="true"
android:state_enabled="true"
android:drawable="@drawable/button_pressed" />

<item
android:state_enabled="true"
android:drawable="@drawable/gradientbutton2" />
</selector>

res>drawable>buttonstyle3.xml:

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

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

<item
android:state_pressed="true"
android:state_enabled="true"
android:drawable="@drawable/button_pressed" />

<item
android:state_enabled="true"
android:drawable="@drawable/gradientbutton3" />
</selector>

res>drawable>button_pressed.xml:

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

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#0080ff"/>

<padding android:left="7dp"
android:top="7dp"
android:right="7dp"
android:bottom="7dp" />
<stroke
android:width="0dip"
android:color="#FFFFFF" />
<corners android:radius= "8dp" />
</shape>

And edit your activity_main.xml as below
res>layout>activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
android:orientation="vertical">

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:orientation="vertical"
android:padding="2dp">

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="@drawable/buttonstyle1"
android:padding="5dp"
android:text="Hello"
android:textColor="#fff" />

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="@drawable/buttonstyle2"
android:padding="5dp"
android:text="Hello"
android:textColor="#fff" />

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="@drawable/buttonstyle3"
android:padding="5dp"
android:text="Hello"
android:textColor="#000" />
</LinearLayout>
</LinearLayout>

Below is the result:

So, this is how we can create Android Gradient Buttons.

Also see:

How to bind Android Gridview to custom ArrayAdapter List<String>?

Thanks. Happy Coding 🙂