How do I make an ImageView float above a LinearLayout?

Question

Please check the link to image below. I am unable to post the image due to low reputation.

https://i.sstatic.net/nupZo.png

My goal is to get a layout like the one in left and instead I am getting the one in right. Here is my xml code for the layout.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent"
android:background="@color/metalDark"
android:orientation="vertical"
>
<LinearLayout
    android:id="@+id/topPanel"
    android:layout_width="fill_parent"
    android:layout_height="65dp"
    android:background="@color/metalList"
    android:elevation="6dp"
    android:layout_marginBottom="5dp"
    android:orientation="horizontal">

    <TextView
        .../>


</LinearLayout>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/topPanel"
    android:layout_margin="10dp"
    android:orientation="vertical">

    <LinearLayout
        android:id="@+id/albumheader"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:background="@color/metalList"
        android:elevation="6dp">
        <LinearLayout
            android:id="@+id/underlay"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="25dp"
            android:layout_marginBottom="25dp"
            android:background="@drawable/canvas2">
        <ImageView
            android:id="@+id/al_art"
            android:layout_width="135dp"
            android:layout_height="135dp"
            android:layout_toLeftOf="@+id/al_details"
            android:layout_marginLeft="25dp"
            android:layout_marginTop="-17dp"
            android:elevation="4dp"/>
        <LinearLayout
            android:id="@+id/al_details"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="right|center"
            android:orientation="vertical">

            <TextView
                .../>
            <TextView
                .../>
            <TextView
                .../>

        </LinearLayout>
            </LinearLayout>
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:background="@color/metalList"
        android:layout_marginTop="15dp"
        android:layout_marginBottom="15dp"
        android:elevation="6dp"
        >
        <ListView
            ..../>
    </LinearLayout>

</LinearLayout>

Answer 1

LinearLayout isn't so great for putting Views on top of each other.

This article is very helpful for further information: http://android-developers.blogspot.com/2009/02/android-layout-tricks-1.html

Here's what I would do:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <View
        android:id="@+id/header"
        android:layout_width="match_parent"
        android:layout_marginBottom="12dp"
        android:layout_height="?listPreferredItemHeight"/>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_marginStart="12dp"
        android:layout_marginEnd="12dp"
        android:layout_marginBottom="12dp"
        android:layout_height="wrap_content">


        <ImageView
            android:id="@+id/img_orange_rectangle"
            android:background="#ff6600"
            android:layout_centerVertical="true"
            android:layout_width="match_parent"
            android:layout_height="128dp"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_centerVertical="true"
            android:text="hi I'm some text"
            android:gravity="end|top"
            android:padding="6dp"
            android:layout_alignStart="@id/img_orange_rectangle"
            android:layout_alignEnd="@id/img_orange_rectangle"
            android:layout_alignBottom="@id/img_orange_rectangle"
            android:layout_alignTop="@id/img_orange_rectangle"
            android:layout_height="0dp"/>


        <ImageView
            android:id="@+id/img_blue_square"
            android:background="#2541ba"
            android:layout_marginStart="24dp"
            android:layout_centerVertical="true"
            android:layout_width="156dp"
            android:layout_height="156dp"/>
    </RelativeLayout>


    <ListView
        android:id="@+id/listview"
        android:layout_marginStart="12dp"
        android:layout_marginEnd="12dp"
        android:layout_marginBottom="12dp"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>
</LinearLayout>

Updated on August 15, 2015 per comments below:

But please tell me why have you kept the layout_height of the RelativeLayout as 0?

I used a height of 0 on the RelativeLayout because the layout gets its height based on the layout_weight.

And will the height of orange rectangle change according to device and screen size?

No. Although I updated the layout to be able to do so. I recommend this article for how to support multiple screen sizes. Toward the bottom of this this StackOverflow post part 2 it talks about dimensions xml for each screen size from the Google IO pdf.

Also if I want to put texts inside the orange rectangle, how do I ensure that it remains within it?

I've added another layout above. There are multiple ways going about this. The one I chose was to make a TextView that aligns the attributes of the ImageView above it.