RelativeLayout: Can't assign a view above a referenced view if margin is involved

Question

I was trying to put a TextView dependent above the other TextView anchor inside a RelativeLayout, but I can't manage to make the dependent get displayed.

Situation:
The anchor would be aligned with the parent's top + some marginTop to make it more to the center of the parent (RelativeLayout), and the dependent will be aligned to be above of this anchor.

This doesn't work; when I assigned it to be above the anchor it seems that android assumes the top of the anchor is the parent's top and draws the dependent outside the screen (above it).

This should not be the case since I use margin instead of padding so the area between the top of the RelativeLayout and the anchor shouldn't be the part of the anchor itself (I checked the size with hierarchy viewer). Or maybe I get it wrong? :S

This is the simple layout code:

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

    <TextView android:id="@+id/anchor"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_marginTop="100px"
        android:text="Anchor point."
        />
    <TextView android:id="@+id/dependent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/anchor"
        android:text="Dependent."
        />

</RelativeLayout>

Desired:

-------------
|           |
|dependent  |
|anchor     |
|           |
-------------

What happened:

dependent (out of screen display)
-------------
|           |
|           |
|anchor     |
|           |
-------------

Hope:
Could someone help me here? Or maybe help pointing out if I made a mistake. I need to use the RelativeLayout in my real implementation (above is just an example).

Thanks in advance.

Answer 1

I made an invisible button to align from - is this what you're looking for? If you change the margin or any location parameter of the anchorbutton it will change the location of the dependants.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent">
<Button android:id="@+id/anchorbutton"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_margin="100dp"
     android:visibility="invisible"
/>

 <TextView android:id="@+id/anchor"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_below="@id/anchorbutton"
  android:layout_alignLeft="@id/anchorbutton"
  android:layout_margin="10dp"
  android:text="Off Anchor button"
/>
<TextView android:id="@+id/dependent"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_alignLeft="@id/anchorbutton"
  android:layout_below="@id/anchor"
  android:layout_margin="50dp"
  android:text="Dependent."

Answer 2

Can I ask why you don't make the anchor at the uppermost corner (top or bottom - doesn't matter) and then build your view from that? That's what I do and that's below: Sorry - I can't post pics yet.

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

    <TextView android:id="@+id/anchor"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentTop="true"
      android:layout_marginTop="100dp"
      android:text="Anchor point."
    />
   <TextView android:id="@+id/dependent"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_below="@id/anchor"
      android:layout_alignLeft="@id/anchor"
      android:text="Dependent."
    />

 </RelativeLayout>

Alternatively, if you really want to keep things as they are, just change the alignment of dependent to android:layout_alignParentTop="true". You can have margin here as well to affect it's placement. Here's the code and pic.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"    >

 <TextView android:id="@+id/anchor"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_alignParentTop="true"
   android:layout_marginTop="100dp"
   android:text="Anchor point."
  />
 <TextView android:id="@+id/dependent"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_marginTop="150dp"
    android:text="Dependent."
  />

</RelativeLayout>