How can I use RelativeLayout to align buttons to the right of an ImageView

Question

I'm struggling with a simple relative layout. It is supposed to have an image on the left and a column of other views on the right. The vertical alignment is correct but the horizontal alignment is very puzzling with the buttons on the left of the image even though I have asked for them to be on the right.
Can anyone explain:

• why this happens,
• how to achieve the arrangement I want.

Here is the layout xml and a screenshot:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    android:id="@+id/widget51"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">

  <ImageView
      android:id="@+id/ivLove"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentTop="true"
      android:layout_alignParentLeft="true"
      android:layout_centerHorizontal="true"
      />

  <TextView
      android:id="@+id/tvDate"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentTop="true"
      android:hint="Image name"
      android:layout_toRightOf="@+id/ivImage"
      />

  <TextView
      android:id="@+id/tvPage"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:hint="Page URL"
      android:layout_below="@+id/tvDate"
      android:layout_toRightOf="@+id/ivImage"
      />

  <Button
      android:id="@+id/btnNext"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Next"
      android:layout_below="@+id/tvPage"
      android:layout_toRightOf="@+id/ivImage"
      />

  <Button
      android:id="@+id/btnPrevious"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Previous"
      android:layout_below="@+id/btnNext"
      android:layout_toRightOf="@+id/ivImage"
      />

</RelativeLayout>

In case you are wondering about the image see Android : Simple HTML parsing & image downloader using AsyncTask

Answer 1

You are putting those controls ( TextView , Button ) on the right side of the ImageView with id ivImage .

However, your layout does not contain any ImageView with that id (but has one with ivLove ). The controls appear on the left because that's the default docking for views inside a RelativeLayout .

Try updating your references (replace each " ivImage " with " ivLove ".

Note -- if you use Eclipse , that the reason you didn't get compile errors for this is that you probably have an ImageView with android:id="ivImage" somewhere in your project. Enabling (and maybe updating) lint will help you filter these kinds of issues.