How to add custom xml background for button or layout in android studio

Problem :

And Custom background for my button, layout, textview, edittext and for all. This is a very nice look if you can add a custom background on your button. Suppose when someone click your android button it will be different background color or text color or any image.

Solution:

First in your android app/res/drawable/ folder add alert_button.xml file which will contain the following code:

-------------------------------------------

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_pressed="true" >
        <shape>
            <gradient
                android:startColor="#FF0000"
                android:endColor="#FF1223"
                android:angle="270" />
            <stroke
                android:width="2dp"
                android:color="#dcdcdc" />
            <corners
                android:radius="2dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>

    <item android:state_focused="true" >
        <shape>
            <gradient
                android:startColor="#ffc2b7"
                android:endColor="#ffc2b7"
                android:angle="270" />
            <stroke
                android:width="2dp"
                android:color="#dcdcdc" />
            <corners
                android:radius="2dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
    <item>
        <shape>
            <gradient
                android:startColor="@color/red_deep"
                android:endColor="@color/red_light"
                android:angle="270" />
            <stroke
                android:width="2dp"
                android:color="#A6A6A6" />
            <corners
                android:radius="2dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
</selector>

-------------------------------------------
You have done the most part of your custom xml background for you simple button.
Now in activity.xml file use it by this way,

-------------------------------------------

<Button
 android:text="Reset"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_gravity="right"
 android:background="@drawable/alert_button"
 android:textColor="@color/white"
 android:textStyle="bold"
 android:id="@+id/btn_reset"
 android:gravity="center" 
/>

-------------------------------------------

And you have completed your work and see the result. I think that more awesome and pretty. In my case this is look like this when I'm clicking/pressed on the button

Now See precious look is(Reset Button is little dark):

Now See after applying the code and clicking on Reset Button (It is now more dark red as our defined style from XML):

Code Explanation:

Now come to code explanation, it is a very simple code. To add a condition for pressed state just make an item inside <selector>...</selector>

<item android:state_pressed="true" >

Then, inside <shape> just add the pressed color. We have to set two color Just do this:

<gradient
  android:startColor="#FF0000"
  android:endColor="#FF1223"
  android:angle="270" 

/>

And without any state that means when no click,pressed, focused the code will look like this:

<item>
        <shape>
            <gradient
                android:startColor="@color/red_deep"
                android:endColor="@color/red_light"
                android:angle="270" />
            <stroke
                android:width="2dp"
                android:color="#A6A6A6" />
            <corners
                android:radius="2dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>

In this case additional padding is just for beautify.
I think all is clear to you now, Happy coding with android...