Android RelativeLayout View Order

Question

There are several already answered questions regarding the draw order of android views from an xml file, and I have read them and attempted their solutions with no luck. I have a RelativeLayout with three children, an ImageView, a Button, and a LinearLayout. I want the LinearLayout to be on top, with the other two in the background. According to Defining Z order of views of RelativeLayout in Android, siblings are drawn in the order they are read from the xml file, so I placed my LinearLayout last in the file, but it's still drawn in the back. Here is my file:

<RelativeLayout
    android:id="@+id/login_form"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center_horizontal">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:id="@+id/imageView"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_above="@+id/register_button"
        android:paddingLeft="@dimen/padding_xxlarge"
        android:paddingRight="@dimen/padding_xxlarge"
        android:src="@drawable/logo"/>

    <Button
        android:layout_width="fill_parent"
        android:layout_height="@dimen/element_xlarge"
        android:text="@string/action_register"
        android:id="@+id/register_button"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"/>

    <LinearLayout
        android:id="@+id/email_login_form"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_above="@+id/register_button"
        android:layout_marginBottom="-40dp">

        <AutoCompleteTextView
            android:id="@+id/net_id"
            android:layout_width="fill_parent"
            android:layout_height="@dimen/element_small"
            android:hint="@string/prompt_username"
            android:inputType="textAutoComplete"
            android:maxLines="1"
            android:singleLine="true"
            android:layout_marginLeft="@dimen/padding_xlarge"
            android:layout_marginRight="@dimen/padding_xlarge"
            android:layout_marginBottom="@dimen/padding_small" />

        <EditText
            android:id="@+id/password"
            android:layout_width="match_parent"
            android:layout_height="@dimen/element_small"
            android:hint="@string/prompt_password"
            android:imeActionId="@+id/login"
            android:imeActionLabel="@string/action_sign_in_short"
            android:imeOptions="actionUnspecified"
            android:inputType="textPassword"
            android:maxLines="1"
            android:singleLine="true"
            android:layout_marginLeft="@dimen/padding_xlarge"
            android:layout_marginRight="@dimen/padding_xlarge" />

        <Button
            android:id="@+id/sign_in_button"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/padding_xlarge"
            android:layout_marginRight="@dimen/padding_xlarge"
            android:text="@string/action_sign_in" />

    </LinearLayout>

Picture: https://drive.google.com/a/cornell.edu/file/d/0BzEvKm6_q_oqbllRd284dS1ubVk/view?usp=sharing

I have also tried using the bringToFront() method in my onCreate() function:

findViewById(R.id.email_login_form).bringToFront();

But this had no effect. What am I doing wrong, and how can I make my LinearLayout appear on top?

--UPDATE--

After testing several recommendations from commenters, I have found this very weird behavior that might be the root of the problem. When I add a test Button like so:

<RelativeLayout
    android:id="@+id/login_form"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center_horizontal"
    android:clipChildren="false">

    <Button
        android:layout_width="fill_parent"
        android:layout_height="@dimen/element_xlarge"
        android:text="@string/action_register"
        android:id="@+id/register_button"
        android:layout_alignParentBottom="true"/>

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:id="@+id/imageView"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_above="@id/register_button"
        android:paddingLeft="@dimen/padding_xxlarge"
        android:paddingRight="@dimen/padding_xxlarge"
        android:src="@drawable/logo"/>

    <Button
        android:id="@+id/test_button"
        android:text="test"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/register_button"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="-30dp"/>

    <LinearLayout
        android:id="@+id/email_login_form"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_above="@id/register_button"
        android:layout_marginBottom="-30dp"
        android:clipChildren="false" >

        <AutoCompleteTextView
            android:id="@+id/net_id"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:hint="@string/prompt_username"
            android:inputType="textAutoComplete"
            android:maxLines="1"
            android:singleLine="true"
            android:layout_marginLeft="@dimen/padding_xlarge"
            android:layout_marginRight="@dimen/padding_xlarge"
            android:layout_marginBottom="@dimen/padding_small" />

        <EditText
            android:id="@+id/password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/prompt_password"
            android:imeActionId="@+id/login"
            android:imeActionLabel="@string/action_sign_in_short"
            android:imeOptions="actionUnspecified"
            android:inputType="textPassword"
            android:maxLines="1"
            android:singleLine="true"
            android:layout_marginLeft="@dimen/padding_xlarge"
            android:layout_marginRight="@dimen/padding_xlarge" />

        <Button
            android:id="@+id/sign_in_button"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/padding_xlarge"
            android:layout_marginRight="@dimen/padding_xlarge"
            android:text="@string/action_sign_in" />

    </LinearLayout>

</RelativeLayout>

Then the test_button is drawn on top of the register_button and the linearLayout, despite it being declared before the linearLayout in the xml. Why should the test button be treated differently than the LinearLayout?

Can you add a screenshot? It may help with understanding what's going on. [And then reply if you added it so I'm notified] — DragonJawad, Dec 07 '14 at 18:45
This `android:layout_above="@+id/register_button"` creates a new id, when the View still hasn't been created. Therefore, while you could use it for the ImageView (but you'd better create the Button before), it's wrong for the LinearLayout (use `android:layout_above="@id/register_button"`, instead). — Phantômaxx, Dec 07 '14 at 18:46
Screenshot posted. @DerGolem I made the change you suggested, but the problem still exists — Platatat, Dec 07 '14 at 19:00
Sorry about the picture sharing method, I can't post a real screenshot with less than 10 rep (seems like a weird rule), so google drive was the best I could do. — Platatat, Dec 07 '14 at 19:06
okay try this, set in the relative layout "clipchildren=false" and clipchildrenforpadding = false also — Mohammad Ersan, Dec 07 '14 at 19:09
I set android:clipChildren to false, but this did not fix the problem. clipChildrenForPadding doesn't seem to be an option for me. I will upload a picture of how it should look. — Platatat, Dec 07 '14 at 19:15
ok, i've created a similar layout quickly you can find it here : http://pastebin.com/1tpcMGES and here is a snapshot of it http://i.imgur.com/MI44bfK.png — Mohammad Ersan, Dec 07 '14 at 19:16
https://docs.google.com/a/cornell.edu/drawings/d/1Izg2AtAsf7NP1JrtcOaKVirJFD2I-HOTRWaU-Gx5ynI/edit?usp=sharing — Platatat, Dec 07 '14 at 19:19
@MoshErsan the important issue with my layout is that i need two ViewGroups to overlap. The layout you provided is similar, but I don't think it has any overlapping elements. — Platatat, Dec 07 '14 at 19:28

score 0 · Accepted Answer · answered Dec 07 '14 at 21:10

Ok, I've created similar xml you can check it here : http://pastebin.com/Dx7MXfj5

<Button
   android:id="@+id/registerButton"
   android:layout_width="match_parent"
   android:layout_height="100dp"
   android:layout_alignParentBottom="true"
   android:text="Register" />

<ImageView
   android:id="@+id/logoImageView"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:layout_above="@+id/registerButton"
   android:src="@drawable/ic_confirmation" />

<LinearLayout
   android:id="@+id/loginLayout"
   android:layout_width="220dp"
   android:layout_height="wrap_content"
   android:layout_above="@+id/registerButton"
   android:layout_centerHorizontal="true"
   android:layout_marginBottom="-20dp"
   android:background="#F00"
   android:orientation="vertical" >

    <EditText
       android:id="@+id/editText1"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:text="Email" >
    </EditText>

    <EditText
       android:id="@+id/editText2"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:text="Password" />

    <Button
       android:id="@+id/button2"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:text="Login" />
</LinearLayout>

and the result:

Xml Result

This works, thanks. I'm still very confused about why my original file didn't work, though. There doesn't seem to be much difference between the two. — Platatat, Dec 08 '14 at 17:47
I don't understand why the original layout doesn't work either — Liuting, Jan 14 '16 at 16:34
It would be helpful to edit the answer and add a brief summary of what you changed to make it work. — , Apr 09 '18 at 11:26

Android RelativeLayout View Order

1 Answers1