How to get that cross button/image on Custom dialog box's boundary?

Question

How to get that cross button/image (red circled) on Custom dialog box's boundary?

Answer 1

I did some work on that here is code tested on nuxes 5, the cross in attached image is an image

dialog.xml

<RelativeLayout
    android:layout_marginTop="20dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginRight="20dp"
    android:background="@drawable/rounded_border"
    android:paddingBottom="20dp"
    android:gravity="center_horizontal" >

    <TextView
        android:id="@+id/label_popup"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="40dp"
        android:gravity="center_horizontal"
        android:text="@string/label_recive_pin"
        android:textColor="@color/green_line"
        android:padding="5dp"
        android:textScaleX="1.3"
        android:textSize="18sp" />

    <EditText
        android:id="@+id/edtpin"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/label_popup"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="40dp"
        android:background="@color/edit_green_bg"
        android:ems="15"
        android:gravity="center_horizontal"
        android:hint="@string/enter_email"
        android:inputType="textEmailAddress"
        android:paddingBottom="10dp"
        android:paddingTop="10dp"
        android:textColor="@color/edit_green_txt"
        android:textSize="15sp" >

        <requestFocus />
    </EditText>

    <Button
        android:id="@+id/btnLogin"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/edtpin"
        android:layout_alignRight="@+id/edtpin"
        android:layout_below="@+id/edtpin"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="30dp"
        android:background="@drawable/btn_bg_darkgreen"
        android:onClick="onLoginButtonClick"
        android:text="@string/get_pin_btn_txt"
        android:textColor="@color/white"
        android:textSize="20sp" />
</RelativeLayout>

<ImageView
    android:id="@+id/cancel_btn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true"
    android:src="@drawable/cross_window" />

Layout rounded_border.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="@color/white" />
            <corners android:radius="12dip" />
            <stroke
                android:width="1dip"
                android:color="@color/green_line" />
        </shape>
    </item>
</layer-list>

Inside dialog class in onCreate method

  @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));// *that how i made background transparent so that **Only** rounded border can be seen* 
        setContentView(R.layout.dialog_getpin);
    }

Demonstration

Answer 2

this is the code inside your activity

AlertDialog.Builder builder;


                    Context mContext = YOURACTIVITY.this;
                    LayoutInflater inflater = (LayoutInflater) mContext.getSystemService(LAYOUT_INFLATER_SERVICE);
                    View layout = inflater.inflate(R.layout.custom_dialog,
                                                   (ViewGroup) findViewById(R.id.layout_root));




                    ImageView close_dialog = (ImageView) layout.findViewById(R.id.imageView_custom_dialog_close);

                    close_dialog.setOnClickListener(new View.OnClickListener() {

                        public void onClick(View v) {

                        alertDialog.dismiss();

                        }
                    });


                    builder = new AlertDialog.Builder(mContext);
                    builder.setView(layout);
                    alertDialog = builder.create();

                    alertDialog.show();

this is the custom_dialog.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/layout_root"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:padding="10dp" android:background="@drawable/background">




    <ImageView
        android:id="@+id/imageView_custom_dialog_close"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:layout_margin="2dp"
        android:src="@android:drawable/ic_delete" />


//add here any controls you might want

</LinearLayout>

declare somewhere private AlertDialog alertDialog;....

Hope this help you.

Answer 3

Android is not Windows. You don't need a Windows style 'Close' button. Also, Android is not MacOS, so you don't need a little shiny red candy-like dot either.

When you develop an app for a mobile platform you should conform to the User Interface Guidelines that define the usage patterns and visual styles of that platform.

Android does not have title bars, does not have dropdown menus, and does not have minimize/restore/close buttons. Don't try to make them, or you will make an app that looks like it was never meant for the Android Platform.

The "Back" hardkey is the button that does exactly what you want. It closes a dialog without making a selection. Let the Android platform do the same thing here. Don't force your users to think in another OS than the one they use.

Answer 4

HI,

you have to follow these steps to make this Custom dialog box.

• create a xml file style.xml in your values folder. and enter style in your resource tag.

  <style name="Theme.CustomDialog"
      parent="android:style/Theme.Dialog">
      <item name="android:windowBackground">@drawable/bg_popup</item>
      <item name="android:windowNoTitle">true</item>
      <item name="android:layout_width">wrap_content</item>
      <item name="android:layout_height">wrap_content</item>
  </style>
  

• create a custom_dialog.xml in layout folder.

  <RelativeLayout android:layout_width="wrap_content"
      android:layout_height="wrap_content">
  
      <LinearLayout android:layout_width="wrap_content"
          android:layout_height="wrap_content" android:layout_marginTop="10dp" android:layout_marginRight="10dp">
      </LinearLayout>
  
      <ImageView android:layout_width="wrap_content"
          android:layout_height="wrap_content" android:background="@drawable/red_cross"
          android:layout_alignParentRight="true" android:layout_alignParentTop="true">
      </ImageView>
  </RelativeLayout>
  

• finally access this layout in an activity it will work.