How to create a layout which is rounded on all sides?

Question

I have created a layout which is supposed to have rounded corners on all the four sides. However, the layout shows rounded corners only in the left and right top corners. How to create a layout which has rounded corners on all the four sides (including the left and right top corners)? Here is my xml code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:layout_gravity="center"
    android:background="#FFF">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:layout_gravity="center"
        android:gravity="center"
        android:background="@drawable/rounded_linearlayout"
        android:orientation="vertical"
        android:layout_margin="@dimen/welcome_margin">
        <TextView
            android:text="@string/fitToWork"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:padding="@dimen/margintop_value"
            android:layout_marginLeft="@dimen/margin_left_value"/>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:gravity="center">
            <TextView
                android:id="@+id/tv_yes"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="match_parent"
                android:layout_gravity="center"
                android:gravity="center"
                android:text="@string/yes"
                android:textColor="#FFF"
                android:textSize="@dimen/yes_text_size"
                android:background="#B5D625"/>
            <TextView
                android:id="@+id/tv_no"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="match_parent"
                android:layout_gravity="center"
                android:gravity="center"
                android:text="@string/no"
                android:textColor="#FFF"
                android:textSize="@dimen/yes_text_size"
                android:background="#2E2E2E"/>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

Here is the rounded_linearlayout.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="rectangle">
    <solid android:color="#FFF"/>
    <corners android:bottomRightRadius="8dip"
        android:bottomLeftRadius="8dip"  
        android:topRightRadius="8dip"
        android:topLeftRadius="8dip"/>
    <stroke android:width="1dip" android:color="#AFAFAF"/>
</shape>

Thanks in advance!

Answer 1

If you want rounded corners on all the four sides then my suggestion is use a cardView instead. In cardView you can do it easily using card_view:cardCornerRadius="4dp" this attribute change the value according to your requirement.

Import CardView as a library from support library and add it in your project

Little code snippet

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/RelativeLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:background="@android:color/darker_gray"
        card_view:cardCornerRadius="8dp">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="@dimen/abc_action_bar_default_height_material"
                android:layout_alignParentBottom="true">

                <Button
                    android:id="@+id/button1"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:background="@android:color/darker_gray"
                    android:layout_weight="1"
                    android:textColor="@android:color/black"
                    android:text="Button" />

                <Button
                    android:id="@+id/button2"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:background="@android:color/black"
                    android:layout_weight="1"
                    android:textColor="@android:color/white"
                    android:text="Button" />
            </LinearLayout>

            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:text="Large Text"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:textColor="@color/abc_background_cache_hint_selector_material_dark" />
        </RelativeLayout>
    </android.support.v7.widget.CardView>

</RelativeLayout>

Answer 2

First of all, if you need all the corners to be rounded, you don't need to mention all the corners one by one, add this:

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

I pulled your code and compiled it, it looks like it is working. The only thing is that your buttons are aligned with bottom of your parent LinearLayout and doesn't let you to see the bottom corners. I added a bit of padding to the parent LinearLayout and now all the rounded corners are visible.

EDIT: I changed your code to this and it worked: Here is the layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    android:background="#FFF"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:layout_gravity="center"
        android:layout_margin="10dp"
        android:background="@drawable/rounded"
        android:gravity="center"
        android:orientation="vertical"
        android:padding="10dp" >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginLeft="10dp"
            android:padding="10dp"
            android:text="fitToWork" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:gravity="center" >

            <TextView
                android:id="@+id/tv_yes"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_gravity="center"
                android:layout_weight="1"
                android:background="#B5D625"
                android:gravity="center"
                android:text="yes"
                android:textColor="#FFF"
                android:textSize="25sp" />

            <TextView
                android:id="@+id/tv_no"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_gravity="center"
                android:layout_weight="1"
                android:background="#2E2E2E"
                android:gravity="center"
                android:text="no"
                android:textColor="#FFF"
                android:textSize="35sp" />
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

and here the drawable:

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

    <solid android:color="#FFF" />

    <corners
        android:bottomLeftRadius="8dip"
        android:bottomRightRadius="8dip"
        android:topLeftRadius="8dip"
        android:topRightRadius="8dip" />

    <stroke
        android:width="1dip"
        android:color="#AFAFAF" />

</shape>

Let me know if it work for you.

Cheers A.