Tuesday, August 31, 2021

How to make curved layout in Android

 

Creating a linear layout with curved or rounded bottom is pretty simple.  While it is possible to play around with layer-lists or card-view, I’m going to show you a way to get this done, purely through XML.

 

Step 1: Create my_shape.xml drawable resource file under res->drawable.

Define an oval shape and give it some solid colors.

 

Drawable Code: 
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <solid android:color="#00b300"/>
        </shape>
   </item>
</selector>
 
Step 2: tag the drawable resource file just created to your imageview element.
Give it some Linear and Relative Layout containers. 
Your res->layout file will look like:

Layout code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   
android:orientation="vertical" android:layout_width="match_parent"
   
android:layout_height="match_parent" android:gravity="center"
>
    <RelativeLayout
       
android:layout_width="match_parent"
       
android:background="#fefefe"
       
android:layout_height="match_parent"
>
        <RelativeLayout
           
android:layout_width="match_parent"
           
android:background="#00b300"
           
android:layout_height="150dp"
>
        </RelativeLayout>

        <ImageView
           
android:layout_width="match_parent"
           
android:layout_height="120dp"
           
android:layout_marginTop="85dp"
            
android:src="@drawable/my_shape"
/>
    </RelativeLayout>
</LinearLayout>

Play around with the Relativelayout and ImageView heights to test your results….