Android Table Layout Alignment

I am using Table Layout to display data as shown below.

What i want to do ?

I want the Text in the second column to be aligned to the left and the text should wrap and be displayed in the next line and over flow as you see in the image.

Code:

    <TableLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/tableLayout1"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <TableRow
            android:id="@+id/tableRow2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingBottom="10dp" >

            <ImageView
                android:id="@+id/place_category_icon"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:contentDescription="ss"
                android:paddingRight="10dp"
                android:src="@drawable/icon_category"
                android:textAlignment="textStart" />

            <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_gravity="center"
                android:text="230 kms"
                android:textSize="16sp" >
            </TextView>
        </TableRow>

        <TableRow
            android:id="@+id/tableRow2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingBottom="10dp" >

            <ImageView
                android:id="@+id/place_category_icon"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:contentDescription="ss"
                android:paddingRight="10dp"
                android:src="@drawable/icon_category"
                android:textAlignment="textStart" />

            <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_gravity="center"
                android:text="Hill Station, Wild Life"
                android:textSize="16sp" >
            </TextView>
        </TableRow>

        <TableRow
            android:id="@+id/tableRow2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingBottom="10dp" >

            <ImageView
                android:id="@+id/place_category_icon"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:contentDescription="ss"
                android:paddingRight="10dp"
                android:src="@drawable/icon_category"
                android:textAlignment="textStart" />

            <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_gravity="center"
                android:text="Summer 23-40°C, Winter 10-32°C"
                android:textSize="16sp" >
            </TextView>
        </TableRow>

        <TableRow
            android:id="@+id/tableRow2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingBottom="10dp" >

            <ImageView
                android:id="@+id/place_category_icon"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:contentDescription="ss"
                android:paddingRight="10dp"
                android:src="@drawable/icon_category"
                android:textAlignment="textStart" />

            <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_gravity="center"
                android:text="Tippus Drop, Tippus Summer Residence, Brahmashram, Cycling, Paragliding"
                android:textSize="16sp" >
            </TextView>
        </TableRow>
    </TableLayout>

What it should look like

Answers


The easiest way I can think of is to wrap each TableRow content with a LinearLayout like this:

<TableLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/tableLayout1"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <TableRow
            android:id="@+id/tableRow2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingBottom="10dp" >

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent" >

                <ImageView
                    android:id="@+id/place_category_icon"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:contentDescription="ss"
                    android:paddingRight="10dp"
                    android:src="@drawable/ic_launcher" />

                <TextView
                    android:id="@+id/textView2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:layout_gravity="center"
                    android:text="230 kms"
                    android:textSize="16sp" >
                </TextView>
            </LinearLayout>
        </TableRow>

        <TableRow
            android:id="@+id/tableRow2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingBottom="10dp" >

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent" >

                <ImageView
                    android:id="@+id/place_category_icon"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:contentDescription="ss"
                    android:paddingRight="10dp"
                    android:src="@drawable/ic_launcher" />

                <TextView
                    android:id="@+id/textView2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:layout_gravity="center"
                    android:text="Hill Station, Wild Life"
                    android:textSize="16sp" >
                </TextView>
            </LinearLayout>
        </TableRow>

        <TableRow
            android:id="@+id/tableRow2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingBottom="10dp" >

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent" >

                <ImageView
                    android:id="@+id/place_category_icon"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:contentDescription="ss"
                    android:paddingRight="10dp"
                    android:src="@drawable/ic_launcher" />

                <TextView
                    android:id="@+id/textView2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:layout_gravity="center"
                    android:text="Summer 23-40°C, Winter 10-32°C"
                    android:textSize="16sp" >
                </TextView>
            </LinearLayout>
        </TableRow>

        <TableRow
            android:id="@+id/tableRow2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingBottom="10dp" >

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent" >

                <ImageView
                    android:id="@+id/place_category_icon"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:contentDescription="ss"
                    android:paddingRight="10dp"
                    android:src="@drawable/ic_launcher" />

                <TextView
                    android:id="@+id/textView2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:layout_gravity="center"
                    android:text="Tippus Drop, Tippus Summer Residence, Brahmashram, Cycling, Paragliding"
                    android:textSize="16sp" >
                </TextView>
            </LinearLayout>
        </TableRow>
    </TableLayout>

And this is the result:

Hope I correctly understood your requirements.


Since a TableRow is pretty much a horizontally oriented LinearLayout, simply use the principles of weights to make the TextView fill up all the space after the ImageView. It means you'd have to change the rows to somewhat like this:

    <!-- no need to set width/height as those are implicitly enforced -->
    <TableRow
        android:id="@+id/tableRow2"
        android:paddingBottom="10dp" >

        <ImageView
            android:id="@+id/place_category_icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="ss"
            android:paddingRight="10dp"
            android:src="@drawable/icon_category" />

        <!-- width of '0' and weight of '1' will make this view fill up all remaining space -->
        <TextView
            android:id="@+id/textView2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_gravity="center_vertical"
            android:text="230 kms"
            android:textSize="16sp" />

    </TableRow>

I've also removed/changed some superfluous attributes. Do mind that I just typed this directly in the browser - there may be the odd typo or tweak required.


My guess - change the layout_width and get rid of the gravity:

 <TextView
            android:id="@+id/textView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            ...
            >
        </TextView>

Need Your Help

Html.fromHtml() with custom ImageGetter inside ListView recycle issues

java android android-listview

I have to show some HTML with images from the internet in a ListView. The images are handled in a custom Html.ImageGetter. The problem is, I need the TextView available to download the images to in...

Temporarily overriding compilation mode regexp alist: dynamic binding weirdness?

emacs elisp dynamic-binding compile-mode

I'm working on a program mode, which has various different calls to assemblers, programmers and other external programs. My cunning plan was to handle all of these with the compile function, passin...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.