Android - LinearLayout like a table

Question

I have a ListFragment that fills a LinearLayout with data.

In this layout I'm trying to make them looking like a table.

Here is my 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="horizontal" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:padding="10dp"
        android:layout_marginTop="5dp"
        android:layout_marginBottom="5dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:background="@color/text_primary" >

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

        <TextView
            android:id="@+id/home"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center"
            android:textSize="25dp" />

        <TextView
            android:id="@+id/score"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center"
            android:textSize="20dp" />

        <TextView
            android:id="@+id/visitor"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center"
            android:textSize="25dp" />

        <ImageView
            android:id="@+id/visitorImage"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"/>

    </LinearLayout>

</LinearLayout>

But I would like to make something like this:

Where the images, the teams and the score will show perfectly aligned and centered.

I'm new in android, and I'm having problems to make this working.

My question is how can I make this working like the picture?

Answer 1

I have modified your xml to the below. Since you need list of them, use List view and give the below layout as each list item layout. Tutorial to make list view is here. All the elements within the layout are simple view (you can modify this to ImageView with your image), TextView and hence this will not be editable by the user (to give the picture kind of effect).

Will this be useful to you?

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:orientation="horizontal" >
        <View
            android:id="@+id/homeImage"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_blue_bright"/>

        <TextView
            android:id="@+id/home"
            android:layout_width="0dp"
            android:layout_weight="3"
            android:layout_height="match_parent"
            android:gravity="center"
            android:textSize="25dp"
            android:text="TEAM ONE"/>

        <TextView
            android:id="@+id/score"
            android:layout_width="0dp"
            android:layout_weight="2"
            android:layout_height="match_parent"
            android:gravity="center"
            android:textSize="20dp"
            android:text="X - X"
            />

        <TextView
            android:id="@+id/visitor"
            android:layout_width="0dp"
            android:layout_weight="3"
            android:layout_height="match_parent"
            android:gravity="center"
            android:textSize="25dp"
            android:text="TEAM TWO"/>

        <View
            android:id="@+id/visitorImage"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:background="@android:color/holo_blue_bright"/>

</LinearLayout>