Question

I thought I have understood the XML layout of Android, but it seems that I haven’t.
I want to have four ImageViews on one screen, to view four images at the same time.

It should look like this, where A to D represents the image views:

DDDAAA
DDDAAA
BBBCCC
BBBCCC

How can I do that? I tried it this way, but it’s not working. The Eclipse Editor seems not to be very good for this either. Is there a better one to create those layouts ?

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <TableRow>
<ImageView android:id="@+id/ImageView01" android:layout_height="wrap_content" android:layout_width="wrap_content" ></ImageView>
<ImageView android:id="@+id/ImageView02" android:layout_height="wrap_content" android:layout_width="wrap_content"></ImageView>
  </TableRow>

  <TableRow>
<ImageView android:id="@+id/ImageView03" android:layout_height="wrap_content" android:layout_width="wrap_content"></ImageView>
<ImageView android:id="@+id/ImageView04" android:layout_height="wrap_content" android:layout_width="wrap_content"></ImageView>
  </TableRow>
</RelativeLayout>

Answer 1

What about :

• a LinearLayout, with vertical orientation, that would contain everything
• and, then, a first LinearLayout, with horizontal orientation
  • that would contain D and A,
• and the same kind of LinearLayout with horizontal orientation, a second time, for B and C

And using

• android:layout_weight
• and android:gravity="center"

so each Layout takes enough place and is centered ?

A bit like this, I’d say :

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

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

        <LinearLayout
            android:id="@+id/DashboardNewPost"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="vertical"
            android:layout_weight="1"
            android:gravity="center"
            >
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/new_post"
            />
        </LinearLayout>
        <LinearLayout
            android:id="@+id/DashboardPostsList"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="vertical"
            android:layout_weight="1"
            android:gravity="center"
            >
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/posts_list"
            />
        </LinearLayout>

    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="horizontal"
        android:layout_weight="1"
        >
        <LinearLayout
            android:id="@+id/DashboardCommentsList"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="vertical"
            android:layout_weight="1"
            android:gravity="center"
            >
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/comments_list"
            />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/DashboardBlogParameters"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="vertical"
            android:layout_weight="1"
            android:gravity="center"
            >
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/blog_params"
            />
        </LinearLayout>

    </LinearLayout>

</LinearLayout>

I suppose (not tried) that you could even remove the LinearLayout that’s just arround each ImageView, adding the attributes it has to the ImageViews instead…

(In the application I took this from, I had to add those LinearLayout because there are more than only those images)