How to lay image over another image where the middle of the image should align with the bottom of the image underneath

Question

I have a banner that I am displaying on an Android Layout. On this banner, I have two avatars that I would like to display next to each other, and most importantly, I would like to have them displayed where the midway point of these two avatars on the y-axis is aligned with the bottom of the banner that these avatars sit on top of.

How would you do this?

Edit:

In other words, I'm asking how you could use an parameter like android:layout_below, but instead of it aligning the top of the imageview with the botton of the specified layout, to align the center.

enter image description here

score 0 · Answer 1 · answered Aug 20 '12 at 21:54

Put them in a linear layout, and then give them a width to fill the parent. Then you can use the weight property to disperse the widths equally.

<?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="horizontal" >


    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:src="@drawable/clock" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:src="@drawable/clock" />

</LinearLayout>

score 0 · Accepted Answer · answered Aug 20 '12 at 22:16

Unfortunately, there is no direct layout parameter to align a center point with another edge. If the height of your avatars is fixed, you could add some padding that is half the height so they all line up; i.e.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <ImageView
        android:id="@+id/banner"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:paddingBottom="25dp"
        android:src="@drawable/banner" />

    <ImageView
        android:id="@+id/avatar1"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:layout_alignBottom="@id/banner"
        android:src="@drawable/horse" /> 
    <ImageView
        android:id="@+id/avatar2"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:layout_alignBottom="@id/banner"
        android:layout_toRightOf="@id/avatar1"
        android:src="@drawable/horse" />
</RelativeLayout>

If the heights of those items, however, is dynamic, then you will need to create a custom ViewGroup container so you can measure the avatar heights (in onMeasure()) and apply the padding (or other offset value) at runtime.

How to lay image over another image where the middle of the image should align with the bottom of the image underneath

2 Answers2