Android-ImageView在TableLayout中无法正确对齐

Question

My ImageView and TextView not align properly. Is it because of my layout setting? What I want is ImageView align parent left and TextView right of ImageView.

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:scrollbars="none">

    <TableLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TableRow
            android:id="@+id/tableRow1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#ffffff"
            android:layout_marginTop="10dp"
            android:padding="10dp" >

            <ImageView
                android:id="@+id/profilePicture"
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:layout_marginRight="8dp"
                android:src="@drawable/user_50"
                android:gravity="center" ></ImageView>

            <TextView
                        android:id="@+id/textView1"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="Mohammad Nurdin, 26"
                        android:gravity="center"/>


        </TableRow>

<!-- .. -->

</TableLayout>
</ScrollView>

Answer 1

I tried something like this and it is according to your requirement at least

  <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#ffffff"
        android:layout_marginTop="10dp"
        android:padding="10dp" >

        <ImageView
            android:id="@+id/profilePicture"
            android:layout_width="300dp"
            android:layout_height="80dp"
            android:layout_marginRight="8dp"
            android:src="@drawable/user_50"
            android:gravity="center"
            android:layout_gravity="left"></ImageView>

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="left"
            android:paddingBottom="10dp"
            android:paddingRight="10dp"
            android:paddingTop="10dp"
            android:text="Mohammad Nurdin, 26"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:layout_column="70"
            android:layout_gravity="center" />

    </TableRow>

Hope it helps ... :)

Answer 2

Add this to your TableLayout : android:stretchColumns="0,1" and this is optional in TableRow android:gravity="center"

<TableLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:stretchColumns="0,1">

    <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:gravity="center"
        android:background="#ffffff"
        android:padding="5dp">

        <ImageView
            android:id="@+id/profilePicture"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"

            android:src="@drawable/user" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Mohammad Nurdin, 26" />


    </TableRow>

</TableLayout>

The output is like this :

Answer 3

I already found the answer. Use LinearLayout inside TableLayout .

<TableLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TableRow
            android:id="@+id/tableRow1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#ffffff"
            android:layout_marginTop="10dp"
            android:padding="10dp" >

            <LinearLayout android:orientation="horizontal" 
         android:layout_width="fill_parent"
         android:layout_height="fill_parent">

            <ImageView
                android:layout_weight="1"
                android:id="@+id/profilePicture"
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:src="@drawable/user_50"
                android:gravity="left" ></ImageView>

            <TextView
                        android:layout_weight="100"
                        android:id="@+id/textView1"
                        android:layout_width="0dip"
                        android:layout_height="wrap_content"
                        android:text="Mohammad Nurdin, 26"/>

            </LinearLayout>
        </TableRow>

<!-- ? -->

</TableLayout>

Answer 4

Gravity doesn't work for ImageViews in TableLayout like it does for TextViews, what you need to do is wrap the ImageView inside a RelativeLayout, then align the ImageView to its new parent.. so like this..

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

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="4">

        <ImageView
            android:id="@+id/myImage"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:src="@mipmap/ic_launcher" />
    </RelativeLayout>

    <TextView
        android:id="@+id/myText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="6"
        android:gravity="left"
        android:text="hello" />

Answer 5

It's because of gravity

android:gravity="center" 

You can change it into

 android:gravity="left"