Android RelativeLayout View Order
There are several already answered questions regarding drawing order of android views from xml file and I have read them and tried to solve them with no luck. I have a RelativeLayout with 3 children, ImageView, Button and LinearLayout. I want the LinearLayout to be on top and the other two in the background. According to the RelativeLayout order order definition in Android , siblings are drawn in the order they are read from the xml file, so I put my LinearLayout last in the file, but it still draws 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>
Photo: https://drive.google.com/a/cornell.edu/file/d/0BzEvKm6_q_oqbllRd284dS1ubVk/view?usp=sharing
I also tried to use bringToFront () method in my onCreate () function:
findViewById(R.id.email_login_form).bringToFront();
But it had no effect. What am I doing wrong and how can I make my LinearLayout on top?
- UPDATE -
After testing several recommendations from commenters, I found this very strange behavior that could be causing 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 test_button is drawn on top of register_button and linearLayout, even though it is declared before the Layout line in xml. Why should the test button be handled differently than LinearLayout?
source to share
Ok I created a similar xml you can check 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 is:
source to share