How to Create Drawable Background in Android

June 20, 2012 Zaidi Android Development TutorialsAndroid Layouts

Did you know that you can create drawable background in Android? I bet you didn’t? Creating drawable as background can make your life very easy. As you all know, compared to iPhone, Android devices come in different screen sizes not to mention fragmented operating system. If you are planning to use an image as background in your app, you will have to scale it to fit all screen sizes. You don’t want to have users who like your genius idea but at the same time you failed to present to them.

Scaling images alone can take a long time reducing development and app production time. By using XML resources, you can create custom backgrounds with different shapes and never worry again about screen sizes. Drawable background can be as stylish as you want them to be by defining different shapes like oval, ring, rectangle, or line. To spice up drawable background even more, you can apply rounded corners to rectangular shapes, border around the shape, as well as solid or gradients with different colors.

First, create your project as you normally do. If you are are using Eclipse like myself, it will create an XML layout for you. To create a drawable background, create an XML file and save in res/drawable folder. To create one, right-click drawable-hdpi, go to File ->New ->Other-> Android XML File, click NEXT -> name your file, [mine is roundbg.xml] -> select shape as root element and click Finish.

Android drawable background

Rounded Corners Drawable Background

In this example, I will show you how to create a rectangle drawable background with border and rounded corners.

 

Only few lines and you are done. Very simple and easy. As you can see, <shape> is the main tag in our XML drawable background. First we need to define what shape our background is going to be. In this case I defined a rectangle on line 3, android:shape=”rectangle”. Line 4, android:color define blue as our background color. To style our rectangle with rounded corners, I added android:radius with 16dip on line 5. Last but not least, I added a red border with 8dip stroke using android:color and android:with respectively.

Other shapes you might be interested to know about that can be defined in XML drawable are android:shape=”oval”, android:shape=”oval”, android:shape=”ring”, and android:shape=”line”. I will cover these in the future unless I receive a lot of request from you.

Once you have created a drawable background, you can easly reference it as you would for other resources like strings or even images in your drawable folder. Simply reference your drawable file without .xml extention in your layout using android:background=”@drawable/rectanglebg”.

Here’s the project’s main XML layout.

 

Hope this helps and you have learned something today. Check out these two great books, Professional Android 2 Application Development  and Beginning Android 2 to learn more about app development. Till next time!

android radiusandroid rounded cornersandroid shapexml drawable background

One Response to “How to Create Drawable Background in Android”


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 class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Powered by WordPress and HQ Premium Themes.