Align pictures top center, bottom right and bottom left

Question

I'm trying to align 3 pictures in a LinearLayout so that one is centered at the top, another is at the bottom aligned to the left side and the last is at the bottom aligned to the right side. Pretty much like a pyramid. How could I do this? Can you provide an example?

i.e

 X
X X

score 2 · Accepted Answer · answered Jan 08 '14 at 14:54

Use this one:

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

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:gravity="center" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:src="@drawable/ic_launcher" />
</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="bottom"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="right" >

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_launcher" />
    </LinearLayout>
  </LinearLayout>

 </LinearLayout>

Is there any way to control the spacing between the top and the bottom images? When I either do it this way or with a RelativeLayout, the spacing between the top image and the bottom two images is the whole screen. — Zack, Jan 08 '14 at 14:57
No.. for as requirement i have set it to bottom. Otherwise if you change height of last second layout to wrap content then if display correctly with no space. — Piyush, Jan 08 '14 at 14:59
@Piyush Gupta: so many Layouts... why?! you should aim to **flatten** your hierarchy as musch as you can, for memory and performance optimization (mostly true for older devices, but also newer ones will enjoy a flat structure). — Phantômaxx, Jan 08 '14 at 15:13

score 1 · Answer 2 · edited Jan 08 '14 at 15:06

1

You need a RelativeLayout, not a LinearLayout.

Image A must specify the attribute

android:layout_alignParentTop="true".

Image B must specify the attributes

android:layout_alignParentBottom="true"

and

android:layout_alignParentLeft="true".

Image C must specify the attributes

android:layout_alignParentBottom="true"

and

android:layout_alignParentRight="true"

edited Jan 08 '14 at 15:06

Zack

5,108
4
27
39

answered Jan 08 '14 at 14:40

Phantômaxx

37,901
21
84
115

@Zack: Thank you for correction. Right, I always forget layout_... I was going by memory, while working on my project. ;) – Phantômaxx Jan 08 '14 at 15:10
No problem. This answer is also correct, but uses RelativeLayout. Thanks! – Zack Jan 08 '14 at 15:18

score 1 · Answer 3 · answered Jan 08 '14 at 14:49

It will be more flexible if you do it in RelativeLayout but if you want to do it in LinearLayout here is the solution:

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

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top|center_horizontal"
        android:src="@drawable/ic_launcher" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="bottom"
        android:orientation="horizontal" >

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_launcher" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="right" >

            <ImageView
                android:id="@+id/imageView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_launcher" />
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

Align pictures top center, bottom right and bottom left

3 Answers3