Search code examples
androidandroid-layoutlayouttablelayoutandroid-gallery

Designing layout in Android with TableLayout and Gallery


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>

Solution

  • 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>