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.stack.imgur.com/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>

score 5 · Accepted Answer · edited May 23 '17 at 12:14

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.

Thanks sir. It worked. But please tell me why have you kept the layout_height of the RelativeLayout as 0? And will the height of orange rectangle change according to device and screen size? — Aritra Bhattacharyya, Aug 15 '15 at 11:11
Also if I want to put texts inside the orange rectangle, how do I ensure that it remains within it? — Aritra Bhattacharyya, Aug 15 '15 at 12:16

score 0 · Answer 2 · answered Aug 15 '15 at 09:59

Why don't you set android:gravity="center" on your albumheader layout. Now, your ImageViews height is hardcoded to 135dp, so why don't you just set every other layout in albumheader to a set height of say 100dp for example instead of match_parent. Now because albumheader gravity is set to center, you should get the effect of the ImageView floating above it.

I think that should do the trick but if it doesn't let me know.

score 0 · Answer 3 · answered Aug 15 '15 at 10:15

its because your underlay linearLayout has 100dp maring top and bottom

its parent has 150dp height and already 100dp is consumed by the marings so only 50dp is left witch is not enough for imageView with 135dp height to be shown in it.

it wouldbe easier to implement this view if you used RelativeLayout for some of the views witch would help especially for positioning that image view and the orange box (using center vertical attribute).

How do I make an ImageView float above a LinearLayout?

3 Answers3