Designing layout in Android with TableLayout and Gallery

Question

I have two ImageViews, one TextView and one Gallery in my app and want my layout as shown below.

............................................-.
<ImageView>|     <TextView>      |<ImageView>|
..............................................
|                                            |
|                  Gallery                   |
|                                            |
|............................................|

I have a table layout and almost got the deign as shown above except that when the text length is small the ImageView at the right end of the screen keeps moving. I want the the ImageView's at left and right end of the screen to be fixed irrespective of the size of text.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/LinearLayout01"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
         android:layout_height="wrap_content" 
         android:layout_width="wrap_content">

         <TableRow>
              <ImageView xmlns:android="http://schemas.android.com/apk/res/android"
                   android:id="@+id/imageL"
                   android:layout_width="fill_parent"
                   android:layout_height="fill_parent"  
                   android:layout_weight="1"
                   android:minHeight="30px"
                   android:minWidth="30px" />

              <TextView xmlns:android="http://schemas.android.com/apk/res/android"
                   android:id="@+id/title"
                   android:paddingLeft="10px"
                   android:layout_width="wrap_content"
                   android:layout_height="wrap_content" 
                   android:layout_weight="3"
                   android:layout_gravity="center"
                   android:minHeight="30px"
                   android:minWidth="30px" />

               <ImageView xmlns:android="http://schemas.android.com/apk/res/android"
                   android:id="@+id/imageR"
                   android:paddingLeft="10px"
                   android:layout_width="fill_parent"
                   android:layout_height="fill_parent"
                   android:layout_weight="1"
                   android:minHeight="30px"
                   android:minWidth="30px" />
          </TableRow> 
    </TableLayout>

    <Gallery xmlns:android="http://schemas.android.com/apk/res/android"
         android:id="@+id/gallery"
         android:layout_width="fill_parent"
         android:layout_height="wrap_content" />
</LinearLayout>

Answer 1

Something like it. If you want make static width and height for img you can set it in android:layout_width and android:layout_height

<?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="match_parent"
>
    <ImageView 
    android:id="@+id/firstImage"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:src="@drawable/icon"
    />
    <TextView 
    android:id="@+id/someText"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toLeftOf="@+id/secondImage"
    android:layout_toRightOf="@+id/firstImage"
    android:text="some mega text."
    android:gravity="center_horizontal"
    />
    <ImageView 
    android:id="@+id/secondImage"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:src="@drawable/icon"
    />

</RelativeLayout>

Answer 2

Use equal weight for all three items, problem should be solved.

android:layout_weight="1"

all 3 will occupy equal areas.

Answer 3

Add this to your TableLayout-tag:

android:shrinkcolumns="0,2" android:stretchColumns="1"

Also, you might want to change layout_width to fill_parent instead, as this will allow the middle column to stretch.