Shade and overlap AppBarLayout with FrameLayout

Question

I'm making an app for my graduation exam. I have a frame layout that has a black background with a 60% alpha (to shade everything that is below it). I would like that the frame layout overlaps the app bar layout and the floating button.
The only other similar question I found is this one, but It didn't work on my project because, as long as I understood, he only wanted to overlap a FrameLayout.

Here is the AppBarLayout with the floating button:

<android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay"/>

        <RelativeLayout
            android:id="@+id/header"
            android:paddingLeft="@dimen/activity_horizontal_margin"
            android:paddingRight="@dimen/activity_horizontal_margin"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:elevation="4dp">

            [...]

        </RelativeLayout>
</android.support.design.widget.AppBarLayout>

<android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        app:srcCompat="@drawable/ic_add_white" />

Inside the relative layout up above there is a little text I need.

Here is instead the FrameLayout:

<FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/blackBackground"
        android:id="@+id/addJobFrame"
        android:visibility="visible"
        app:behavior_overlapTop="100dp">

        [...]

</FrameLayout>

Please, note that everything is inside a CoordinatorLayout.

The effect I want to obtain is the one on the right in this picture, in fact in the frame layout I've included an external xml layout.

As an alternative, do you know any other method?

Can you please provide an image of your expected output? It will help you get quick answer from others. — Ferdous Ahamed, Mar 27 '17 at 20:13
This is a custom dialog. Please see my answer. I have added full working code. Hope it will help you. — Ferdous Ahamed, Mar 27 '17 at 21:33

score 0 · Accepted Answer · answered Mar 27 '17 at 21:31

As per your attached image, seems its a custom AlartDialog.

To create a custom dialog:

Design an custom layout XML dialog_layout.xml for your custom dialog.
Set this custom layout to AlertDialog by using AlertDialog.Builder.setView() method.

Here is a complete example:

dialog_layout.xml

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

    <EditText
        android:id="@+id/editText_dateStart"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@color/colorPrimaryDark"
        android:textColorHint="@color/colorPrimary"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:padding="20dp"
        android:hint="Start Date"
        android:inputType="date" />

    <EditText
        android:id="@+id/editText_dateEnd"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@color/colorPrimaryDark"
        android:textColorHint="@color/colorPrimary"
        android:layout_below="@id/editText_dateStart"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:padding="20dp"
        android:hint="End Date"
        android:inputType="date" />

    <Button
        android:id="@+id/button_ok"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginBottom="15dp"
        android:text="ACCETTO"
        android:textColor="#ffffff"
        android:background="#34ff00"
        android:layout_below="@id/editText_dateEnd"
        android:layout_alignParentRight="true"/>

</RelativeLayout>

YourActivity.java

    AlertDialog.Builder dialogBuilder;
    AlertDialog dialog;

    LayoutInflater inflater = activity.getLayoutInflater();
    View dialogLayout = inflater.inflate(R.layout.dialog_layout, null);

    // Views
    Button button = (Button) dialogLayout.findViewById(R.id.button_ok);

    button.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {

                // Do something
            }
        });

    dialogBuilder = new AlertDialog.Builder(activity);
    dialogBuilder.setView(dialogLayout);

    dialog = dialogBuilder.create();
    dialog.show();

Shade and overlap AppBarLayout with FrameLayout

1 Answers1