Rounded Layout Android Tutorial with images and Code

Graphical User Interface is what makes all the difference when it comes to Android app development or iOS. You may have a wonderful application but if the UI is poor, users may not find it interesting or kin to use it.

In this tutorial, I will be taking you through on how to create or make your own rounded effect on layout of any view (LinearLayout, RelativeLayout, ImageView, Button, etc) in Android.

We'll first create a rounded layout on all sides.

 STEPS

1. Right click on your drawable folder and choose Drawable resource file
2. Give it a name. For the sake of this tutorial. I will give it the name all_rounded_layout.xml

In your newly launched file, change the selector tag to shape

to

Then add the following CODE between 

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

and

</shape>

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

    <solid android:color="#8bb32e"></solid>
    <stroke android:width="1dp"
        android:color="#dddddd"></stroke>
    <padding android:bottom="5dp"
        android:top="5dp"
        android:left="5dp"
        android:right="5dp"></padding>
    <corners android:radius="10dp"></corners>
</shape>

Lets proceed to our View (LinearLayout,RelativeLayout,ImageView, etc). The view that you want it to have rounded effect. Now we'll use all_rounded_layout as background in our intended view.

<LinearLayout android:layout_width="20dp"
        android:layout_height="20dp"
        android:background="@drawable/all_rounded_layout"
        android:layout_centerInParent="true">
         
         <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/ImageView1"
            android:padding="5dp"
            android:background="@drawable/event"
            android:src="@drawable/ic_talktojoegee"
            android:elevation="4dp"/>
         
    </LinearLayout>

NOTE:

The LinearLayout where we've used our all_rounded_layout as backround has a HEIGHT of 20dp and WIDTH of 20dp. Therefore, our corners tag has a radius of 10dp so that we can get a perfect rounded circle.

If you would like to have rounded effect on maybe extreme right or left or bottomLeft or bottomRight, use any of the attributes below in the corners tag.

 <corners
        android:bottomRightRadius="10dp"
        android:topRightRadius="10dp"
        android:bottomLeftRadius="10dp"
        android:topLeftRadius="10dp"></corners>

If you have any question or not clear, let a comment below. Thank you