How do I obtain this specific screen layout for android?

Question

Layout Code:

So Basically I want the height of A to be half of the android screen and B to be at top left on top of A. So A is like a background image and B is you could say for example be a picture like a face for example. How do I got about this?

This is what I have so far but It doesn't seem to be working out? Maybe I'm using Relativelayout incorrect? I need something that acts like a container like a div. I was assuming if I wrap it in a relativelayout or something like a div it would work out but it doesn't.

<LinearLayout
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.5">

    <ImageView
        android:id="@+id/bground"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:src= "@drawable/background" />

    <ImageView
        android:id="@+id/profileimage"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src= "@drawable/face" />

    </RelativeLayout>
</LinearLayout>

Answer 1

You can easily achieve it by using RelativeLayout only.

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.5">

    <ImageView
        android:id="@+id/bground"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:src= "@drawable/background" />

    <!-- You need to add the profile image view after the background view -->
    <!-- so that it is placed above the background. -->
    <!-- Lock the size for profile, don't fill the whole screen -->
    <ImageView
        android:id="@+id/profileimage"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src= "@drawable/face" />

 </RelativeLayout>

You can also use android:layout_alignParentTop="true" and android:layout_alignParentLeft="true" for profileimage view to make it at the top left of the RelativeLayout.

Answer 2

try this: use a Framelayout for imageview

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

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <ImageView
            android:id="@+id/bground"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#ff574f" />

        <ImageView
            android:id="@+id/profileimage"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_gravity="top|left"
            android:background="#32cd32" />

    </FrameLayout>

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

    </FrameLayout>
</LinearLayout>

Use android:src for images