Image over alertdialog - android

Question

How can I show fab over a alertdialog? Here's the code how I tried

final Dialog dialog = new Dialog(MainActivity.this);
        dialog.setContentView(R.layout.custom_dialog);
        dialog.show();

custom_dialog.xml

  <RelativeLayout
    .... />

    <CardView
    ..
    />

    <android.support.design.widget.FloatingActionButton
    ..
     app:layout_anchor="@id/ll_cardView"
     app:layout_anchorGravity="center|top" 
    />

    </RelativeLayout>

Answer 1

This is the MainActivity (or whatever you have)

public class MainActivity extends AppCompatActivity {

        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);

            showOnClickProfileDialog();
        }


        private void showOnClickProfileDialog() {
            AlertDialog.Builder alert = new AlertDialog.Builder(MainActivity.this);
            View alertView = getLayoutInflater().inflate(R.layout.alert_dialog_view, null);
            //Set the view
            alert.setView(alertView);
            //Show alert
            final AlertDialog alertDialog = alert.show();
            //Can not close the alert by touching outside.
            alertDialog.setCancelable(false);
            alertDialog.setCanceledOnTouchOutside(false);
            alertDialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));

        }
    }

This is the alert_dialog_view

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


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/white_radius_background"
            android:paddingBottom="150dp"
            android:layout_marginTop="150dp"
            android:layout_marginRight="15dp"
            android:layout_marginLeft="15dp"
            android:id="@+id/relativeLayout">

        </RelativeLayout>

        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_marginTop="-50dp"
            android:src="@drawable/profile_picture"
            android:layout_alignTop="@+id/relativeLayout"
            android:layout_centerHorizontal="true" />

    </RelativeLayout>
</RelativeLayout>

This is the white_radius_background

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid
        android:color="@color/colorWhite50"/>
    <corners
        android:radius="5dp" />
    <padding
        android:left="10dp"
        android:top="10dp"
        android:right="10dp"
        android:bottom="10dp" />
</shape>

This is the solution

You will have to adjust the image to make it rounded... but I think this will give you the idea.