Develop Reference

Android: Two LinearLayout overlap in ScrollView

I have an Android layout issue.
I have (1) a ScrollView (2) a TableLayout (3) a footer LinearLayout.
Currently, if the TableRow is too many, the Table will overlap the footer Layout.
The following is my xml layout.
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#F7F7F7">
<LinearLayout
android:id="#+id/account_section"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Head Text" />
<TableLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TableRow
android:layout_width="wrap_content"
android:layout_height="100dp"
android:background="#CCCCCC">
<TextView
android:layout_width="wrap_content"
android:layout_height="100dp"
android:text="1" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="100dp"
android:background="#CCCCCC">
<TextView
android:layout_width="wrap_content"
android:layout_height="100dp"
android:text="2" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="100dp"
android:background="#CCCCCC">
<TextView
android:layout_width="wrap_content"
android:layout_height="100dp"
android:text="3" />
</TableRow>
</TableLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/footer_section"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical">
<ImageView
android:id="#+id/footer_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/footer_image" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="#dimen/footer_height"
android:background="#333333">
<TextView
android:id="#+id/usage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:text="Test" />
<TextView
android:id="#+id/dashboard_copy_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="#string/copy_right" />
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
</ScrollView>
If the TableRow is too many, the "table" will overlap the "footer".
How to solve this layout issue?
Thanks in advance.
Eric
Add screenshot

Use this layout and see if it works
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="fill_parent" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/footer_section" >
<LinearLayout
android:id="#+id/account_section"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Head Text" />
<TableLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TableRow
android:layout_width="wrap_content"
android:layout_height="100dp"
android:background="#CCCCCC" >
<TextView
android:layout_width="wrap_content"
android:layout_height="100dp"
android:text="1" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="100dp"
android:background="#CCCCCC" >
<TextView
android:layout_width="wrap_content"
android:layout_height="100dp"
android:text="1" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="100dp"
android:background="#CCCCCC" >
<TextView
android:layout_width="wrap_content"
android:layout_height="100dp"
android:text="1" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="100dp"
android:background="#CCCCCC" >
<TextView
android:layout_width="wrap_content"
android:layout_height="100dp"
android:text="1" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="100dp"
android:background="#CCCCCC" >
<TextView
android:layout_width="wrap_content"
android:layout_height="100dp"
android:text="1" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="100dp"
android:background="#CCCCCC" >
<TextView
android:layout_width="wrap_content"
android:layout_height="100dp"
android:text="1" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="100dp"
android:background="#CCCCCC" >
<TextView
android:layout_width="wrap_content"
android:layout_height="100dp"
android:text="1" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="100dp"
android:background="#CCCCCC" >
<TextView
android:layout_width="wrap_content"
android:layout_height="100dp"
android:text="2" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="100dp"
android:background="#CCCCCC" >
<TextView
android:layout_width="wrap_content"
android:layout_height="100dp"
android:text="3" />
</TableRow>
</TableLayout>
</LinearLayout>
</ScrollView>
<LinearLayout
android:id="#+id/footer_section"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:orientation="vertical" >
<ImageView
android:id="#+id/footer_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#333333" >
<TextView
android:id="#+id/usage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:text="Test" />
<TextView
android:id="#+id/dashboard_copy_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="copy_right" />
</RelativeLayout>
</LinearLayout>
</RelativeLayout>

Positioning elements with percentage

i want to put, for example, 9 elements (others layouts or imageviews) in rows of three. In html I would put each div with 33.3% height/width and would word.
How can i do that in android layout XML? I can't find any info about percentage or positioning like that...
Thanks folks!

you can use either GridView or simple LinearLayout with 3 item each row with layout weight 1 for each column. Unlike GridView (or ListView), if you use LinearLayout it wont be reused when View draw outside screen.
here simple using simple LinearLayout:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/row1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/location1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<Button
android:id="#+id/location2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<Button
android:id="#+id/location3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:id="#+id/row2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/location4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<Button
android:id="#+id/location5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<Button
android:id="#+id/location6"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"/>
</LinearLayout>
</LinearLayout>

just replace those drawables
use LinearLayout with layout_weight will solve ur problem here
<LinearLayout
android:id="#+id/menLinearLayout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical" >
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/circle" >
<ImageView
android:id="#+id/imageView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/men_icon" />
</FrameLayout>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="Men&apos;s"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/white" />
</LinearLayout>
<LinearLayout
android:id="#+id/womenLinearLayout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical" >
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/circle" >
<ImageView
android:id="#+id/imageView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/women_icon" />
</FrameLayout>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="Women&apos;s"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/white" />
</LinearLayout>
<LinearLayout
android:id="#+id/kidLinearLayout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical" >
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/circle" >
<ImageView
android:id="#+id/imageView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/kids_icon" />
</FrameLayout>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="Kid&apos;s"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/white" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<LinearLayout
android:id="#+id/costumeLinearLayout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical" >
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/circle" >
<ImageView
android:id="#+id/imageView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/costume_icon" />
</FrameLayout>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="Costume&apos;s"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/white" />
</LinearLayout>
<LinearLayout
android:id="#+id/winnerLinearLayout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical" >
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/circle" >
<ImageView
android:id="#+id/imageView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/winner_icon" />
</FrameLayout>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="Winner&apos;s"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/white" />
</LinearLayout>
<LinearLayout
android:id="#+id/partiesLinearLayout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical" >
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/circle" >
<ImageView
android:id="#+id/imageView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/parties_icon" />
</FrameLayout>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="Parties"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/white" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<LinearLayout
android:id="#+id/selFieLinearLayout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical" >
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/circle" >
<ImageView
android:id="#+id/imageView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/selfie_icon" />
</FrameLayout>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="Selfie&apos;s"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/white" />
</LinearLayout>
<LinearLayout
android:id="#+id/groupLinearLayout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical" >
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/circle" >
<ImageView
android:id="#+id/imageView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/group_icon" />
</FrameLayout>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="Groups"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/white" />
</LinearLayout>
<LinearLayout
android:id="#+id/proLinearLayout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical" >
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/circle" >
</FrameLayout>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="Pro&apos;s"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/white" />
</LinearLayout>
</LinearLayout>

Odd default formatting on Button?

Can anyone tell me why this (the circled part) is happening? This happened immediately after I added it to the activity.
The all important (and relevant) part of the xml:
<TableLayout
android:id="#+id/tableLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp" >
<TextView
android:id="#+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:text="Delivery Approval" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="5dp" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
<TextView
android:id="#+id/textView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_vertical|center_horizontal|center"
android:layout_weight="1"
android:background="#color/CornflowerBlue"
android:padding="5dp"
android:text="Quantity Approved?"
android:textStyle="bold" />
<TextView
android:id="#+id/textView3"
style="#style/subText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Is the quantity being delivered correct and all accounted for?"
android:textStyle="italic" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
<RadioGroup
android:id="#+id/radioGroup1"
style="#style/subRadioButtons"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginRight="10dp"
android:layout_weight="1" >
<RadioButton
android:id="#+id/quaYes"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:checked="false"
android:text="Yes" />
<RadioButton
android:id="#+id/quaNo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="No" />
</RadioGroup>
</LinearLayout>
</LinearLayout>
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:padding="5dp" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
<TextView
android:id="#+id/textView4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/CornflowerBlue"
android:padding="5dp"
android:text="Condition Approved?"
android:textStyle="bold" />
<TextView
android:id="#+id/textView5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:text="Is the condition of delivery satisfactory?"
android:textAlignment="center"
android:textAppearance="#style/subText"
android:textStyle="italic" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
<RadioGroup
android:id="#+id/radioGroup2"
style="#style/subRadioButtons"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginRight="10dp"
android:layout_weight="1" >
<RadioButton
android:id="#+id/conYes"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:checked="false"
android:text="Yes" />
<RadioButton
android:id="#+id/conNo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="No" />
</RadioGroup>
</LinearLayout>
</LinearLayout>
</TableRow>
<TableRow
android:id="#+id/tableRow4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
<TextView
android:id="#+id/textView6"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#color/CornflowerBlue"
android:padding="5dp"
android:text="Proof"
android:textStyle="bold" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
<TextView
android:id="#+id/textView7"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:text="If delivery has not been approved. Please provide proof. Using either Photographic evidence, or voice, detailing issue."
android:textAppearance="#style/subText"
android:textStyle="italic" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="128dp"
android:layout_height="64dp"
android:layout_gravity="center_vertical|start"
android:layout_weight="1"
android:scaleType="fitCenter"
android:src="#drawable/icon_photo" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="128dp"
android:layout_height="64dp"
android:layout_gravity="center_vertical|end"
android:layout_weight="1"
android:scaleType="fitCenter"
android:src="#drawable/icon_record" />
</LinearLayout>
</LinearLayout>
</TableRow>
</TableLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/tableLayout1"
android:orientation="vertical"
android:padding="5dp" >
<Button
android:id="#+id/cmdNext"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Customer Signature"
android:textAlignment="center"
android:textSize="12sp" />
</LinearLayout>
</RelativeLayout>
As you can see I've set textAlignment to center, but it does nothing. Is this an issue with using a Table layout maybe? Possibly, due to other layouts in the activity, it's being forced over one side?
Edit #1 - Posted entire XML file, as it stands currently.
Edit #2 - Have tried running on the device, but still the same formatting issue, so it's definitely somewhere in my XML, maybe an inherited property (which I tend to avoid, for exactly this reason). I've also attempted to set the position of the text to any other position and nothing changes in the designer, nor on the device/emulator.
Many thanks!

Try this one (however, I couldn't test it so I am not sure)
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:minWidth="25px"
android:minHeight="25px"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/relativeLayout1">
<TableLayout
android:id="#+id/tableLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true">
<TableRow
android:id="#+id/tableRow1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp">
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:text="Delivery Approval"
android:gravity="left" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="#+id/textView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_vertical|center_horizontal|center"
android:layout_weight="1"
android:background="#color/CornflowerBlue"
android:padding="5dp"
android:text="Quantity Approved?"
android:textStyle="bold" />
<TextView
android:id="#+id/textView3"
style="#style/subText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Is the quantity being delivered correct and all accounted for?"
android:textStyle="italic" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<RadioGroup
android:id="#+id/radioGroup1"
style="#style/subRadioButtons"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginRight="10dp"
android:layout_weight="1">
<RadioButton
android:id="#+id/quaYes"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:checked="false"
android:text="Yes" />
<RadioButton
android:id="#+id/quaNo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="No" />
</RadioGroup>
</LinearLayout>
</LinearLayout>
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:padding="5dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="#+id/textView4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/CornflowerBlue"
android:padding="5dp"
android:text="Condition Approved?"
android:textStyle="bold" />
<TextView
android:id="#+id/textView5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:text="Is the condition of delivery satisfactory?"
android:textAppearance="#style/subText"
android:textStyle="italic" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<RadioGroup
android:id="#+id/radioGroup2"
style="#style/subRadioButtons"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginRight="10dp"
android:layout_weight="1">
<RadioButton
android:id="#+id/conYes"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:checked="false"
android:text="Yes" />
<RadioButton
android:id="#+id/conNo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="No" />
</RadioGroup>
</LinearLayout>
</LinearLayout>
</TableRow>
<TableRow
android:id="#+id/tableRow4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="#+id/textView6"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#color/CornflowerBlue"
android:padding="5dp"
android:text="Proof"
android:textStyle="bold" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="#+id/textView7"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:text="If delivery has not been approved. Please provide proof. Using either Photographic evidence, or voice, detailing issue."
android:textAppearance="#style/subText"
android:textStyle="italic" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<ImageView
android:id="#+id/imageView1"
android:layout_width="128dp"
android:layout_height="64dp"
android:layout_gravity="center_vertical|start"
android:layout_weight="1"
android:scaleType="fitCenter"
android:src="#drawable/icon_photo" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="128dp"
android:layout_height="64dp"
android:layout_gravity="center_vertical|end"
android:layout_weight="1"
android:scaleType="fitCenter"
android:src="#drawable/icon_record" />
</LinearLayout>
</LinearLayout>
</TableRow>
</TableLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/tableLayout1"
android:orientation="vertical"
android:padding="5dp"
android:gravity="center">
<Button
android:id="#+id/cmdNext"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Customer Signature"
android:textSize="12sp" />
</LinearLayout>
</RelativeLayout>

Equal vertically spaced columns layout

I want to make this layout on my main screen of my application.
I have stripes for each image block shown above.
Please guide my which layout (RelativeLayout, LinearLayout...etc) should I use to achieve this.
I am new to android development. I have experimented few layout but not having success. I also used FrameLayout
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="1">
<TableRow>
<FrameLayout
android:id="#+id/inboxLargeButton"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1">
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/inbox_normal"
android:id="#+id/buttonWeddingDayCheatSheet"
android:layout_gravity="center_horizontal">
</ImageView>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="2631"
android:layout_gravity="bottom"
android:gravity="center"
android:textColor="#fff"
android:textSize="50dp" />
</FrameLayout>
<FrameLayout
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1">
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/outbox_normal"
android:id="#+id/buttonShareFavoriteRecipe"
android:layout_gravity="center_horizontal">
</ImageView>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="0296"
android:layout_gravity="bottom"
android:gravity="center"
android:textColor="#fff"
android:textSize="50dp" />
</FrameLayout>
</TableRow>
<TableRow>
<FrameLayout
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1">
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/header_left_normal"
android:id="#+id/buttonWeddingDayCheatSheet"
android:layout_gravity="center_horizontal">
</ImageView>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Most sent"
android:layout_gravity="bottom"
android:gravity="center"
android:textColor="#fff"
android:textSize="15dp" />
</FrameLayout>
<FrameLayout
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1">
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/header_right_normal"
android:id="#+id/buttonShareFavoriteRecipe"
android:layout_gravity="center_horizontal">
</ImageView>
</FrameLayout>
</TableRow>
<TableRow>
<FrameLayout
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1">
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/body_left_normal"
android:id="#+id/buttonWeddingDayCheatSheet"
android:layout_gravity="center_horizontal">
</ImageView>
</FrameLayout>
<FrameLayout
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1">
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/body_right_normal"
android:id="#+id/buttonShareFavoriteRecipe"
android:layout_gravity="center_horizontal">
</ImageView>
</FrameLayout>
</TableRow>
</TableLayout>
As I want to make the each block clickable too.

Try this code:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="1" >
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:id="#+id/inboxLargeButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
<ImageView
android:id="#+id/buttonWeddingDayCheatSheet"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="#drawable/ic_launcher" >
</ImageView>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:gravity="center"
android:text="2631"
android:textColor="#fff"
android:textSize="50dp" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
<ImageView
android:id="#+id/buttonShareFavoriteRecipe"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="#drawable/ic_launcher" >
</ImageView>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:gravity="center"
android:text="0296"
android:textColor="#fff"
android:textSize="50dp" />
</LinearLayout>
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
<ImageView
android:id="#+id/buttonWeddingDayCheatSheet"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="#drawable/ic_launcher" >
</ImageView>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:gravity="center"
android:text="Most sent"
android:textColor="#fff"
android:textSize="15dp" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
<ImageView
android:id="#+id/buttonShareFavoriteRecipe"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="#drawable/ic_launcher" >
</ImageView>
</LinearLayout>
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
<ImageView
android:id="#+id/buttonWeddingDayCheatSheet"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="#drawable/ic_launcher" >
</ImageView>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
<ImageView
android:id="#+id/buttonShareFavoriteRecipe"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="#drawable/ic_launcher" >
</ImageView>
</LinearLayout>
</TableRow>
</TableLayout>

Android application layout issue

Hi all i am new to android development ..
In my application I want to display a layout as like this image:
But I am getting this image instead:
here is my code :- http://www.freefilehosting.net/bookingform_1
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/bg" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/BookingFormRoomLabel"
android:textColor="#android:color/white" />
<Spinner
android:id="#+id/roomspinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/BookingFormDocTypeLabel"
android:textColor="#android:color/white" />
<Spinner
android:id="#+id/DocTypeSpinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/BookingFormAdultsLabel"
android:textColor="#android:color/white" />
<Spinner
android:id="#+id/AdultsSpinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</TableRow>
<TableRow
android:id="#+id/tableRow4"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/BookinFormChildrensLabel"
android:textColor="#android:color/white" />
<Spinner
android:id="#+id/ChildrensSpinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</TableRow>
<TableRow
android:id="#+id/tableRow5"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/BookingFormNightsLabel"
android:textColor="#android:color/white" />
<Spinner
android:id="#+id/NightSpinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</TableRow>
<TableRow
android:id="#+id/tableRow6"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TabHost
android:id="#android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TabWidget
android:id="#android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</TabWidget>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:id="#+id/tab1"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TableRow
android:id="#+id/tableRow7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_span="2" >
<ImageView
android:id="#+id/MainImageView"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_weight="1"
android:contentDescription="#string/BookingFormMainImage"
android:src="#drawable/documentsample" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text="Button" />
</TableRow>
</LinearLayout>
<LinearLayout
android:id="#+id/tab2"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/SubImageView"
android:layout_width="200dp"
android:layout_height="200dp"
android:contentDescription="#string/BookingFormSubImage"
android:src="#drawable/documentsample" />
<Button
android:id="#+id/BtnSubImageCapture"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:text="#string/BtnBookingFormSubImageCapture" />
<Button
android:id="#+id/BtnSubImageBrowse"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right|center"
android:text="#string/BtnBookingFormSumbImageBrowse" />
<Button
android:id="#+id/BtnSubImageDelete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right|center_vertical|center"
android:text="#string/BtnBookingFormSubImageDelete" />
</LinearLayout>
</FrameLayout>
</LinearLayout>
</TabHost>
</TableRow>

Just add one more LinearLayout kept layout orientation as vertical and kept those button's in that layout.
<LinearLayout
android:id="#+id/tab2"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/SubImageView"
android:layout_width="200dp"
android:layout_height="200dp"
android:contentDescription="#string/BookingFormSubImage"
android:src="#drawable/documentsample" />
<LinearLayout
android:id="#+id/buttons_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<Button
android:id="#+id/BtnSubImageCapture"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:text="#string/BtnBookingFormSubImageCapture" />
<Button
android:id="#+id/BtnSubImageBrowse"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right|center"
android:text="#string/BtnBookingFormSumbImageBrowse" />
<Button
android:id="#+id/BtnSubImageDelete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right|center_vertical|center"
android:text="#string/BtnBookingFormSubImageDelete" />
<LinearLayout/>
</LinearLayout>