Home > Tutorials > Drawing Shapes in Android

Drawing Shapes in Android

In this post I would like to share my findings about defining and using shapes.  A shape is an XML file that defines a geometric shape, including strokes, colors and gradients

Android Shapes

To define a shape:

1. Create a new Android XML file in the folder res/drawable

2. Make sure the root element of the file is <shape >. (If it’s not, then change it manually)

3. Inside the <shape> element, press CTRL + Space to reveal all the available elements you can use to define a shape:

android shapes options

As you can see, the elements are pretty self explanatory. To reveal the attributes of an element, put the cursor inside that element and press CTRL + Space:

android shape corner

4. Once the shape is defined, you can specify it as a background resource to any view: android:background=”@drawable/myshape”

Example:

res/drawable/boxbg.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

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

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

<gradient
  android:angle="270"
  android:centerColor="#6E7FFF"
  android:endColor="#142FFC"
  android:startColor="#BAC2FF" />

</shape>

 

res/drawable/box2bg.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

<solid android:color="#4D9611" />

<stroke
  android:width="4dp"
  android:color="#FFFB00" />

</shape>

 

res/layout/main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<!-- First box, boxbg.xml -->
<LinearLayout
  android:layout_width="match_parent"
  android:layout_height="80dp"
  android:layout_margin="20dp"
  android:background="@drawable/boxbg"
  android:orientation="vertical"
  android:padding="5dp" >

  <TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/hello"
    android:textColor="#000"
    android:textSize="20dp" />
</LinearLayout>

<!-- Second box, box2bg.xml -->
<LinearLayout
  android:layout_width="match_parent"
  android:layout_height="80dp"
  android:layout_margin="20dp"
  android:background="@drawable/box2bg"
  android:orientation="vertical"
  android:padding="7dp" >

  <TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/hello"
    android:textColor="#FFF"
    android:textSize="20dp" />
</LinearLayout>

</LinearLayout>

 

The final output should look like this:

android shape

About these ads
  1. March 30, 2012 at 7:53 pm

    nice tutorial! Is there any Shape creators tools for this to save time?

    • March 30, 2012 at 8:17 pm

      Hi,
      Thanks. Maybe there are, but personally did not hear anything about tools like this. If you find a good one, let us know! :)

      • March 30, 2012 at 10:11 pm

        yea i did some searching but i couldnt find any. It could realy save alot of time if this proccess was made using a tool.

        anw keep those tutorial comming :)

  2. kristobaldude
    April 19, 2012 at 2:08 am
  3. April 7, 2013 at 6:54 am

    Here is tool http://angrytools.com/android/button/ to create shape xml

  4. kulanthaivel
    October 6, 2014 at 1:48 pm

    hi i need android any quiz application source code please .this is my mail id kasckulanthaivel@gmail.com send the source code my mail id

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 517 other followers

%d bloggers like this: