Android: How to create rounded border or background

Now a days it is essential to create good-looking UI for any type of application. In android world you can make it easily with flexible way. You can draw graphics to the screen using drawable resources. There are different types of drawable in android platform such as:

  1. Shape Drawable
  2. Bitmap File
  3. Nine-Patch File
  4. Layer List
  5. State List
  6. Level List
  7. Transition Drawable
  8. Inset Drawable
  9. Clip Drawable
  10. Scale Drawable

For drawing rounded border for any Layout or View here you can use Shape Drawable. You should follow the steps to implement border -

1.  Create shape drawable resource in application res folder  such as …/res/drawable-mdpi/rounded_border.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android">
 <item>
 <shape     android:shape="rectangle" >
 <corners  android:radius="5dip" />
 <solid android:color="@color/black" />
 <stroke  android:width="2dip" android:color="@color/white"/>
 </shape>
 </item>
</layer-list>
<pre>

2. Create a layout where rounded border will be drown such as in …/layout/login.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:gravity="center"
android:background="@color/black"
android:orientation="vertical"
>

<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_gravity="center"
android:background="@drawable/rounded_border"
>

<!--your code goes here-->

</RelativeLayout>
</LinearLayout>

3.  Set login.xml to the activity that will show border contents such as in LoginActivity in onCreate(…) { setContentView(R.layout.login); }. Then you will see rounded white bordered layout, for example in my application shows as following:

rounded border

rounded border

So now your turn to start bordered layout or UI as you can imagine it. :)

References:

  1. http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape
  2. http://stackoverflow.com/questions/4146795/android-how-can-i-use-the-layer-list-and-shape-elements-to-draw-a-horizontal-rul
  3. http://groups.google.com/group/android-developers/browse_thread/thread/157740b639959c47
About these ads

About M Moniruzzaman
A passionate software engineer, have been developing applications on various platforms such as Android, iPhone, .Net (C#) technologies and web based ASP.NET, PHP, JavaScript, jQuery technologies for more than 7 years. Especially I have expertise on developing applications for Android and iPhone, as well as service oriented, client-server based applications where clients will be reside on Android/iPhone that communicate with WCF(.NET) service hosted on server. I have completed certification in Microsoft Certified Professional Developer (MCPD) on .Net 4 . I have completed my graduation in -- B.Sc in Computer Science and Engineering, ShahJalal University of Science and Technology, Bangladesh. Thanks, M. Moniruzzaman (Zaman)

7 Responses to Android: How to create rounded border or background

  1. Lenn Dolling says:

    going to try it in. 8cupsaday.com android app. whoo hooo

  2. Leon says:

    Sweet. Very nice. Thank you.

    P.S. One tiny note. In #2 instead of “will be drown” it should read “will be drawn”.

  3. Sharing says:

    thank you !!!

  4. banti says:

    thanx broo

  5. adsf says:

    thx a lot!!

  6. tux says:

    thanks

  7. Pingback: Border with title in Android? : Android Community - For Application Development

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.

%d bloggers like this: