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

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!