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 ?
Add a comment |
4 Answers
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> 
Comments
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> 
1 Comment
hsz
Thank you ! Works well. I've accepted @mussharapp answer because of pointing
strechColumns - just for the further devs.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.
Comments
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> 