Back to blog

Creating drawables in Android – Button backgrounds

August 18, 2013 - Posted in Mobile Development Posted by:

0 Flares Twitter 0 Facebook 0 Filament.io Made with Flare More Info'> 0 Flares ×

Android has a very good programming feature which allows you to create basic shapes, gradients and coloured backgrounds using XML’s. Same way CSS3 works for html.

Why would you want to code to create these backgrounds. I have my reasons.

  1. Same resource file will apply to all screen sizes.

  2. This will protect you from managing multiple image slices for a button for each of the screen size.

  3. Will save you on app size.

  4. We get something to learn :)

Today we will create a 3 state button background, which will handle default state, pressed state and focused state.

Lets get started.

Look up into your res folder, if you don’t already have drawable¬†folder, create it. Now create a file named button_bg.xml (you can actually name it anything you like, don’t follow me on this :) ).

Now follow me on code.

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
       <shape android:shape="rectangle">
            <corners android:topLeftRadius="4dip"
                     android:topRightRadius="4dip"
                     android:bottomLeftRadius="4dip"
                     android:bottomRightRadius="4dip"/>
            <solid android:color="#1FC1BA"/>
       </shape>
    </item>
</selector>

We define a selector tag which gives us option to add multiple items in it, each defining a different state. A item defines a drawable and its attributes. A drawable is defined by shape and shape type. For more share types have a look here. Then we define the drawable corners radius and the solid color. You may also define a <gradient > and <stroke>. <gradient> is self explanatory and <stroke> gives you a border.

The above example gives you a drawable for default button state. To extend we add two more states one for focused and one for pressed. Have a look at the code block below.

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
       <shape android:shape="rectangle">
            <corners android:topLeftRadius="4dip"
                     android:topRightRadius="4dip"
                     android:bottomLeftRadius="4dip"
                     android:bottomRightRadius="4dip"/>
            <solid android:color="#1FC1BA"/>
       </shape>
    </item>

   <item android:state_focused="true">
       <shape android:shape="rectangle">
            <corners android:topLeftRadius="4dip"
                     android:topRightRadius="4dip"
                     android:bottomLeftRadius="4dip"
                     android:bottomRightRadius="4dip"/>
            <solid android:color="#26262C"/>
       </shape>
    </item>  
   <item android:state_pressed="true">
       <shape android:shape="rectangle">
            <corners android:topLeftRadius="4dip"
                     android:topRightRadius="4dip"
                     android:bottomLeftRadius="4dip"
                     android:bottomRightRadius="4dip"/>
            <solid android:color="#1B978F"/>
       </shape>
    </item>
</selector>

Now for a final step, we call this drawable as a background to our button.

<Button 
   android:layout_width="fill_parent"  
   android:layout_height="wrap_content"
   android:background="@drawable/button_bg"/>

Load this up. The possibilities are endless. You can create button icon backgrounds, headers etc.

Did you get this to work? Have some more optimisations to this? Please share your comments below.

2 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>