Saturday, November 10, 2012

Custom Alert Dialog in Android

In this tutorial we learn that how to create custom alert dialog in android with our own layout file.
Steps to create custom alert dialog in android.
1)Create new android Project.

2)Change your activity_main.xml with below code.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" 
    android:orientation="vertical">

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Show Alert Dailog" />

</LinearLayout>
3)Create new layout for your dailog in res/layout folder in your project here I create customdailog.xml see below.

<?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="fill_parent"  
   android:background="#abcd12"  
   android:orientation="vertical" >  
    <TextView  
     android:layout_width="fill_parent"  
     android:layout_height="wrap_content"  
     android:layout_margin="10dp"  
     android:text="Hello this is Custom Dailog"  
     android:textColor="#000" >  
   </TextView>  
   
    <LinearLayout 
        android:layout_width="fill_parent"  
   android:layout_height="fill_parent"  
   android:weightSum="2"
   android:orientation="horizontal">  
   <Button  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:layout_gravity="center_horizontal"  
     android:layout_weight="1"
     android:clickable="true" android:id="@+id/yes_btn"  
     android:text="YES" />  
     
   <Button  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:layout_gravity="center_horizontal" 
      android:layout_weight="1" 
     android:clickable="true" android:id="@+id/no_btn"  
     android:text="NO" />  
     
   </LinearLayout> 
  </LinearLayout> 

 4)Change your MainActivity with below code.

public class MainActivity extends Activity {
  
 final Context context = this;
 private Button button;
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  button = (Button) findViewById(R.id.button1);
  // add button listener
  button.setOnClickListener(new OnClickListener() {
  @Override
  public void onClick(View arg0) {
   CustomDialog custom = new CustomDialog(context);  
    custom.show();  
   }
  });
 }
}

5)Create new CustomDailog.java and paste below code in that file.

public class CustomDialog extends Dialog implements android.view.View.OnClickListener {
 
 Context context;
 
 public CustomDialog(Context context) {
  super(context);
  this.context = context;
 }

 Button btn_yes, btn_no;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.customdailog);
  setTitle("This is my Custom Dialog");
  btn_yes = (Button) findViewById(R.id.yes_btn);
  btn_no = (Button) findViewById(R.id.no_btn);
  btn_yes.setOnClickListener(this);
  btn_no.setOnClickListener(this);
 }

 @Override
 public void onClick(View v) {
  switch (v.getId()) {
  case R.id.yes_btn:
   //Do your positive button code here
   //Here I create toast message for button
   Toast.makeText(context, "Yes button click", Toast.LENGTH_SHORT).show();
   break;

  case R.id.no_btn:
   
   //Do your Negative button code here
   //Here I create toast message for button and dismiss the dailog
   Toast.makeText(context, "No button click", Toast.LENGTH_SHORT).show();
   dismiss();
   break;

  default:
   break;
  }
 }
}

No comments:

Post a Comment