Creating a layout without a border that overlays the background layer

Question

I want to create something like this in the screenshot. It has a main layout that is the background and layout that overlays it. I am not sure how this is done.

My best guess would be an dialog fragment. Is this the right way to do something like this.

My attempt at using the dialog fragment doesn't give me the results I would like and this is as close as I can get.

This is my layout:

<RelativeLayout
    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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context="com.chatt.fragments.AddMember">

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_highlight_off_white_36dp"
            android:layout_alignParentRight="true"
            android:layout_alignParentEnd="true"/>

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:id="@+id/ivBackground"
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:src="@drawable/world"
            android:scaleType="centerCrop"
            android:alpha="0.4"/>

        <de.hdodenhof.circleimageview.CircleImageView
            android:id="@+id/civProfilePhoto"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:src="@drawable/user3"
            app:layout_anchor="@+id/ivBackground"
            app:layout_anchorGravity="bottom|center"/>

        <TextView
            android:id="@+id/tvMemberName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:fontFamily="sans-serif-light"
            android:text="Sarah"
            android:textSize="26sp"
            android:textStyle="bold"
            app:layout_anchor="@+id/civProfilePhoto"
            app:layout_anchorGravity="bottom|center"
            android:layout_marginTop="40dp"/>

    </android.support.design.widget.CoordinatorLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_alignParentBottom="true"
        android:background="@color/material_grey_300">

        <ImageButton
            android:id="@+id/ibLock"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_alignParentStart="true"
            android:layout_alignParentLeft="true"
            android:layout_marginLeft="60dp"
            android:layout_marginStart="60dp"
            android:src="@drawable/ic_lock_black_36dp"/>

        <ImageButton
            android:id="@+id/ibAddMember"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:layout_marginRight="60dp"
            android:layout_marginEnd="60dp"
            android:src="@drawable/ic_person_add_black_36dp"/>
    </RelativeLayout>
</RelativeLayout>

I have used the Coordinator Layout to anchor the profile picture on the background. However, that works fine. But the name covers some of the profile picture. The icons I download from google icon pack. The buttoms show a very dark background and should be transparent. The close icon in the top right corner doesn't have a transparent background either. The dialog covers the whole screen.

I inflate my DialogFragment like this:

   @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setStyle(DialogFragment.STYLE_NO_FRAME, 0);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        getDialog().getWindow().setBackgroundDrawable(new ColorDrawable(0));
        return inflater.inflate(R.layout.fragment_add_member, container, false);
    }

Many thanks for any suggestions,

Answer 1

This is a small example of a layout that recreate the UI of your screenshot using the DialogFragment:

The layout fragment_add_member.xml:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <ImageView
        android:layout_width="250dp"
        android:layout_height="200dp"
        android:scaleType="centerCrop"
        android:src="@drawable/world"/>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end"
        android:layout_margin="5dp"
        android:src="@drawable/ic_highlight_off_white_36dp"/>

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/civProfilePhoto"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="185dp"
        android:src="@drawable/profile"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="240dp"
        android:gravity="center_horizontal"
        android:text="Mattia"
        android:textSize="16sp"/>

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_marginTop="320dp"
        android:background="@color/material_grey_300">

        <ImageView
            android:id="@+id/ibLock"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical|start"
            android:layout_marginLeft="50dp"
            android:layout_marginStart="50dp"
            android:src="@drawable/ic_lock_black_36dp"/>

        <ImageView
            android:id="@+id/ibAddMember"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical|end"
            android:layout_marginEnd="50dp"
            android:layout_marginRight="50dp"
            android:src="@drawable/ic_person_add_black_36dp"/>

    </FrameLayout>
</FrameLayout>

The DialogFragment:

public class AddMemberDialogFragment extends DialogFragment {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setStyle(DialogFragment.STYLE_NO_TITLE, 0);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_add_member, container);
    }
}

Answer 2

Two approach that you can choose.

1. Use DialogFragment It will give you shadow automatically.

public class OverlayDialogFragment extends DialogFragment {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // This will give you shadow with borderless frame.
        setStyle(DialogFragment.STYLE_NO_FRAME, 0);
    }

    // your code. define layout xml, etc....

}

2. Use overlayed Layout and background drawable for shadow

Define two Layouts in root RelativeLayout and adjust width and height of overlayed one. And then apply 9-patch background drawable.

<RelativeLayout
 android:id="@+id/layoutRoot"
 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">

    <!-- your base UI elements here -->

    <RelativeLayout
        android:id="@+id/overlayLayout"
        android:layout_width="600dp"
        android:layout_height="800dp"
        android:background="@drawable/img_bg_mask"
        android:orientation="vertical">
    </RelativeLayout>
</RelativeLayout>

And img_bg_mask.png looks like as below. Below image shows rounded corner as an example, but you can make a 9-patch image that has rectangled shadow.