How do I draw a linear layout over a relative layout?

Question

My code:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".homepage"
    android:orientation="vertical"
    android:padding="10dp">

    <!--wavy background-->
    <RelativeLayout                                
        android:layout_width="match_parent"
        android:layout_height="300sp"
        android:background="@drawable/wave">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textStyle="bold"
            android:text="CGA Dashboard"
            android:gravity="center"
            android:layout_centerVertical="true"
            android:textAllCaps="true"
            android:fontFamily="sans-serif-smallcaps"/>
    </RelativeLayout>
    <!--wavy background-->

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center"
        android:clipToPadding="false">
        <androidx.cardview.widget.CardView
            
             <!---some code here --->

        </androidx.cardview.widget.CardView>
        <androidx.cardview.widget.CardView

            <!---some code here --->

        </androidx.cardview.widget.CardView>

    </LinearLayout>

Inside the parent linear layout, I have a child relative layout which contains a wavy background.

But when I execute the code the child linear layout renders below the relative layout as shown in the output below:

Please click here to view

I want to move the child linear layout a little up so that it renders over the relative layout. How do I do so?

Answer 1

In order to draw something over something, you should use not LinearLayout, but FrameLayout, because LinearLayout draws its children from top to bottom or from left to right.

More than that, it's not recommended to use RelativeLayout because of its low performance. You should consider ConstraintLayout instead.

But if you will stick with your current layout, just use FrameLayout as parent, something like that:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".homepage"
    android:padding="10dp">

    <!--wavy background-->
    <RelativeLayout                                
        android:layout_width="match_parent"
        android:layout_height="300sp"
        android:background="@drawable/wave">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textStyle="bold"
            android:text="CGA Dashboard"
            android:gravity="center"
            android:layout_centerVertical="true"
            android:textAllCaps="true"
            android:fontFamily="sans-serif-smallcaps"/>
    </RelativeLayout>
    <!--wavy background-->

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center"
        android:clipToPadding="false">
        <androidx.cardview.widget.CardView
            
             <!---some code here --->

        </androidx.cardview.widget.CardView>
        <androidx.cardview.widget.CardView

            <!---some code here --->

        </androidx.cardview.widget.CardView>

    </LinearLayout>