Post
Ask Question

Android Buttons Background

Introduction

 
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 on 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 following layout
activity_main.xml
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:background="#000011"  
  6.     android:orientation="vertical"  
  7.     tools:context=".MainActivity"  
  8.     android:padding="5dp">  
  9.    
  10.       <Button  
  11.           android:layout_height="wrap_content"  
  12.           android:layout_width="fill_parent"  
  13.           android:text="@string/button1"  
  14.           android:textColor="#ffffff"  
  15.           android:layout_marginBottom="5dp"  
  16.           />  
  17.       <Button  
  18.           android:layout_height="wrap_content"  
  19.           android:layout_width="fill_parent"  
  20.           android:text="@string/button2"  
  21.           android:textColor="#ffffff"  
  22.           android:background="@drawable/button2_background"  
  23.           android:layout_marginBottom="5dp"  
  24.           />  
  25.       <Button  
  26.           android:layout_height="wrap_content"  
  27.           android:layout_width="fill_parent"  
  28.           android:text="@string/button3"  
  29.           android:textColor="#ffffff"  
  30.           android:background="@drawable/button3_background"  
  31.           android:layout_marginBottom="5dp"  
  32.           />  
  33.       <Button  
  34.           android:layout_height="wrap_content"  
  35.           android:layout_width="fill_parent"  
  36.           android:text="@string/button4"  
  37.           android:textColor="#ffffff"  
  38.           android:background="@drawable/button4_background"  
  39.           android:layout_marginBottom="5dp"  
  40.           />  
  41.       <Button  
  42.           android:layout_height="44dp"  
  43.           android:layout_width="fill_parent"  
  44.           android:text="@string/button5"  
  45.           android:textColor="#ffffff"  
  46.           android:layout_marginBottom="5dp"  
  47.           android:background="@drawable/button5_background"  
  48.           />  
  49.       <Button  
  50.           android:layout_height="wrap_content"  
  51.           android:layout_width="fill_parent"  
  52.           android:text="@string/button6"  
  53.           android:textColor="#ffffff"  
  54.           android:background="@drawable/button6_background"  
  55.           />    
  56. </LinearLayout> 
3. Create 5 XML files (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 rectangular shape and 1 solid color. 

button2_background.xml
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. lt;selector xmlns:android="http://schemas.android.com/apk/res/android" >  
  3.      <item>  
  4.            <shape android:shape="rectangle">  
  5.   <solid android:color="#C76699"/>  
  6.            </shape>  
  7.      </item>  
  8. lt;/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
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android" >  
  3.       <item>  
  4.             <shape android:shape="rectangle">  
  5.   <gradient  
  6.                         android:startColor="#C76699"  
  7.                         android:endColor="#610033"  
  8.                         android:angle="-90"  
  9.                         android:type="linear"  
  10.                         />  
  11.                   <corners android:radius="5dp" />  
  12.             </shape>  
  13.       </item>  
  14. </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
  1. <?xml version="1.0" encoding="utf-8"?>    
  2. lt;selector xmlns:android="http://schemas.android.com/apk/res/android" >    
  3. <!-- disabled -->    
  4. <item android:state_enabled="false" >  
  5.    <shape android:shape="rectangle">  
  6.       <gradient    
  7.          android:startColor="#454545"    
  8.          android:endColor="#454545"    
  9.          android:angle="-90"    
  10.          android:type="linear"    
  11.          />  
  12.       <corners android:radius="5dp" />  
  13.    </shape>  
  14. </item>  
  15. <!-- pressed -->    
  16. <item android:state_pressed="true" android:state_enabled="true" >  
  17.    <shape android:shape="rectangle">  
  18.       <gradient    
  19.          android:startColor="#64334C"    
  20.          android:endColor="#300019"    
  21.          android:angle="-90"    
  22.          android:type="linear"    
  23.          />  
  24.       <corners android:radius="5dp" />  
  25.    </shape>  
  26. </item>  
  27. <!-- focused -->    
  28. <item android:state_focused="true">  
  29.    <shape android:shape="rectangle">  
  30.       <gradient    
  31.          android:startColor="#C76699"    
  32.          android:endColor="#610033"    
  33.          android:angle="-90"    
  34.          android:type="linear"    
  35.          />  
  36.       <corners android:radius="5dp" />  
  37.       <stroke android:width="2dp" android:color="#dddddd"/>  
  38.    </shape>  
  39. </item>  
  40. <!-- default -->    
  41. <item>  
  42.    <shape android:shape="rectangle">  
  43.       <gradient    
  44.          android:startColor="#C76699"    
  45.          android:endColor="#610033"    
  46.          android:angle="-90"    
  47.          android:type="linear"    
  48.          />  
  49.       <corners android:radius="5dp" />  
  50.    </shape>  
  51. </item>  
  52. </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
    1. <?xml version="1.0" encoding="utf-8"?>  
    2. <selector xmlns:android="http://schemas.android.com/apk/res/android" >  
    3.   <!-- default -->  
    4.   <item>  
    5.      <layer-list >  
    6.        <item>  
    7.            <shape android:shape="rectangle">  
    8.             <gradient  
    9.   android:startColor="#C76699"  
    10.                   android:endColor="#610033"  
    11.                   android:angle="-90"  
    12.                   android:type="linear"  
    13.                   />  
    14.             <corners android:radius="5dp" />  
    15.             </shape>  
    16.             </item>  
    17.             <item android:top="1dp" android:bottom="22dp" >  
    18.   <shape android:shape="rectangle">  
    19.   <solid android:color="#20ffffff"/>  
    20.             </shape>  
    21.       </item>  
    22.       </layer-list>  
    23.   </item>  
    24. </selector> 
    3.f: Button 6: Here we changed the type of the gradient to radial to get a totally different look.
     
    button6_background.xml
    1. <?xml version="1.0" encoding="utf-8"?>  
    2. <selector xmlns:android="http://schemas.android.com/apk/res/android" >  
    3.    <item>  
    4.         <shape android:shape="rectangle">  
    5.               <gradient  
    6.                   android:startColor="#C76699"  
    7.                   android:centerColor="#773D5C"  
    8.                   android:endColor="#610033"  
    9.                   android:angle="-90"  
    10.  android:type="radial"  
    11.  android:gradientRadius="150"  
    12.                   />  
    13.             <corners android:radius="50dp" />  
    14.             </shape>  
    15.   </item>  
    16. </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.
     
     
    Play around with all the attributes to get what you need or maybe accidentally you can stumble upon something better. 
     
    I hope this article will help you to make awesome designs.


    Similar Articles