How to get this cross button / image on the border of a custom dialog box?

Question

How to get this cross button / image (red cover) on the border of a custom dialog box?

Answer 1

Android is not Windows. You don't need a close button in the style of Windows. In addition, Android is not MacOS, so you also do not need small shiny red and white dots.

When you develop an application for a mobile platform, you must comply with the User Interface Rules , which define the usage patterns and visual styles of this platform.

Android has no headers, no drop-down menus and no minimize / restore / close buttons. Do not try to make them, or you will make an application that looks like it was never intended for the Android platform.

The back key is a button that does exactly what you want. He closes the dialogue without a choice. Let the Android platform do the same here. Do not make your users think in a different OS than the one they use.

Answer 2

Hi

You must follow these steps to create this Custom dialog box.

• create the xml style.xml file in the folder with your values. and enter the 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 custom_dialog.xml in the 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 get access to this layout in its action.

Answer 3

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 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 a private warning AlertDialogDialog; ....

Hope this helps you.

Answer 4

I did some work on this code tested on nuxes 5, the cross in the attached image is the 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> 

The inner dialog class in the 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