How to create a Custom Dialog box in android?
Here I have created a simple Dialog, like:
custom_dialog.xml
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="80dp" android:background="#3E80B4" android:orientation="vertical" > <TextView android:id="@+id/txt_dia" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_margin="10dp" android:text="Do you realy want to exit ?" android:textColor="@android:color/white" android:textSize="15dp" android:textStyle="bold"/> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:background="#3E80B4" android:orientation="horizontal" > <Button android:id="@+id/btn_yes" android:layout_width="100dp" android:layout_height="30dp" android:background="@android:color/white" android:clickable="true" android:text="Yes" android:textColor="#5DBCD2" android:textStyle="bold" /> <Button android:id="@+id/btn_no" android:layout_width="100dp" android:layout_height="30dp" android:layout_marginLeft="5dp" android:background="@android:color/white" android:clickable="true" android:text="No" android:textColor="#5DBCD2" android:textStyle="bold" /> </LinearLayout></LinearLayout>
You have to extends Dialog
and implements OnClickListener
public class CustomDialogClass extends Dialog implements android.view.View.OnClickListener { public Activity c; public Dialog d; public Button yes, no; public CustomDialogClass(Activity a) { super(a); // TODO Auto-generated constructor stub this.c = a; } @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.custom_dialog); yes = (Button) findViewById(R.id.btn_yes); no = (Button) findViewById(R.id.btn_no); yes.setOnClickListener(this); no.setOnClickListener(this); } @Override public void onClick(View v) { switch (v.getId()) { case R.id.btn_yes: c.finish(); break; case R.id.btn_no: dismiss(); break; default: break; } dismiss(); }}
How to Call Dialog ?
R.id.TXT_Exit:CustomDialogClass cdd=new CustomDialogClass(Values.this);cdd.show();
Updates
After a long time one of my friends asked me to make a curved shape dialog with a transparent background. So, Here I have implemented it.
To Make a curved shape you need to create a separate curve_shap.XML
as below,
<shape xmlns:android="http://schemas.android.com/apk/res/android" > <solid android:color="#000000" /> <stroke android:width="2dp" android:color="#ffffff" /> <corners android:bottomLeftRadius="20dp" android:bottomRightRadius="20dp" android:topLeftRadius="20dp" android:topRightRadius="20dp" /></shape>
Now, add this curve_shap.XML
in your main view Layout. In my case I have used LinearLayout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="80dp" android:background="@drawable/curve_shap" android:orientation="vertical" >...</LinearLayout>
How to call this ?
CustomDialogClass cdd = new CustomDialogClass(MainActivity.this);cdd.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));cdd.show();
I hope that works for you.
This is an example dialog, create with xml.
the next code xml is just an example, the design or view is implemented here:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="#ffffffff"><ImageView android:layout_width="match_parent" android:layout_height="120dp" android:id="@+id/a" android:gravity="center" android:background="#DA5F6A" android:src="@drawable/dialog_cross" android:scaleType="fitCenter" /><TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TEXTO" android:id="@+id/text_dialog" android:layout_below="@+id/a" android:layout_marginTop="20dp" android:layout_marginLeft="4dp" android:layout_marginRight="4dp" android:layout_marginBottom="20dp" android:textSize="18sp" android:textColor="#ff000000" android:layout_centerHorizontal="true" android:gravity="center_horizontal" /><Button android:layout_width="wrap_content" android:layout_height="30dp" android:text="OK" android:id="@+id/btn_dialog" android:gravity="center_vertical|center_horizontal" android:layout_below="@+id/text_dialog" android:layout_marginBottom="20dp" android:background="@drawable/btn_flat_red_selector" android:layout_centerHorizontal="true" android:textColor="#ffffffff" /></RelativeLayout>
this lines of code are resources of drawable:
android:src="@drawable/dialog_cross"android:background="@drawable/btn_flat_red_selector"
you could do a class extends Dialog, also something like this:
public class ViewDialog { public void showDialog(Activity activity, String msg){ final Dialog dialog = new Dialog(activity); dialog.requestWindowFeature(Window.FEATURE_NO_TITLE); dialog.setCancelable(false); dialog.setContentView(R.layout.dialog); TextView text = (TextView) dialog.findViewById(R.id.text_dialog); text.setText(msg); Button dialogButton = (Button) dialog.findViewById(R.id.btn_dialog); dialogButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { dialog.dismiss(); } }); dialog.show(); }}
finally the form of call, on your Activity for example:
ViewDialog alert = new ViewDialog();alert.showDialog(getActivity(), "Error de conexión al servidor");
I hope its work for you.
UPDATE
Drawable XML For dialog :
<shape xmlns:android="schemas.android.com/apk/res/android"> <stroke android:width="2dp" android:color="#FFFFFF" /> <gradient android:angle="180" android:endColor="@color/NaranjaOTTAA" android:startColor="@color/FondoActionBar" /> <corners android:bottomLeftRadius="7dp" android:bottomRightRadius="7dp" android:topLeftRadius="7dp" android:topRightRadius="7dp" /> </shape>
This xml was provided by @GastónSaillén.
Another easy way to do this.
step 1) create a layout with proper id's.
step 2) use the following code wherever you desire.
LayoutInflater factory = LayoutInflater.from(this);final View deleteDialogView = factory.inflate(R.layout.mylayout, null);final AlertDialog deleteDialog = new AlertDialog.Builder(this).create();deleteDialog.setView(deleteDialogView);deleteDialogView.findViewById(R.id.yes).setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { //your business logic deleteDialog.dismiss(); }});deleteDialogView.findViewById(R.id.no).setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { deleteDialog.dismiss(); }});deleteDialog.show();