Android Linear / Relative Layout - as an “automatically size” object in the middle (3 objects)

Question

I have two cases with linear (also verified relative) layout in android. One occurs for horizontal, and the other for vertical. Let's start horizontally:

this is something like:

<LinearLayout ... > <Button ... layout:gravity = "left" layout:width = "wrap_content"/> <TextView ... layout:width = ??????? /> <Image .... layout:gravity = "right" layout:width = "wrap_content"/> </LinearLayout> 

Well, I want the button to stay on the left, the image to the right (stick to the end, and not just to the right of the text view), and the text image (possibly with a tire or whatever) in the middle. If I put textview width = "fill / match_parent", it will send a screen image. If I put wrap_content, the image will not remain to the right of the screen. I also tried relative layout without success.

The same case in an upright position where I have something like:

 <LinearLayout ...> <LinearLayout .... layout:height = "wrap_content" layout:gravity= "top" /> <ListView layout:height = ???????> <LinearLayout ... layout:height = "wrap_content" layout:gravity = "bottom" /> </LinearLayout> 

The same requirements are here. I want the first L.layout to stay on top, automatically browse the list between them and the second line layout to stay at the bottom. (Imagine trying to create a UITableView-like view on an iPhone that has a NavigationBar, a list of items and a ToolBar at the bottom. Fist LinearLayout are the NavigationBar, LIst are the cells, and the second LinearLayout is the ToolBar).

Any suggestions? Prefer xml solutions.

Answer 1

This can simply be done using RelativeLayout here.

Horizontal alignment

 <RelativeLayout android:layout_width="fill_parent" android:layout_height="wrap_content"> <Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="something" /> <TextView android:id="@+id/text" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_toLeftOf="@+id/image" android:layout_toRightOf="@+id/button" /> <ImageView android:id="@+id/image" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:background="@drawable/icon" /> </RelativeLayout> 

Vertical alignment

  <LinearLayout android:id="@+id/linear_top" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <ListView android:id="@+id/text" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_below="@+id/linear_top" android:layout_above="@+id/linear_bottom" /> <LinearLayout android:id="@+id/image" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" /> </RelativeLayout> 

Answer 2

For your second requirement, use layout_weight to view the list

 <RelativeLayout ...> <LinearLayout android:layout_height="wrap_content" android:layout_width="fill_parent" android:layout_alignParentTop="true" /> <ListView android:layout_height ="0dp" android:layout_width="fill_parent" android:layout_weight="1" android:layout_below="@+id/top_layout" android:layout_above="@+id/bottm_layout" /> <LinearLayout android:layout_height="wrap_content" android:layout_width="fill_parent" android:layout_alignParentBottom="true" /> </RelativeLayout> 

Answer 3

You can try TableLayout , and LinearLayout with Stretch Column - 1 (the columns in LAyout are indexed bases 0).

The first column is your button.

The second column is your text.

The third column is your image.

You can find a Google example or see TableLayout .

Updated:

This can be seen more clearly:

 <RelativeLayout> <!-- This is Header--> <LinearLayout ..... android:layout_alignParentTop="true" > </LinearLayout> <!-- This is your table--> <TableLayout ..... android:stretchColumns = 1> <TableRow> <Button> ..... </Button> <TextView> ..... </TextView> <ImageView> ..... </ImageView> </TableRow> </TableLayout> <!-- This is Footer--> <LinearLayout ..... android:layout_alignParentBottom="true" > </LinearLayout> </RelativeLayout>