Android Studio Layout for 4 images

Question

I'm having some issues with laying out an activity layout in xml, well I'm using the Design option and the layout is shown in xml below, which is all embedded in a RelativeLayout.

Basically, what I want to have is four even ImageViews which I'll be adding images too, for a Quiz and there are 4 squares, two on top and two on bottom which altogether will make a larger square.

What I have is ok, but I think there should be a better or standard way or laying out stuff like this with Android?

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/imageView"
    android:maxWidth="100dp"
    android:maxHeight="100dp"
    android:minHeight="100dp"
    android:minWidth="100dp"
    android:nestedScrollingEnabled="false"
    android:layout_toStartOf="@+id/imageView2"
    android:layout_alignTop="@+id/imageView2"
    android:layout_toLeftOf="@+id/imageView2" />

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/imageView2"
    android:maxWidth="100dp"
    android:maxHeight="100dp"
    android:minHeight="100dp"
    android:minWidth="100dp"
    android:nestedScrollingEnabled="false"
    android:layout_marginTop="94dp"
    android:layout_alignParentTop="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true"
    android:layout_marginRight="89dp" />

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/imageView3"
    android:maxWidth="100dp"
    android:maxHeight="100dp"
    android:minHeight="100dp"
    android:minWidth="100dp"
    android:nestedScrollingEnabled="false"
    android:layout_below="@+id/imageView2"
    android:layout_alignLeft="@+id/imageView2"
    android:layout_alignStart="@+id/imageView2"
    android:layout_alignRight="@+id/imageView2"
    android:layout_alignEnd="@+id/imageView2" />

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/imageView4"
    android:maxWidth="100dp"
    android:maxHeight="100dp"
    android:minHeight="100dp"
    android:minWidth="100dp"
    android:nestedScrollingEnabled="false"
    android:layout_below="@+id/imageView"
    android:layout_alignLeft="@+id/imageView"
    android:layout_alignStart="@+id/imageView" />

I tried but it didn't work as I require, thanks anyways Rami. — SamoanProgrammer, Apr 15 '15 at 12:34

score 0 · Answer 1 · edited May 23 '17 at 12:28

You can use a GridView for the layout of your images and I think you can use layout_weight and weightSum to avoid having to set a definite size for your images and worrying about it not working properly on different screen sizes. That and the worry of images overlapping.

Here's an SO question that covers using a two column gridview for images as well, I'm not sure if this would help you either but since you said two images on top and two on bottom this might still be useful in a way. You can refer to this SO question and the marked answer for a better explanation on what layout_weight does and here's a reference for weightSum.

I solved the problem with LinearLayouts, thanks anyways Astatine0936. — SamoanProgrammer, Apr 15 '15 at 12:35

score 0 · Accepted Answer · answered Apr 15 '15 at 12:33

0

I have solved this problem by using the LinearLayouts, each with 2 ImageViews, nested within a parent LinearLayout for the actual form. The parent LinearLayout has the orientation="vertical" and the nested LinearLayout="horizontal".

answered Apr 15 '15 at 12:33

SamoanProgrammer

954
4
13
27

Android Studio Layout for 4 images

2 Answers2