How to add Layout on top of another Layout?

Question

My English is poor. So I threw off the video. I think any programmer looking at this will understand the reason. Thank you in advance

I want to learn how to use ReleaseativeLayout correctly, because ConstainLayout is very buggy. Even using it in Android Studio Canary.

So I'm using ReleativeLayout and LineartLayout now. These are the most effective ViewGroup. I thought. But it turned out all wrong

XML Code

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:theme="@style/ThemeOverlay.AppCompat.Dark"
    android:background="@drawable/login_faggot">

    <TextView
        android:gravity="center_horizontal"
        android:layout_above="@+id/plsLogin"
        android:text="Welcome."
        android:textSize="18sp"
        android:textColor="@color/white"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
    <TextView
        android:layout_marginBottom="25dp"
        android:textSize="16sp"
        android:textColor="@color/grayBg"
        android:gravity="center_horizontal"
        android:id="@+id/plsLogin"
        android:layout_above="@+id/editLogin"
        android:text="Please Login."
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <TextView
        android:background="@color/white"
        android:layout_alignLeft="@+id/editLogin"
        android:layout_alignBaseline="@+id/editLogin"
        android:layout_marginStart="50dp"
        android:layout_width="1dp"
        android:layout_height="wrap_content"/>
    <TextView
        android:background="@color/white"
        android:layout_alignLeft="@+id/editPass"
        android:layout_alignBaseline="@+id/editPass"
        android:layout_marginStart="50dp"
        android:layout_width="1dp"
        android:layout_height="wrap_content"/>
    <EditText
        android:paddingStart="20dp"
        android:drawableStart="@drawable/ic_mail_white_24dp"
        android:drawablePadding="15dp"
        android:hint="@string/user_name"
        android:layout_alignStart="@+id/buttonLogin"
        android:layout_alignEnd="@+id/buttonLogin"
        android:layout_above="@+id/editPass"
        android:id="@+id/editLogin"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
    <EditText
        android:drawableStart="@drawable/ic_lock_white_24dp"
        android:paddingStart="20dp"
        android:drawablePadding="15dp"
        android:hint="@string/password"
        android:layout_alignEnd="@+id/buttonLogin"
        android:layout_alignStart="@+id/buttonLogin"
        android:layout_above="@+id/linearLayout"
        android:id="@+id/editPass"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <LinearLayout
        android:layout_marginStart="15dp"
        android:id="@+id/linearLayout"
        android:layout_above="@+id/buttonLogin"
        android:layout_alignEnd="@+id/buttonLogin"
        android:layout_alignStart="@+id/buttonLogin"
        android:layout_width="match_parent"
        android:layout_marginBottom="50dp"
        android:layout_height="wrap_content">
        <CheckBox
            style="@style/Widget.AppCompat.CompoundButton.RadioButton"
            android:id="@+id/radioButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Remember Me"
            android:paddingStart="15dp"
            android:textColor="@color/white"/>

        <TextView
            android:visibility="invisible"
            android:id="@+id/textView"
            android:textColor="@color/white"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="end"
            android:text="Forgot Password"/>
    </LinearLayout>

    <android.support.v7.widget.AppCompatButton
        android:id="@+id/buttonLogin"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginEnd="30dp"
        android:layout_marginStart="30dp"
        android:background="@drawable/button_round_corner"
        app:backgroundTint="@color/colorOrangeUsSite"
        android:text="@string/login"
        android:textColor="@color/white"/>

    <FrameLayout
        android:background="@color/black"
        android:alpha="0.8"
        android:visibility="gone"
        android:id="@+id/layoutProgressBar"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <ProgressBar
            android:theme="@style/ProgressBar"
            android:layout_gravity="center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </FrameLayout>
</RelativeLayout>

If you change to ConstraintLayout, then the bug disappears and everything starts working properly — Prost, Aug 02 '17 at 12:07

score 4 · Accepted Answer · answered Aug 02 '17 at 12:08

Just add one more Relative Layout below of your parent layout and set Gravity to it

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:theme="@style/ThemeOverlay.AppCompat.Dark"
android:background="@drawable/login_faggot">

<RelativeLayout
    android:layout_width="match_parent"
    android:gravity="center"
    android:layout_height="match_parent">

<TextView
    android:gravity="center_horizontal"
    android:layout_above="@+id/plsLogin"
    android:text="Welcome."
    android:textSize="18sp"
    android:textColor="@color/white"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>
<TextView
    android:layout_marginBottom="25dp"
    android:textSize="16sp"
    android:textColor="@color/grayBg"
    android:gravity="center_horizontal"
    android:id="@+id/plsLogin"
    android:layout_above="@+id/editLogin"
    android:text="Please Login."
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

<TextView
    android:background="@color/white"
    android:layout_alignLeft="@+id/editLogin"
    android:layout_alignBaseline="@+id/editLogin"
    android:layout_marginStart="50dp"
    android:layout_width="1dp"
    android:layout_height="wrap_content"/>
<TextView
    android:background="@color/white"
    android:layout_alignLeft="@+id/editPass"
    android:layout_alignBaseline="@+id/editPass"
    android:layout_marginStart="50dp"
    android:layout_width="1dp"
    android:layout_height="wrap_content"/>
<EditText
    android:paddingStart="20dp"
    android:drawableStart="@drawable/ic_mail_white_24dp"
    android:drawablePadding="15dp"
    android:hint="@string/user_name"
    android:layout_alignStart="@+id/buttonLogin"
    android:layout_alignEnd="@+id/buttonLogin"
    android:layout_above="@+id/editPass"
    android:id="@+id/editLogin"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>
<EditText
    android:drawableStart="@drawable/ic_lock_white_24dp"
    android:paddingStart="20dp"
    android:drawablePadding="15dp"
    android:hint="@string/password"
    android:layout_alignEnd="@+id/buttonLogin"
    android:layout_alignStart="@+id/buttonLogin"
    android:layout_above="@+id/linearLayout"
    android:id="@+id/editPass"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

<LinearLayout
    android:layout_marginStart="15dp"
    android:id="@+id/linearLayout"
    android:layout_above="@+id/buttonLogin"
    android:layout_alignEnd="@+id/buttonLogin"
    android:layout_alignStart="@+id/buttonLogin"
    android:layout_width="match_parent"
    android:layout_marginBottom="50dp"
    android:layout_height="wrap_content">
    <CheckBox
        style="@style/Widget.AppCompat.CompoundButton.RadioButton"
        android:id="@+id/radioButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Remember Me"
        android:paddingStart="15dp"
        android:textColor="@color/white"/>

    <TextView
        android:visibility="invisible"
        android:id="@+id/textView"
        android:textColor="@color/white"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="end"
        android:text="Forgot Password"/>
</LinearLayout>

<android.support.v7.widget.AppCompatButton
    android:id="@+id/buttonLogin"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginEnd="30dp"
    android:layout_marginStart="30dp"
    android:background="@drawable/button_round_corner"
    app:backgroundTint="@color/colorOrangeUsSite"
    android:text="@string/login"
    android:textColor="@color/white"/>

</RelativeLayout>

<FrameLayout
    android:background="@color/black"
    android:alpha="0.8"
    android:visibility="gone"
    android:id="@+id/layoutProgressBar"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ProgressBar
        android:theme="@style/ProgressBar"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</FrameLayout>

score 1 · Answer 2 · answered Aug 02 '17 at 12:11

Only parent layout height and width would match parent instead of a child.
you've have entered FrameLayout height="match_parent"

you've to implement like this.

 <RelativeLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:gravity="center"
 android:theme="@style/ThemeOverlay.AppCompat.Dark"
 android:background="@drawable/login_faggot">

<TextView
android:gravity="center_horizontal"
android:layout_above="@+id/plsLogin"
android:text="Welcome."
android:textSize="18sp"
android:textColor="@color/white"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<TextView
android:layout_marginBottom="25dp"
android:textSize="16sp"
android:textColor="@color/grayBg"
android:gravity="center_horizontal"
android:id="@+id/plsLogin"
android:layout_above="@+id/editLogin"
android:text="Please Login."
android:layout_width="match_parent"
android:layout_height="wrap_content"/>

<TextView
android:background="@color/white"
android:layout_alignLeft="@+id/editLogin"
android:layout_alignBaseline="@+id/editLogin"
android:layout_marginStart="50dp"
android:layout_width="1dp"
android:layout_height="wrap_content"/>
<TextView
android:background="@color/white"
android:layout_alignLeft="@+id/editPass"
android:layout_alignBaseline="@+id/editPass"
android:layout_marginStart="50dp"
android:layout_width="1dp"
android:layout_height="wrap_content"/>
 <EditText
android:paddingStart="20dp"
android:drawableStart="@drawable/ic_mail_white_24dp"
android:drawablePadding="15dp"
android:hint="@string/user_name"
android:layout_alignStart="@+id/buttonLogin"
android:layout_alignEnd="@+id/buttonLogin"
android:layout_above="@+id/editPass"
android:id="@+id/editLogin"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<EditText
android:drawableStart="@drawable/ic_lock_white_24dp"
android:paddingStart="20dp"
android:drawablePadding="15dp"
android:hint="@string/password"
android:layout_alignEnd="@+id/buttonLogin"
android:layout_alignStart="@+id/buttonLogin"
android:layout_above="@+id/linearLayout"
android:id="@+id/editPass"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>

<LinearLayout
android:layout_marginStart="15dp"
android:id="@+id/linearLayout"
android:layout_above="@+id/buttonLogin"
android:layout_alignEnd="@+id/buttonLogin"
android:layout_alignStart="@+id/buttonLogin"
android:layout_width="match_parent"
android:layout_marginBottom="50dp"
android:layout_height="wrap_content">
<CheckBox
    style="@style/Widget.AppCompat.CompoundButton.RadioButton"
    android:id="@+id/radioButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Remember Me"
    android:paddingStart="15dp"
    android:textColor="@color/white"/>

<TextView
    android:visibility="invisible"
    android:id="@+id/textView"
    android:textColor="@color/white"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="end"
    android:text="Forgot Password"/>
  </LinearLayout>

 <android.support.v7.widget.AppCompatButton
android:id="@+id/buttonLogin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="30dp"
android:layout_marginStart="30dp"
android:background="@drawable/button_round_corner"
app:backgroundTint="@color/colorOrangeUsSite"
android:text="@string/login"
android:textColor="@color/white"/>

<FrameLayout
android:background="@color/black"
android:alpha="0.8"
android:visibility="gone"
android:id="@+id/layoutProgressBar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ProgressBar
    android:theme="@style/ProgressBar"
    android:layout_gravity="center"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>
 </FrameLayout>
 </RelativeLayout>

How to add Layout on top of another Layout?

2 Answers2