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

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.