CODEWITHSUNDEEP
android
joshuahornby10
joshuahornby10

Reputation: 4302

Android make layouts overlap each other

I currently have this layout.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="2"
android:orientation="vertical">

<LinearLayout android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="0.5"
    android:background="?attr/colorPrimary">
</LinearLayout>

<LinearLayout android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1.5"
    android:background="#E5E8EC"></LinearLayout>

enter image description here

But I wish to overlap another layout over the blue header, something similar to this. As you can see the white box overlaps the header.

enter image description here

Although I am not sure how I should go about this.

Upvotes: 1

Views: 906

Answers (2)

Sourabh
Sourabh

Reputation: 8482

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

    <View
        android:layout_width="match_parent"
        android:layout_height="160dp"
        android:background="@color/purple" />

    <!-- The photo & namename  -->
    <RelativeLayout
        android:id="@+id/foo"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        ...> 
    </RelativeLayout>

    <!-- card -->
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/doo"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:padding="8dp">

        ...

    </RelativeLayout>


</RelativeLayout>

Upvotes: 1

michal.luszczuk
michal.luszczuk

Reputation: 2903

Please check this:

<FrameLayout android:background="@color/gray">
   <View android:background="@color/purple" android:height="@dimen/header_height/>

   <LinearLayout android:orientation="vertical">
       <LinearLayout> content with user icon stats/progress </LinearLayout>
       <LinearLayout> content with white card <LinearLayout>
   </LinearLayout>    
</FrameLayout>

So purple view is under everything with some specific height, and over this purple header is your content with everything you want.

Upvotes: 2

Related Questions