Issue with Android Table Layout with two rows and right align

Question

I'm having a problem with Android layout.. what I'm trying to create is something similar to this:

<table width="300px">
    <tr>
        <td span="2">test</td>
    </tr>
    <tr>
        <td align="right">image1</td>
        <td align="right">image2</td>
    </tr>
</table>

Except I'd want "image1" and 2 to be together. Anyways,

Here is the layout I'm using in Android:

<?xml version="1.0" encoding="UTF-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" >

    <TableRow android:layout_gravity="left" >

        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_column="1"
            android:layout_gravity="left|center_vertical"
            android:layout_span="2"
            android:paddingRight="5dip"
            android:textColor="#ffffffff"
            android:textSize="13dip" />
    </TableRow>

    <TableRow android:layout_gravity="right" >

        <ImageView
            android:layout_width="50px"
            android:layout_height="120px"
            android:layout_column="1"
            android:layout_marginLeft="15dip" />

        <ImageView
            android:layout_width="263px"
            android:layout_height="150px"
            android:layout_column="2"
            android:layout_marginLeft="15dip" />
    </TableRow>

</TableLayout>

I have also tried putting android:layout_gravity:"right" on the ImageViews themselves, which did nothing.

For some reason, this Android layout always indents the label (it doesn't span the columns), and never right aligns anything in the second row.. I don't know what I'm doing wrong. This is Android 2.1. Anyone know?

score 2 · Answer 1 · edited May 23 '17 at 12:20

Ok My answer is as follows:

<?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="fill_parent">

          <TextView
                android:id="@+id/textid"
                android:text="SOME TEXT"
                android:layout_alignParentTop="true"
                android:layout_alignParentLeft="true"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:gravity="left"
                android:paddingRight="5dip"
                android:textColor="@color/white"
                android:textSize="13dip" />

            <ImageView
                android:src="@drawable/cloud1"
                android:id="@+id/imageview1"
                android:layout_alignParentRight="true"
                android:layout_below="@id/textid"
                android:layout_width="50dp"
                android:layout_height="120dp"
                android:layout_marginLeft="15dp" />

            <ImageView
                android:src="@drawable/grey_bar"
                android:layout_alignParentRight="true"
                android:layout_below="@id/imageview1"
                android:layout_width="263dp"
                android:layout_height="150dp"
                android:layout_marginLeft="15dp" />

</RelativeLayout>

There are a few other poitners too:

Do not use PX use dp, this is for density independent pixels (see What is the difference between "px", "dp", "dip" and "sp" on Android?)
Do not use inline colours for the final product put them in res/values/colors, however I am sure you know this
Rename the Id's I added along with removing "android:text" and "android:src" attributes as they were put in to simply show you.

i will try this. as for using px, actually the images coming back are based on the device's pixel width, so i change the height/width based on this, which is why i use pixels (images generated on server based on device pixels available). the rest you are right, but it was all taken out for brevity sake — automaton, Feb 06 '12 at 20:46
so i tried this, it actually bunched everything up on top of each other. i did find the solution though, in a different way. — automaton, Feb 06 '12 at 21:35

score 1 · Accepted Answer · answered Feb 07 '12 at 18:26

I ended up solving this with this kind of layout:

<?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="wrap_content"
    android:orientation="vertical" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:paddingRight="5dip"
        android:textColor="#ffffffff"
        android:textSize="13dip" />

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

        <TableRow android:gravity="right" >

            <ImageView
                android:layout_width="50px"
                android:layout_height="120px"
                android:layout_column="1" />

            <ImageView
                android:layout_width="263px"
                android:layout_height="150px"
                android:layout_column="2"
                android:paddingRight="20dip" />
        </TableRow>
    </TableLayout>

</LinearLayout>

Also, another problem was that I am setting width/height by pixels in code, depending on what I need, and when you do that you wipe out the column as well.. so the code had to be something like:

        abc = new TableRow.LayoutParams(myImageWidth,
                mykpiImageHeight);
        abc.column = 2;

score 0 · Answer 3 · answered Oct 17 '12 at 21:36

0

It is confirmed a bug in ADT and is believed to be fixed in ADT 21. See bug fixed - at end

answered Oct 17 '12 at 21:36

Frank

605
1
8
14

Issue with Android Table Layout with two rows and right align

3 Answers3