Android make layouts overlap each other

Question

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>

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.

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

See this: http://stackoverflow.com/questions/26848843/how-to-create-a-card-toolbar-using-appcompat-v7 — Michele Lacorte, Nov 29 '15 at 20:38

score 2 · Answer 1 · answered Nov 29 '15 at 20:37

2

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.

answered Nov 29 '15 at 20:37

michal.luszczuk

2,883
1
15
22

What you mean by 'tested' ? – michal.luszczuk Nov 29 '15 at 20:46
When copying across I gets lots of errors, doesn't seem to work. – joshuahornby10 Nov 29 '15 at 20:46
But this is just a concept... i thought you are asking about conceptual thing which layout use and how to pack them aproprietly – michal.luszczuk Nov 29 '15 at 20:47
Sorry, my mistake for the confusion. I am looking for a more concrete solution. – joshuahornby10 Nov 29 '15 at 20:55

score 1 · Answer 2 · answered Nov 29 '15 at 20:47

<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>

Android make layouts overlap each other

2 Answers2