CODEWITHSUNDEEP
androidcustomizationandroid-alertdialogandroid-dialog
southpark
southpark

Reputation: 541

Custom AlertDialogs/Dialogs in Android appearance issues

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

AlertDialog

  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>

Upvotes: 0

Views: 206

Answers (7)

payal tuteja
payal tuteja

Reputation: 170

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>

Upvotes: 0

Saritha
Saritha

Reputation: 488

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.

Upvotes: 0

Dhaiyur
Dhaiyur

Reputation: 583

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

Upvotes: 0

Logic
Logic

Reputation: 2258

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

Upvotes: 1

Pankaj
Pankaj

Reputation: 8058

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

Upvotes: 0

Moinkhan
Moinkhan

Reputation: 12932

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

Upvotes: 0

Moinkhan
Moinkhan

Reputation: 12932

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.

Upvotes: 0

Related Questions