How can i setup this layout? - android

I would like to make a rather complex layout. Can someone help me, as how to do my layout.xml ?
Layout image
No. 1 is a Layout (Table, Linear etc)
No. 2 is my listview, containing a row of list_details.xml
Edit: so far I managed to do the first part
<TableLayout android:layout_height="wrap_content" android:layout_width="fill_parent">
<TableRow android:layout_width="wrap_content" android:stretchColumns="0,2" android:layout_marginTop="2sp" android:layout_height="wrap_content" >
<TextView android:id="#+id/homeTeam" android:layout_weight="2" android:paddingRight="4sp"/>
<TextView android:text="Vs" android:layout_weight="0" />
<TextView android:id="#+id/awayTeam" android:layout_weight="2" android:gravity="right" android:paddingLeft="4sp"/>
</TableRow>
</TableLayout>
<ListView android:id="#id/android:list"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</ListView>
EDIT:
Well i probably didn't explain well what i want to do. Here is a screenshot of my app
My current layout
I want the columns to align. So far i am using this xml
<?xml version="1.0" encoding="utf-8"?>
<TableLayout android:layout_height="wrap_content" android:layout_width="match_parent" android:stretchColumns="0,4" xmlns:android="http://schemas.android.com/apk/res/android">
<TableRow android:layout_width="wrap_content" android:layout_height="wrap_content">
<TextView android:id="#+id/ll_playerHome" android:layout_weight="0.5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="12sp"/>
<ImageView android:id="#+id/ll_eventHome" android:layout_width="wrap_content" android:layout_height="wrap_content"/>
<TextView android:id="#+id/ll_minute" android:layout_weight="0" android:layout_width="wrap_content" android:layout_height="wrap_content"/>
<ImageView android:id="#+id/ll_eventAway" android:layout_width="wrap_content" android:layout_height="wrap_content"/>
<TextView android:id="#+id/ll_playerAway" android:layout_weight="0.5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="right" android:textSize="12sp"/>
</TableRow>
</TableLayout>


This might do the trick:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout android:layout_width="fill_parent"
android:layout_height="wrap_content" android:id="#+id/linearLayout1">
<TextView android:layout_width="wrap_content" android:text="TextView"
android:id="#+id/textView1" android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_height="wrap_content" android:layout_weight="1"
android:gravity="center_horizontal"></TextView>
<TextView android:text="TextView" android:id="#+id/textView2"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:gravity="center_horizontal"></TextView>
<TextView android:layout_width="wrap_content" android:text="TextView"
android:id="#+id/textView3" android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_height="wrap_content" android:layout_weight="1"
android:gravity="center_horizontal"></TextView>
</LinearLayout>
<LinearLayout android:layout_width="fill_parent"
android:layout_height="wrap_content" android:id="#+id/linearLayout2">
<ListView android:layout_height="wrap_content" android:id="#+id/listView1"
android:layout_weight="1" android:layout_width="fill_parent"></ListView>
<TextView android:text="TextView" android:id="#+id/textView2"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:gravity="center_horizontal"></TextView>
<ListView android:layout_height="wrap_content" android:id="#+id/listView1"
android:layout_weight="1" android:layout_width="fill_parent"></ListView>
</LinearLayout>
</LinearLayout>

Related

Unable to align checkbox(horizontally/vertically) in Android app

I need to display checkbox. All the check-boxes should align themselves at the extreme right of the screen.However, if I change the orientation of my screen the check-box comes at the middle of the screen.Please help me to solve the issue.Thanks in advance
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#000000"
>
<LinearLayout android:id="#+id/LinearLayout02"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center"
android:orientation="vertical"
android:layout_margin="10dp">
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#000000"
>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/sf_table"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="50dp"
android:background="#drawable/test"
>
<View android:id="#+id/Divider_7"
android:layout_height="0.5dp"
android:layout_width="fill_parent"
android:background="#808080"
android:layout_marginBottom="5dp"
/>
<TableRow
android:id="#+id/tbr6"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_margin="2dip"
android:layout_marginTop="3dp"
android:layout_marginBottom="3dp"
>
<TextView
android:textStyle="bold"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="2dp"
android:layout_marginBottom="2dp"
android:textColor="#3399CC"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Pages For Website (existing pages plus new ones you need)-Contact Us"
></TextView>
</TableRow>
<View android:id="#+id/Divider_2"
android:layout_height="1.5dp"
android:layout_width="fill_parent"
android:background="#C0C0C0"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
/>
<TableRow
android:id="#+id/tbr9"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_margin="2dip"
android:layout_marginTop="3dp"
android:layout_marginBottom="3dp"
>
<TextView
android:textStyle="bold"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="2dp"
android:layout_marginBottom="2dp"
android:textColor="#ffffff"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Feedback"
></TextView>
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/feedback_id"
android:layout_gravity="right"
></CheckBox>
</TableRow>
<TableRow
android:id="#+id/tbr9"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_margin="2dip"
android:layout_marginTop="3dp"
android:layout_marginBottom="3dp"
>
<TextView
android:textStyle="bold"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="2dp"
android:layout_marginBottom="2dp"
android:textColor="#ffffff"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Tech Support"
></TextView>
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/techsupport_id"
android:layout_gravity="right"
></CheckBox>
</TableRow>
<TableRow
android:id="#+id/tbr9"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_margin="2dip"
android:layout_marginTop="3dp"
android:layout_marginBottom="3dp"
>
<TextView
android:textStyle="bold"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="2dp"
android:layout_marginBottom="2dp"
android:textColor="#ffffff"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Quote Form"
></TextView>
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/quoteform_id"
android:layout_gravity="right"
></CheckBox>
</TableRow>
</TableLayout>
</RelativeLayout>
</ScrollView>
</LinearLayout>

try the following
android:layout_gravity="right"
android:gravity="right"

android:layout_gravity is not relevant in a LinearLayout. It is meant for a FrameLayout. It means "what should be my gravity in relation to my (FrameLayout) father". android:gravity on the other hand means "what is the gravity inside me" and it applies to different views differently (like in a TextView it will align the text according to the gravity).
I think you could probably throw out half of the layouts you are using to display views (it's kind of confusing and hard to read) by simplifying your layout scheme and use just using a RelativeLayout for alignment issues (align to parent or to other views) and LinearLayout for grouping vertical and horizontal groups.

use tablelayout an then use tablerowlayout. and put your checkboxes.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="match_parent" >
<TableRow
android:id="#+id/tableRow1"
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:textStyle="bold"
android:textColor="#ffffffff"
android:text="ARE YOU CLASS 2B?" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="50dp"
android:layout_height="50dp" >
<RadioGroup
android:id="#+id/radioGroup" android:textColor="#000000"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<RadioButton
android:id="#+id/yes"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Yes" />
<RadioButton
android:id="#+id/no"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="No" />
</RadioGroup>
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<CheckBox
android:id="#+id/jimmy"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Jimmy" />
</TableRow>
<TableRow
android:id="#+id/tableRow4"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<CheckBox
android:id="#+id/diana"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Diana" />
</TableRow>
<TableRow
android:id="#+id/tableRow6"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<CheckBox
android:id="#+id/dina"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Dina" />
</TableRow>
<TableRow
android:id="#+id/tableRow5"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<CheckBox
android:id="#+id/jack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Jack" />
</TableRow>
<TextView
android:id="#+id/status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<TableRow
android:id="#+id/tableRow7"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</TableRow>
</TableLayout>
</LinearLayout>
It's example hehe

Two columns layout with first column wrap_content, second fill_parent

I have to design UI to contain two columns.
First column should wrap contained label and second in the same row should fill whole space. Below some example:
http://temp.chrzanowski.info/so_layout.png
How can I do this ?

Use TableLayout with strechColumns = "1"
It stretches the 2nd column occupying the remaining space.
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stretchColumns="1" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</TableRow>
</TableLayout>

Following TableLayout would give you the desired output:
<TableLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="1">
<TableRow>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Bla bla bla"
android:singleLine="true" /> <!-- first column's view -->
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content" /> <!-- second column's view -->
</TableRow>
...
</TableLayout>

As an alternative, you can do a LinearLayout like so:
<?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="wrap_content"
android:orientation="horizontal"
android:weightSum="100"
android:gravity="center_vertical">
<LinearLayout
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="40">
<TextView
android:layout_weight="1"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:text="A very very very long text"
android:singleLine="true"
android:scrollHorizontally="true"
android:ellipsize="end">
</TextView>
</LinearLayout>
<LinearLayout
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="60">
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="TextBox">
</EditText>
</LinearLayout>
</LinearLayout>
To adjust width of columns, modify the layout_weight of each LinearLayout containers. Lesser value means smaller width, and both weights must equal 100.

Try this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Label 1"
android:layout_marginLeft="7dp"
android:layout_marginTop="20dp"/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Label Loooong2"
android:layout_marginLeft="7dp"
android:layout_marginTop="30dp"/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Label 3"
android:layout_marginLeft="7dp"
android:layout_marginTop="30dp"/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:orientation="vertical">
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="TextBox"/>
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="TextBox"/>
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="TextBox"/>
</LinearLayout>
</LinearLayout>

android tablelayout with complex component placement

EDITED: I HAVE FOUND THE SOLUTION MYSELF. THANK YOU!
I want to create the following screen for an Android App:
Right now I have this:
with this code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:weightSum="1" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight=".65"
android:weightSum="5" >
<TextView
android:id="#+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="TOURNAMENT: "
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_weight="1"
android:layout_marginLeft="10dp"/>
<TextView
android:id="#+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="GAME: "
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_weight="1"
android:layout_marginLeft="10dp" />
<TextView
android:id="#+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="BEST OF: "
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_weight="1"
android:layout_marginLeft="10dp" />
<TextView
android:id="#+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="BRACKET STYLE: "
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_weight="1"
android:layout_marginLeft="10dp" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight=".35"
android:weightSum="5" >
<EditText
android:id="#+id/editText1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginRight="10dp" />
<EditText
android:id="#+id/editText1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginRight="10dp" />
<EditText
android:id="#+id/editText1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginRight="10dp" />
<EditText
android:id="#+id/editText1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginRight="10dp" />
<RelativeLayout
android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_weight="1" >
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="15dp"
android:text="CANCEL" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/button2"
android:text="CREATE" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
The text can be aligned to the right using android:gravity="right", but how can I make it
centered vertically?
--> AISHH, it's: android:gravity="center_vertical|right"
Thank you!!

Well TableLayout is not a good ideea. You should try using a RelativeLayout and some LinearLayout nested inside.
Try something like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:id="#+id/first_linear"
android:orientation="vertical">
<!-- Note that for text view,and editText you might need to use certain values (dip values) cuz wrap content will try to arrange the view -->
<TextView
android:id="#+id/first_text_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<EditText
android:id = "#+id/first_edit_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
<!-- we align all the following linearlayouts below the first -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/first_linear"
android:id="#+id/second_linear"
android:orientation="vertical">
<TextView
android:id="#+id/second_text_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<EditText
android:id = "#+id/second_edit_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
<!-- add all the layouts like those from above -->
<!-- ...... -->
<!-- after you added all the fields you can add a linear layout containing two buttons to float below the last one -->

I've done a similar layout like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical"
android:layout_height="fill_parent" android:layout_width="fill_parent"
>
<ScrollView android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1.0">
<LinearLayout android:orientation="vertical" android:layout_height="wrap_content" android:layout_width="fill_parent">
<TableLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:stretchColumns="1" android:shrinkColumns="1">
<TableRow android:layout_width="fill_parent" android:layout_height="wrap_content">
<TextView android:text="Value1" android:gravity="right" />
<EditText android:singleLine="true" android:id="#+id/editTextVal1" />
</TableRow>
<TableRow android:layout_width="fill_parent" android:layout_height="wrap_content">
<TextView android:text="Long name value2" android:gravity="right" />
<EditText android:singleLine="true" android:id="#+id/editTextVal1" />
</TableRow>
</TableLayout>
</LinearLayout>
</ScrollView>
<LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="0.0">
<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Save" />
<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Cancel" />
</LinearLayout>
</LinearLayout>
There's a scroll panel in there to have the buttons on the bottom of the screen at all times, in case your configuration goes longer.

So this is the implementation I came up with. Not the best but worked for me :)
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight=".65"
android:weightSum="5"
android:paddingTop="10dp" >
<TextView
android:id="#+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="TOURNAMENT: "
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_weight="1"
android:layout_marginLeft="10dp"
android:gravity="center_vertical|right"/>
<TextView
android:id="#+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="GAME: "
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_weight="1"
android:layout_marginLeft="10dp"
android:gravity="center_vertical|right"/>
<TextView
android:id="#+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="BEST OF: "
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_weight="1"
android:layout_marginLeft="10dp"
android:gravity="center_vertical|right"/>
<TextView
android:id="#+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="BRACKET STYLE: "
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_weight="1"
android:layout_marginLeft="10dp"
android:gravity="center_vertical|right"/>
<!-- fill up the space so that the components on top are displayed correctly -->
<TextView
android:id="#+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text=""
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_weight="1"
android:layout_marginLeft="10dp"
android:gravity="center_vertical|right"/>
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight=".35"
android:weightSum="5"
android:paddingTop="10dp" >
<EditText
android:id="#+id/tourName"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginRight="10dp"
android:gravity="center_vertical|left" />
<Spinner
android:id="#+id/spinGameName"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginRight="10dp"
android:gravity="center_vertical|left" />
<Spinner
android:id="#+id/spinBestOf"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginRight="10dp"
android:gravity="center_vertical|left" />
<Spinner
android:id="#+id/spinBracketType"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginRight="10dp"
android:gravity="center_vertical|left" />
<RelativeLayout
android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_weight="1" >
<Button
android:id="#+id/btnCancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="15dp"
android:text="CANCEL" />
<Button
android:id="#+id/btnCreate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/btnCancel"
android:text="CREATE" />
</RelativeLayout>
</LinearLayout>

How to draw this LinearLayout in Android?

I would like to realize a LinearLayout in Android like this:
{ deleted image }
but I don't know how to do.
If I do:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="60dp" >
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="60dp" >
<TextView android:text="TextView" android:id="#+id/item_0"
android:layout_width="wrap_content"
android:layout_height="30dp" >
</TextView>
<TextView android:text="TextView" android:id="#+id/item_1"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:textSize="18dp"
android:textColor="#ff0000">
</TextView>
</LinearLayout>
<LinearLayout
android:layout_width="80dp"
android:gravity="right"
android:layout_height="60dp" >
<TextView android:text="TextView" android:id="#+id/item_2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="20dp"
android:textColor="#ff0000">
</TextView>
</LinearLayout>
</LinearLayout>
The second LinearLayout (on the right) is not shown. I think I would have to use a RelativeLayout, but how can I draw a similar LinearLayout?
This is the layout used for a ListItem in a ListView so every box has to have the same width (hence cannot use wrap_content for the 2 item_0 and item_1 layout wrapper.

Try adding android:layout_weight="1" to your first child LinearLayout inside the top level LinearLayout (i.e. the one on the 5th line of your XML):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="fill_parent"
android:layout_height="60dp">
<LinearLayout android:orientation="vertical"
android:layout_width="fill_parent" android:layout_height="60dp" android:layout_weight="1">
<TextView android:text="TextView" android:id="#+id/item_0"
android:layout_width="wrap_content" android:layout_height="30dp">
</TextView>
<TextView android:text="TextView" android:id="#+id/item_1"
android:layout_width="wrap_content" android:layout_height="30dp"
android:textSize="18dp" android:textColor="#ff0000">
</TextView>
</LinearLayout>
<LinearLayout android:layout_width="80dp" android:gravity="right"
android:layout_height="60dp">
<TextView android:text="TextView" android:id="#+id/item_2"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:textSize="20dp" android:textColor="#ff0000">
</TextView>
</LinearLayout>
</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="60dp" >
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="60dp"
android:layout_weight="70">
<TextView android:text="TextView" android:id="#+id/item_0"
android:layout_width="wrap_content"
android:layout_height="30dp" >
</TextView>
<TextView android:text="TextView" android:id="#+id/item_1"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:textSize="18dp"
android:textColor="#ff0000">
</TextView>
</LinearLayout>
<LinearLayout
android:layout_weight="30"
android:layout_width="80dp"
android:gravity="right"
android:layout_height="60dp" >
<TextView android:text="TextView" android:id="#+id/item_2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="20dp"
android:textColor="#ff0000">
</TextView>
</LinearLayout>
</LinearLayout>

http://developer.android.com/resources/articles/layout-tricks-efficiency.html
so more efficient way will be this layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="60dp">
<TextView android:text="TextView" android:id="#+id/item_2"
android:layout_width="80dp" android:layout_alignParentTop="true"
android:layout_height="60dp" android:textSize="20dp"
android:textColor="#ff0000" android:layout_alignParentRight="true">
</TextView>
<TextView android:text="TextView" android:id="#+id/item_0"
android:layout_width="fill_parent" android:layout_height="30dp"
android:layout_toLeftOf="#id/item_2">
</TextView>
<TextView android:text="TextView" android:id="#+id/item_1"
android:layout_width="fill_parent" android:layout_height="30dp"
android:textSize="18dp" android:textColor="#ff0000"
android:layout_below="#id/item_0" android:layout_toLeftOf="#id/item_2">
</TextView>
</RelativeLayout>

how to design view layout in vertical on android

hi all
i need to design view layout between two linear layout. i see view's property for orientation. i want to put view layout by vertically between linear layout2 and linear layout3. please assist me.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout android:layout_width="fill_parent"
android:id="#+id/linearLayout1" android:layout_height="wrap_content">
<LinearLayout android:layout_width="wrap_content"
android:id="#+id/linearLayout2" android:layout_height="wrap_content">
<TextView android:text="TextView" android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"></TextView>
</LinearLayout>
<LinearLayout android:layout_width="wrap_content"
android:id="#+id/linearLayout3" android:layout_height="wrap_content"
android:orientation="vertical">
<TextView android:text="TextView" android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</TextView>
<TextView android:text="TextView" android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</TextView>
</LinearLayout>
</LinearLayout>
</LinearLayout>

In Your layout XML file:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:id="#+id/linearLayout1" android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout android:layout_width="wrap_content"
android:id="#+id/linearLayout2" android:layout_height="wrap_content">
<TextView android:text="TextView" android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"></TextView>
</LinearLayout>
<LinearLayout android:layout_width="wrap_content"
android:id="#+id/linearLayoutNEW" android:layout_height="wrap_content">
<TextView android:text="TextView" android:id="#+id/textViewNEW"
android:layout_width="wrap_content"
android:layout_height="wrap_content"></TextView>
</LinearLayout>
<LinearLayout android:layout_width="wrap_content"
android:id="#+id/linearLayout3" android:layout_height="wrap_content"
android:orientation="vertical">
<TextView android:text="TextView" android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</TextView>
<TextView android:text="TextView" android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</TextView>
</LinearLayout>
</LinearLayout>
Now You have three LinearLayout with horizontal orientation one under another... Is this what you wanted to achieve?
And it is even not recommended to use LinearLayout when only one control is within it...
So next example should be better:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:id="#+id/linearLayout1" android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView android:text="TextView" android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"></TextView>
<LinearLayout android:layout_width="wrap_content" android:orientation="vertical"
android:id="#+id/linearLayoutNEW" android:layout_height="wrap_content">
<TextView android:text="TextView" android:id="#+id/textViewNEW1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"></TextView>
<TextView android:text="TextView" android:id="#+id/textViewNEW2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"></TextView>
</LinearLayout>
<LinearLayout android:layout_width="wrap_content"
android:id="#+id/linearLayout3" android:layout_height="wrap_content"
android:orientation="vertical">
<TextView android:text="TextView" android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</TextView>
<TextView android:text="TextView" android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</TextView>
</LinearLayout>
</LinearLayout>

Categories

Resources