Android RelativeLayout strange behaviour

Question

I'm learning the relative layout and wrote a little test layout to simulate a login page:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_height="match_parent"
            android:layout_width="match_parent">
    <TextView android:id="@+id/labelUsername"
          android:layout_height="wrap_content"
          android:layout_width="wrap_content"
          android:text="username:"
          android:layout_centerVertical="true"/>
    <EditText android:id="@+id/txtUsername"
          android:layout_height="wrap_content"
          android:layout_width="wrap_content"
          android:hint="input username here"
          android:layout_toRightOf="@id/labelUsername"
          android:layout_alignBaseline="@id/labelUsername"/>
    <TextView android:id="@+id/labelPassword"
          android:layout_height="wrap_content"
          android:layout_width="wrap_content"
          android:text="password:"
          android:layout_below="@id/txtUsername"
          android:layout_alignParentLeft="true"/>
    <EditText android:id="@+id/txtPassword"
          android:layout_height="wrap_content"
          android:layout_width="wrap_content"
          android:hint="input password here"
          android:layout_below="@id/txtUsername"
          android:layout_alignLeft="@id/txtUsername"
          android:layout_alignBaseline="@id/labelPassword"/>
</RelativeLayout>

What I want is putting the Username Label and Textfield above the Password Label and TextField . But the result is reverted, password are above!

I think the problem is the "android:layout_below" property in labelPassword , if I set it to below labelUsername , it works, however because the textfield is much bigger than label, the both textfields are in this case overlayed. So i try to make the labelPassword below the txtUsername , but it performs strange, I don't understand.

By the way, is there any guideline when I build layout with Relative Layout?

What should I put there at first?

What should I put at last?

thanks!

Answer 1

To answer your concrete question, it's because android:layout_centerVertical="true" rule you are applying to labelUsername.

It seems that the relative position doesn't work well, when the elements you are refering to, are centered. And it also doesn't make sense, in this case, because you probably want the whole form centered, not only the username fields and then put the password bellow.

You can put the elements in a containing element (another relative layout, or linear layout, or table layout, etc.) and center that element. That works. Or to center all the contents, you can add android:gravity="center" to the containing layout.

Answer 2

I think what you are trying to achieve here is trying to get both the username and password fields vertically centered, and the password field below the username field. The error in your layout is that you only tell the username textview and edittext to center vertically, and relative layout centeres the layouts after having arranged them. So your username field is centered, while the password is left on top.

What you should do is tell the parent( RelativeLayout ) to vertically center all its child elements.

For that simply remove this attribute from the "username" TextView element :

android:layout_centerVertical="true"

And add this attribute to your RelativeLayout element:

android:gravity="center_vertical" //tells RelativeLayout to vertically center all child elements

In this case i would recommend using a LinearLayout but you can continue using RelativeLayout for now. Hope it helps!

Answer 3

As you go through the different Layouts you will find that while Relative layout feels the most "natural" if you're used to positioning things via CSS, for example (with absolute or relative positions) the situation you're describing here calls for either Linear or Table layout. Table layout is probably your best bet for anything "form" related. Your table elements (columns) should have a layout_span attribute that details how many columns to go across (it's sort of analog to colspan in HTML).

I'm not sure what specifically is going wrong in your RelativeLayout above, and I'm sure that with adequate trial and error you could get it to do roughly what you want, but I strongly advise you to use the right tools for the job.

LinearLayout is also a terrific tool (which you should remember can be nested indefinitely). Give your Layout a weightSum and then each item can have a layout_weight (they should add up to be the sum), while their layout_width should be 0dp (it's not intuitive, but that's how it works). That's also a terrific way to make things sit where they ought to.

Lastly the answer to the correct order in RelativeLayout is that the items are Z ordered from bottom to top, so the later an item appears in the sibling order, the higher its Z order is. Otherwise, their order is irrelevant.