custom dialog with close button

Question

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

Thanks in advance.

Answer 1

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

Answer 2

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>

Answer 3

Here I have one solution for that.

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

Answer 4

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);