Android XML Layout - 4 ImageViews on one screen

Question

Hello, 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

It doesn't make sense to have TableRows in a RelativeLayout. It might help you to read through the introductory layout documentation. It explains the different layout types and their usages.

For your case, you should be able to change RelativeLayout to TableLayout.

Also, when asking layout questions its helpful if you explain the behavior you are seeing with your attempt, rather than just saying it doesn't work.

Answer 2

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)