In Android, when you define your user interface in XML, you can define a border for layouts. However, these borders are rectangles by default. May be, you could want to create a layout with rounded corner borders. You know how to achieve that in CSS but you don’t know how to make that in Android. This tutorial is made for you !

You’re going to learn how to create a layout with rounded corner borders by using the XML solution. That solution can be used with any kind of Android views and so layouts like linear layout or relative layout.

First step is to create a XML file under drawable folder in your project. In this file, we’re going to define the shape that will be used as background for the view :


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

  <!-- we define background color -->
  <solid android:color="#c0c0c0" />

  <!-- we define border color and thick -->
  <stroke
    android:width="3dp"
    android:color="#5b8bc7" />

  <!-- add some padding for text inside -->
  <padding
    android:bottom="15dp"
    android:left="15dp"
    android:right="15dp"
    android:top="15dp" />

  <!-- we define corner radius, note that radius can be different for each corner -->
  <corners android:radius="10dp" />

</shape>

Now, you can use this drawable as a background for the view to which you want to add rounded corner borders. To apply on a layout, code could be like that :


<LinearLayout
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_centerInParent="true"
  android:background="@drawable/my_rounded_bg" >

  <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/my_rounded_corner_msg"
    android:textStyle="bold" />
</LinearLayout>

 

You can see the result :

img_rounded

 

 

A Youtube demo video is also available to help you to make this layout with rounded corner borders step by step :