Android外观问题中的自定义AlertDialogs /对话框

Question

I have implemented the following Dialog in Android but have certain problems that I cant figure out why it is happening.

1. I cant figure out why there is a white space at the top and the bottom corners. And how to remove it!
2. As i have used Dialog and not AlertDialog , this message disappears when I touch elsewhere on the screen. I want to prevent this from happening and want the message box to be closed only when the user selects any one of the two options.
3. How much ever I try, I am not able to get the Cancel and Erase button of the same width.

Here are the XMLs

custom_alert.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:background="@drawable/custom_alert_layout"
android:id="@+id/alert_layout"
android:paddingBottom="15dp"
android:paddingTop="10dp"
android:layout_height="wrap_content">
<ImageView
 android:layout_width="40dp"
 android:layout_height="40dp"
 android:id="@+id/alert_icon_imageview"
 android:src="@drawable/alerticon"
 android:layout_alignParentTop="true"
 android:layout_alignLeft="@+id/alert_msg"
 android:layout_alignStart="@+id/alert_msg" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/alert_title"
 android:text="TITLE"
android:textSize="18sp"
android:textStyle="bold"
android:textColor="#0a4d4a"
 android:layout_alignParentTop="true"
 android:layout_toRightOf="@+id/alert_icon_imageview"
 android:layout_toEndOf="@+id/alert_icon_imageview"
 android:layout_marginLeft="20dp" />
<ImageView
android:layout_width="match_parent"
android:layout_height="2dp"
 android:layout_marginTop="10dp"
 android:layout_marginRight="4dp"
 android:layout_marginLeft="2dp"
android:id="@+id/alert_divider_imageview"
android:layout_below="@+id/alert_title"
android:src="@drawable/alertdivider"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/alert_msg"
 android:text="MESSAGE"
 android:layout_marginTop="10dp"
 android:layout_marginLeft="10dp"
android:textSize="16sp"
android:layout_below="@+id/alert_divider_imageview"
android:textColor="#ff373334"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="2dp"
 android:layout_marginRight="4dp"
 android:layout_marginLeft="2dp"
 android:layout_marginTop="10dp"
android:id="@+id/alert_divider_imageview2"
android:layout_below="@+id/alert_msg"
android:src="@drawable/alertdivider"/>
<Button
 android:layout_width="150dp"
android:id="@+id/alert_cancel"
 android:layout_marginLeft="10dp"
 android:layout_marginRight="5dp"
 android:layout_marginTop="15dp"
 android:textColor="#ffffff"
 android:textStyle="bold"
android:text="CANCEL"
 android:background="@drawable/custom_alert_cancel"
 android:layout_height="wrap_content"
 android:layout_below="@+id/alert_divider_imageview2"
  />
<Button
android:layout_width="150dp"
android:id="@+id/alert_ok"
android:text="ERASE"
 android:textStyle="bold"
 android:layout_marginRight="10dp"
 android:layout_marginLeft="5dp"
 android:layout_marginTop="15dp"
 android:textColor="#ffffff"
 android:background="@drawable/custom_alert_ok"
 android:layout_toRightOf="@+id/alert_cancel"
 android:layout_height="wrap_content"
android:layout_below="@+id/alert_divider_imageview2" />
</RelativeLayout>

custom_alert_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false" >
    <shape android:shape="rectangle">
        <corners android:radius="10dp"/>
        <solid android:color="#139977" />
        <stroke android:width="2dp" android:color="#0a4d4a" />
    </shape>
</item>
</selector>

Answer 1

Can you post your Activity's code ?

Try this in your Activity :

    final Dialog dialog = new Dialog(getActivity());
    dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
    dialog.setContentView(R.layout.alert_dialog);

    Button okBtn = (Button) dialog.findViewById(R.id.ok_btn);
    Button cancelBtn = (Button) dialog.findViewById(R.id.cancel_btn);

    okBtn.setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View v) {
            doErase();  
        }
    });
    cancelBtn.setOnClickListener(new OnClickListener() {

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

        }
    });

    dialog.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));
    dialog.setCancelable(false);
    dialog.show();

Answer 2

to solve 3rd problem, remove buttons from xml and use inbuild button of dialog. methods like setPositiveButton() and setNegativeButton() of dialog class. it will give you same size button.

Answer 3

to solve the 1st problem you can use in xml like

<item name="android:background">@android:color/transparent</item>

or in java

dialog.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));

Answer 4

Just add a line to your dialog box which remove your actionbar and title bar of the dialog:

Dialog dialog = new Dialog(MainActivity.this);
        dialog.requestWindowFeature(Window.FEATURE_NO_TITLE); //add this line
        dialog.setContentView(R.layout.activity_main);

Answer 5

for solve your first problem add this code before setContentView

Window window = actDialog.getWindow();
    WindowManager.LayoutParams wlp = window.getAttributes();

    window.setAttributes(wlp);
    window.setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));

    actDialog.requestWindowFeature(Window.FEATURE_NO_TITLE);

your second problem solution

actDialog.setCanceledOnTouchOutside(false);

your third problem solution here

place your two Button in LinearLayout and give layout_weight same

Answer 6

1.To remove white space at top: add these two lines to your dialog ,

       dialog.getWindow();
       dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
       dialog.setContentView(R.layout.alert_dialog);

remove white space at bottom,in your code just remove below line

 <corners android:radius="10dp"/> 

from your custom_alert_layout.xml file.

2.To solve second problem:add below two lines to your code,

  dialog.setCancelable(false);
  dialog.setCanceledOnTouchOutside(false);

3.To get same width for buttons use LinearLayout as parent for both the buttons,and give equal weights for buttons.

Answer 7

For your 3rd problem here is code

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >

 <Button
android:layout_width="match_parent"
android:id="@+id/alert_cancel"
android:layout_marginLeft="10dp"
android:layout_weight="1"
android:layout_marginRight="5dp"
android:layout_marginTop="15dp"
android:textColor="#ffffff"
android:textStyle="bold"
android:text="CANCEL"
android:background="@drawable/custom_alert_cancel"
android:layout_height="wrap_content"
/>
<Button
android:layout_width="match_parent"
android:id="@+id/alert_ok"
android:text="ERASE"
android:textStyle="bold"
android:layout_weight="1"
android:layout_marginRight="10dp"
android:layout_marginLeft="5dp"
android:layout_marginTop="15dp"
android:textColor="#ffffff"
android:background="@drawable/custom_alert_ok"
android:layout_height="wrap_content"
/>
</LinearLayout>