Android Buttons Background

I will be starting straight off with how to create colorful backgrounds for Android buttons. To do that you should be familiar with the basics of Android and how to create a project. You can always refer to articles in this website for how to start Android development.

This is what we will be making just by using XML:

device-2013-02-07-163433.png

Let's start by doing the following:

  1. Open Eclipse and create a new Android project

  2. Modify your main layout file and add the followinglayout 

activity_main.xml

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

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:background="#000011"

    android:orientation="vertical"

    tools:context=".MainActivity"

    android:padding="5dp">

 

      <Button

          android:layout_height="wrap_content"

          android:layout_width="fill_parent"

          android:text="@string/button1"

          android:textColor="#ffffff"

          android:layout_marginBottom="5dp"

          />

      <Button

          android:layout_height="wrap_content"

          android:layout_width="fill_parent"

          android:text="@string/button2"

          android:textColor="#ffffff"

          android:background="@drawable/button2_background"

          android:layout_marginBottom="5dp"

          />

      <Button

          android:layout_height="wrap_content"

          android:layout_width="fill_parent"

          android:text="@string/button3"

          android:textColor="#ffffff"

          android:background="@drawable/button3_background"

          android:layout_marginBottom="5dp"

          />

      <Button

          android:layout_height="wrap_content"

          android:layout_width="fill_parent"

          android:text="@string/button4"

          android:textColor="#ffffff"

          android:background="@drawable/button4_background"

          android:layout_marginBottom="5dp"

          />

      <Button

          android:layout_height="44dp"

          android:layout_width="fill_parent"

          android:text="@string/button5"

          android:textColor="#ffffff"

          android:layout_marginBottom="5dp"

          android:background="@drawable/button5_background"

          />

      <Button

          android:layout_height="wrap_content"

          android:layout_width="fill_parent"

          android:text="@string/button6"

          android:textColor="#ffffff"

          android:background="@drawable/button6_background"

          />  

</LinearLayout>


3. Create 5 XML filess (button2_background.xml, button3_background.xml, ... button6_background.xml) in the gen/drawable folder (create a drawable folder if not present)

3.a: Button 1 is simple and is a plain default Android button that everyone is familiar with

3.b: Button 2 on the other hand has a background named button2_background.xml

Now if you look at the XML you will find "tags selector" -> "item" -> "shape". Item is the graphic/drawing that is inside a single selector element and shape is the custom graphic.
We have used a single rectangler shape and 1 solid color. 
button2_background.xml

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

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

      <item>

            <shape android:shape="rectangle">

   <solid android:color="#C76699"/>

            </shape>

      </item>

</selector>


3.c: Button 3: Here we have added a gradient and corners to define the shape, this looks more like a normal button.

button3_background.xml

 

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

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

      <item>

            <shape android:shape="rectangle">

  <gradient

                        android:startColor="#C76699"

                        android:endColor="#610033"

                        android:angle="-90"

                        android:type="linear"

                        />

                  <corners android:radius="5dp" />

            </shape>

      </item>

</selector>


3.d: Button 4: If you touch button 2 or 3 you will see that it doesn't change its color i.e. we don't know whether the button is pressed. For that we add the states to button 4.

We will need to define various items for various states like android:state_enabled="false" for a disabled button and android:state_pressed="true" for a pressed button and so on.

button4_background.xml

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

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

 

  <!-- disabled -->

  <item android:state_enabled="false" >

  <shape android:shape="rectangle">

  <gradient

                        android:startColor="#454545"

  android:endColor="#454545"

                        android:angle="-90"

                        android:type="linear"

                        />

                  <corners android:radius="5dp" />

            </shape>

      </item>

 

  <!-- pressed -->

  <item android:state_pressed="true" android:state_enabled="true" >

  <shape android:shape="rectangle">

  <gradient

                        android:startColor="#64334C"

  android:endColor="#300019"

                        android:angle="-90"

                        android:type="linear"

                        />

                  <corners android:radius="5dp" />

            </shape>

      </item>

 

  <!-- focused -->

  <item android:state_focused="true">

  <shape android:shape="rectangle">

  <gradient

                        android:startColor="#C76699"

  android:endColor="#610033"

                        android:angle="-90"

                        android:type="linear"

                        />

                  <corners android:radius="5dp" />

                  <stroke android:width="2dp" android:color="#dddddd"/>

            </shape>

      </item>

 

      <!-- default -->

      <item>

  <shape android:shape="rectangle">

  <gradient

  android:startColor="#C76699"

  android:endColor="#610033"

  android:angle="-90"

  android:type="linear"

  />

  <corners android:radius="5dp" />

            </shape>

      </item>

</selector>


3.e: Button 5: Here we have added 2 items in a single item using a layer-list to give a glossy look to the button.

button5_background.xml

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

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

  <!-- default -->

  <item>

     <layer-list >

       <item>

           <shape android:shape="rectangle">

            <gradient

  android:startColor="#C76699"

                  android:endColor="#610033"

                  android:angle="-90"

                  android:type="linear"

                  />

            <corners android:radius="5dp" />

            </shape>

            </item>

            <item android:top="1dp" android:bottom="22dp" >

  <shape android:shape="rectangle">

  <solid android:color="#20ffffff"/>

            </shape>

      </item>

      </layer-list>

  </item>

</selector>


3.f: Button 6: Here we changed the type of the gradient to radial to get a totally different look.

button6_background.xml

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

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

   <item>

        <shape android:shape="rectangle">

              <gradient

                  android:startColor="#C76699"

                  android:centerColor="#773D5C"

                  android:endColor="#610033"

                  android:angle="-90"

 android:type="radial"

 android:gradientRadius="150"

                  />

            <corners android:radius="50dp" />

            </shape>

  </item>

</selector>


The purpose of this article was to help you to create awesome buttons without Photoshop and also the big additi0onal point of using XML is that instead of pngs/jpgs, we can easily modify the color whenever we want to.

Link for Google documentation: developer.android.com/guide/topics/resources/drawable-resource.html

Play around with all the attributes to get what you need or maybe accidently you can stumble upon something better. 

I hope this article will help you to make awesome designs.
 

Up Next
    Ebook Download
    View all
    Learn
    View all