custom dialog with close button

Question

I want to create a custom dialog with the layout as shown in the picture. enter image description here The cross/close button must be on the top right side. Please suggest how can i achieve this kind of layout.

Thanks in advance.

Does this answer your question? [How to put close button at top corner in alert dialog box for android?](https://stackoverflow.com/questions/17168346/how-to-put-close-button-at-top-corner-in-alert-dialog-box-for-android) and this https://stackoverflow.com/q/8982678/5468463 — Vega, Sep 25 '20 at 11:32

score 23 · Accepted Answer · answered Nov 28 '13 at 06:06

might be below code is useful for you,achieved like this

<?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="wrap_content"
    android:layout_gravity="center_vertical"
    android:gravity="center"
    android:orientation="vertical" >

    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true" >

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="5dp"
            android:layout_marginTop="10dp"
            android:background="@drawable/popup_password_latest"
            android:gravity="center"
            android:orientation="vertical"
            android:paddingBottom="-50dp" >

          <!---add your views here-->
        </LinearLayout>

        <ImageView
            android:id="@+id/imageView_close"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="top|right"
            android:clickable="true"
            android:src="@drawable/close_selector" />
    </FrameLayout>

</LinearLayout>

Just one issue i am facing and that is i am getting a white background behind the dialog. Can it be removed? — Akshay Sethi, Nov 28 '13 at 06:25
nothing will work out as he sai we can see only white background,here we have add the transparency in the dialog also dialog.getWindow().setBackgroundDrawable( new ColorDrawable(android.graphics.Color.TRANSPARENT)); — Issac Balaji, Aug 28 '14 at 11:04
@IssacBalaji Thanks, that solved the white background issue behind the dialog. — iRuth, May 11 '15 at 17:03

RobinHood · Answer 2 · 2013-11-28T06:40:45.103

Relative layout will be your parent one and then add close button apply android:layout_alignParentRight="true" and android:layout_alignParentTop="true" and even give right and top margin in minus as per your requirement.

Code

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

    <LinearLayout
        android:id="@+id/relativeLayout1"
        android:layout_width="255dp"
        android:layout_height="385dp"
        android:layout_centerInParent="true"
        android:background="@color/white"
        android:orientation="vertical" >
    </LinearLayout>

    <Button
        android:id="@+id/button_close"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@+id/relativeLayout1"
        android:layout_alignTop="@+id/relativeLayout1"
        android:layout_marginRight="-10dp"
        android:layout_marginTop="-10dp"
        android:background="@drawable/close" />

</RelativeLayout>

Output

enter image description here

Jigar Brahmbhatt · Answer 3 · 2015-03-13T07:17:01.763

Here I have one solution for that. enter image description here

<FrameLayout 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" >

<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center" >

    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="15dp" >

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:background="@drawable/img_popup_one"
            android:orientation="vertical"
            android:padding="10dp" >

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Sign In"
                android:textColor="@color/clr_gray"
                android:textSize="16dp" />

            <EditText
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="15dp"
                android:background="@drawable/img_edittext_bg"
                android:hint="Username"
                android:padding="5dp"
                android:singleLine="true"
                android:textColorHint="@color/clr_gray" />

            <EditText
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="15dp"
                android:background="@drawable/img_edittext_bg"
                android:hint="Password"
                android:inputType="textPassword"
                android:padding="5dp"
                android:singleLine="true"
                android:textColorHint="@color/clr_gray" />
        </LinearLayout>
    </FrameLayout>

    <ImageView
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_gravity="right|top"
        android:contentDescription="@string/contentDescription"
        android:src="@drawable/img_popup_close" />
</FrameLayout>

There are three FrameLayouts but the XML code only closes two? — John61590, May 21 '18 at 23:56

score 2 · Answer 4 · edited Nov 28 '13 at 12:26

2

You can use PopupWindow here. You can Make a layout for your custom dialog and can inflate that layout in PopupWindow.It should be something like this:-

PopupWindow menuPopup;
menuView=getLayoutInflater().inflate(R.layout.layout_menu, null);
menuPopup=new PopupWindow(menuView, 200, 200, false);
menuPopup.showAtLocation(menuView, Gravity.TOP | Gravity.RIGHT, 0, 100);

edited Nov 28 '13 at 12:26

DroidDev

1,527
4
20
42

answered Nov 28 '13 at 06:06

Ravneet Singh

213
1
13

Exception: The specified child already has a parent. You must call removeView() on the child's parent first. – Naveed Ahmad Aug 30 '17 at 11:40

score 2 · Answer 5 · edited Mar 10 '15 at 23:31

Use This for custom dialog...

 private PopupWindow pw;

@SuppressWarnings("deprecation")
private void initiatePopupWindow() {

    LayoutInflater inflater = (LayoutInflater) MainActivity.this
            .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    View layout = inflater.inflate(R.layout.popup,
            (ViewGroup) findViewById(R.id.btncancelcat));
    WindowManager.LayoutParams lp = new WindowManager.LayoutParams();
    lp.width = WindowManager.LayoutParams.FILL_PARENT;
    lp.height = WindowManager.LayoutParams.WRAP_CONTENT;
    pw = new PopupWindow(layout, lp.width, lp.height, true);
    pw.showAtLocation(layout, Gravity.CENTER_VERTICAL, 0, 0);


    ImageButton btncancel = (ImageButton) layout.findViewById(R.id.btncancelcat);

    btncancel.setOnClickListener(cancel_click);

}

private OnClickListener cancel_click = new OnClickListener() {
    public void onClick(View v) {
        pw.dismiss();

    }
};

popup.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/linearpopup"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#e22e2e"
    android:orientation="vertical"
    android:padding="10dp" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/darker_gray" >
    </LinearLayout>

    <ImageButton
        android:id="@+id/btncancelcat"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:src="@drawable/btn" />

</RelativeLayout>

score 2 · Answer 6 · edited Mar 24 '15 at 07:36

enter image description here

![anybody can try above all but u will be facing problem background color problem

i have done very simple way 



  <?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"
        android:background="@android:color/transparent"
     >



            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="50dp"
                android:layout_marginLeft="50dp"
                android:layout_marginRight="50dp"
                android:layout_marginTop="50dp"
                android:background="#FFFFFF"
                android:gravity="center"
                android:orientation="horizontal" >

                <LinearLayout
                    android:layout_width="120dp"
                    android:layout_height="match_parent"
                    android:layout_gravity="center"
                    android:gravity="center"
                    android:orientation="vertical" >

                    <ImageView
                        android:id="@+id/left_arrow_imageview"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@drawable/up_arrow" />

                    <ListView
                        android:id="@+id/listview_observation"
                        android:layout_width="match_parent"
                        android:layout_height="0dp"
                        android:layout_gravity="center"
                        android:layout_weight="2"
                        android:padding="6dp" >
                    </ListView>

                    <ImageView
                        android:id="@+id/right_arrow_imageview"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@drawable/down_arrow" />
                </LinearLayout>

                <View
                    android:layout_width="1dp"
                    android:layout_height="match_parent"
                    android:layout_gravity="center"
                    android:layout_marginLeft="3dp"
                    android:layout_marginRight="3dp"
                    android:background="#B2B2B2"
                    android:scrollY="@dimen/activity_vertical_margin" />

                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="2"
                    android:gravity="right"
                    android:orientation="vertical" >

                    <TextView
                        android:id="@+id/text_head"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="left"
                        android:padding="6dp"
                        android:text="@string/Observation"
                        android:textSize="18sp"
                        android:textStyle="bold" />

                    <View
                        android:layout_width="match_parent"
                        android:layout_height="1dp"
                        android:layout_gravity="center"
                        android:layout_marginLeft="3dp"
                        android:layout_marginRight="3dp"
                        android:background="#B2B2B2"
                        android:scrollY="@dimen/activity_vertical_margin" />

                    <EditText
                        android:id="@+id/edit_observation"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:layout_weight="1"
                        android:background="#00000000"
                        android:ems="10"
                        android:gravity="top" >
                    </EditText>

                    <View
                        android:layout_width="match_parent"
                        android:layout_height="1dp"
                        android:layout_gravity="center"
                        android:layout_marginLeft="3dp"
                        android:layout_marginRight="3dp"
                        android:background="#B2B2B2"
                        android:scrollY="@dimen/activity_vertical_margin" />

                    <Button
                        android:id="@+id/button_done"
                        android:layout_width="94dp"
                        android:layout_height="wrap_content"
                        android:layout_marginRight="14dp"
                        android:layout_marginTop="3dp"    
                        android:background="@drawable/rectangular_view_selected"
                        android:text="@string/button_done"
                        android:textColor="@android:color/white" />

                </LinearLayout>
            </LinearLayout>

        <ImageView
            android:id="@+id/icon_close"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_alignParentTop="true"
            android:layout_marginRight="35dp"
            android:layout_marginTop="35dp"
            android:src="@drawable/icon_close" />

    </RelativeLayout>

the dialog must be like that

   private void ChildSectionView() {

            final Dialog dialog = new Dialog(NewObservationActivity.this);
            dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
            dialog.setContentView(R.layout.custom_dialog_obs_children);
            // Grab the window of the dialog, and change the width
            dialog.getWindow().setBackgroundDrawable(
                    new ColorDrawable(android.graphics.Color.TRANSPARENT));
            WindowManager.LayoutParams lp = new WindowManager.LayoutParams();
            Window window = dialog.getWindow();
            lp.copyFrom(window.getAttributes());

            Display display = getWindowManager().getDefaultDisplay();
            Point size = new Point();
            display.getSize(size);
            lp.width = size.x;
            lp.height = size.y;
            // This makes the dialog take up the full width
            window.setAttributes(lp);

            gridview = (GridView) dialog.findViewById(R.id.gridview_observation);

            ImageView icon_close = (ImageView) dialog.findViewById(R.id.icon_close);
            child_count = (TextView) dialog
                    .findViewById(R.id.text_child_count_dialog);

            child_count.setText("Selected " + intList.size() + " more children");
            SearchView searchview = (SearchView) dialog
                    .findViewById(R.id.search_children);

            icon_close.setOnClickListener(new OnClickListener() {

                @Override
                public void onClick(View v) {
                    dialog.dismiss();
                }
            });

            searchview.setOnQueryTextListener(new OnQueryTextListener() {

                @Override
                public boolean onQueryTextSubmit(String arg0) {
                    // TODO Auto-generated method stub
                    return false;
                }

                @Override
                public boolean onQueryTextChange(String string) {
                    filItemAdapter("N", string);
                    return false;
                }
            });

            filItemAdapter("", "");

            dialog.show();
        }

Note :-------

the relative layout background should be transparent
and dialog background also
dialog.getWindow().setBackgroundDrawable(
new ColorDrawable(android.graphics.Color.TRANSPARENT));][2]

score 0 · Answer 7 · answered Nov 28 '13 at 06:00

0

Add a button with that background and set the position alignParentTop and alignParentRight to true. And make the parent layout Relative.

answered Nov 28 '13 at 06:00

Avijit

3,834
4
33
45

score 0 · Answer 8 · answered Aug 12 '20 at 07:09

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

<YourLayout
    android:layout_marginTop="25sp"
     
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>


<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fabClose"
    android:tint="@color/white"
    app:fabCustomSize="40sp"
    app:maxImageSize="20sp"
    app:backgroundTint="@color/white"
    android:layout_gravity="center_horizontal"
    android:src="@drawable/ic_close"
    android:layout_width="40sp"
    android:layout_height="40sp"/>
</FrameLayout>

In Kotlin file write as below

    val alertDialog = dialogBuilder.create()
    alertDialog.show()
    alertDialog?.getWindow()?.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT));

this works fine for me

custom dialog with close button

8 Answers8

Linked