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.

Answer 1

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.