Thursday 3 April 2014

Android Custom Dialog Example

How to create custom dialog in Android

Hello, Friends.

Today i am going to show you that how you can customize Dialog in Android using custom layout file.

      Dialog box is mainly a popup or we can say a prompt that opens in front of the current activity to perform some operation or functionality.
          You can use a dialog box to ask the user to confirm an action, notify the user of an event, or prompt the user for additional information. Because dialog boxes disrupt the flow of the UI, you should use them only as a last resort. In most cases, you should integrate confirmation, feedback, and prompts directly into your app.

Sometimes in our applications we want to alert the user for an event and/or ask user about taking a decision. For this purpose AlertDialog class can be used, where a message and one, two or three buttons are displayed in a popup window.

       When a dialog box opens the current activity by which we open the dialog box goes to the background and the dialog box comes in the foreground. After performing the operation on the dialog box we dismiss the dialog box and the background activity comes back to the foreground. 


To create custom dialog first of all create simple Android application in eclipse.

Create a project with the following details:
  • ProjectNameCustomDialog 
  • PackageName: com.demo.customdialog
  • ActivityNameCustomDialogActivity

In your CustomDialogActivity write the code as below:

 import android.app.Activity;  
 import android.app.Dialog;  
 import android.os.Bundle;  
 import android.view.LayoutInflater;  
 import android.view.View;  
 import android.view.View.OnClickListener;  
 import android.view.Window;  
 import android.widget.Button;  
 import android.widget.LinearLayout;  
 import android.widget.ScrollView;  
 import android.widget.Toast;  
 import com.wli.framework.model.ClearActivityObjectListner;  
 import com.wli.framework.view.ActivityHelper;  
 public class CustomDialogActivity extends Activity implements OnClickListener  
 {  
  private static final int SIMPLE_DIALOG = 0;  
  private static final int BORDER_DIALOG = 1;  
  private static final int ROUNDE_CORNER_DIALOG = 2;  
  private static final int ROUNDE_CORNER_BORDER_DIALOG = 3;  
  private Dialog m_dialog; //Dialog instance.  
  private Button m_btnSimpleDialog, m_btnBorderDialog, m_btnRoundeCornerDialog, m_btnRoundeCornerBorderDialog;  
  private ScrollView m_svMain;  
  private LinearLayout m_llMain;  
  @Override  
  protected void onCreate(Bundle p_savedInstanceState)  
  {  
  super.onCreate(p_savedInstanceState);  
  setContentView(R.layout.maindialog_layout);  
  m_btnSimpleDialog = (Button) findViewById(R.id.dlbtnSimpleDialog);  
  m_btnBorderDialog = (Button) findViewById(R.id.dlbtnBorderDialog);  
  m_btnRoundeCornerDialog = (Button) findViewById(R.id.dlbtnRoundeCornerDialog);  
  m_btnRoundeCornerBorderDialog = (Button) findViewById(R.id.dlbtnRoundeCornerBorderDialog);  
  m_svMain = (ScrollView) findViewById(R.id.dlsvMain);  
  m_btnSimpleDialog.setOnClickListener(this);  
  m_btnBorderDialog.setOnClickListener(this);  
  m_btnRoundeCornerDialog.setOnClickListener(this);  
  m_btnRoundeCornerBorderDialog.setOnClickListener(this);  
  }  
  /**  
  * This is method to show customize dialog.  
  *   
  * @param p_index  
  *      - index of customize dialog  
  */  
  public void showCustomDialog(int p_index)  
  {  
  m_dialog = new Dialog(CustomDialogActivity.this, R.style.Dialog_No_Border);  
  m_dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);  
  LayoutInflater m_inflater = LayoutInflater.from(CustomDialogActivity.this);  
  View m_view = m_inflater.inflate(R.layout.custom_dialog, null);  
  m_llMain = (LinearLayout) m_view.findViewById(R.id.cadllMain);  
  //Change the background of the dialog according to the layout.   
  if (p_index == BORDER_DIALOG)  
  {  
   m_llMain.setBackgroundResource(R.drawable.btn_style_border);  
  }  
  else if (p_index == ROUNDE_CORNER_DIALOG)  
  {  
   m_llMain.setBackgroundResource(R.drawable.btn_style_roundcorner);  
  }  
  else if (p_index == ROUNDE_CORNER_BORDER_DIALOG)  
  {  
   m_llMain.setBackgroundResource(R.drawable.btn_style_border_roundcorner);  
  }  
  Button m_btnOk = (Button) m_view.findViewById(R.id.cadbtnOk);  
  Button m_btnCancel = (Button) m_view.findViewById(R.id.cadbtnCancel);  
  OnClickListener m_clickListener = new OnClickListener(){  
   @Override  
   public void onClick(View p_v)  
   {  
   Toast.makeText(CustomDialogActivity.this, "Pressed " + ((Button) p_v).getText(), Toast.LENGTH_SHORT).show();  
   switch (p_v.getId())  
    {  
    case R.id.cadbtnOk:  
     m_dialog.dismiss();  
    break;  
    case R.id.cadbtnCancel:  
     m_dialog.dismiss();  
     break;  
    default:  
     break;  
    }  
   }  
  };  
  m_btnOk.setOnClickListener(m_clickListener);  
  m_btnCancel.setOnClickListener(m_clickListener);  
  m_dialog.setContentView(m_view);  
  m_dialog.show();  
  }  
  /**  
  * Common click listener for the buttons.  
  */  
  @Override  
  public void onClick(View p_v)  
  {  
  switch (p_v.getId())  
   {  
   case R.id.dlbtnSimpleDialog:  
    showCustomDialog(SIMPLE_DIALOG);  
    break;  
   case R.id.dlbtnBorderDialog:  
    showCustomDialog(BORDER_DIALOG);  
    break;  
   case R.id.dlbtnRoundeCornerDialog:  
    showCustomDialog(ROUNDE_CORNER_DIALOG);  
    break;  
   case R.id.dlbtnRoundeCornerBorderDialog:  
    showCustomDialog(ROUNDE_CORNER_BORDER_DIALOG);  
    break;  
   default:  
    break;  
   }  
  }  
  public void clearView()  
  {  
  m_dialog = null;  
  m_btnSimpleDialog = null;  
  m_btnBorderDialog = null;  
  m_btnRoundeCornerDialog = null;  
  m_btnRoundeCornerBorderDialog = null;  
  m_svMain = null;  
  m_llMain = null;  
  }  
  @Override  
  protected void onDestroy()  
  {  
  super.onDestroy();  
  clearView();  
  }  
 }  

Here is the layout code. Create the layouts for the activity and dialog as below:

maindialog_layout.xml
 <?xml version="1.0" encoding="utf-8"?>  
 <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"  
   android:id="@+id/dlsvMain"  
   android:layout_width="fill_parent"  
   android:layout_height="fill_parent" >  
   <LinearLayout  
     android:layout_width="fill_parent"  
     android:layout_height="fill_parent"  
     android:gravity="center_horizontal"  
     android:orientation="vertical"  
     android:paddingTop="80dp" >  
     <TextView  
       android:layout_width="wrap_content"  
       android:layout_height="wrap_content"  
       android:text="@string/title_customdialog"  
       android:textSize="25sp"  
       android:textStyle="bold" />  
     <Button  
       android:id="@+id/dlbtnSimpleDialog"  
       style="@style/commonButtonStyle"  
       android:text="@string/dl_simple_dialog" />  
     <Button  
       android:id="@+id/dlbtnBorderDialog"  
       style="@style/commonButtonStyle"  
       android:text="@string/dl_border_dialog" />  
     <Button  
       android:id="@+id/dlbtnRoundeCornerDialog"  
       style="@style/commonButtonStyle"  
       android:text="@string/dl_roundcorner_dialog" />  
     <Button  
       android:id="@+id/dlbtnRoundeCornerBorderDialog"  
       style="@style/commonButtonStyle"  
       android:text="@string/dl_roundcorner_border_dialog" />  
   </LinearLayout>  
 </ScrollView>  

custom_dialog.xml
 <?xml version="1.0" encoding="utf-8"?>  
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   xmlns:tools="http://schemas.android.com/tools"  
   android:id="@+id/cadllMain"  
   android:layout_width="wrap_content"  
   android:layout_height="wrap_content"  
   android:background="@color/grey"  
   android:orientation="vertical"  
   tools:ignore="ButtonOrder" >  
   <FrameLayout  
     android:layout_width="fill_parent"  
     android:layout_height="wrap_content" >  
     <TextView  
       android:layout_width="wrap_content"  
       android:layout_height="wrap_content"  
       android:padding="10dp"  
       android:text="@string/title_text" />  
     <ImageView  
       android:id="@+id/imageView_close"  
       android:layout_width="wrap_content"  
       android:layout_height="wrap_content"  
       android:layout_gravity="top|right"  
       android:clickable="true"  
       android:src="@drawable/cancel"  
       android:visibility="gone"  
       tools:ignore="ContentDescription" />  
   </FrameLayout>  
   <View  
     android:layout_width="fill_parent"  
     android:layout_height="1dp"  
     android:layout_marginLeft="3dp"  
     android:layout_marginRight="3dp"  
     android:background="@android:color/white" />  
   <TextView  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:lines="3"  
     android:padding="10dp"  
     android:text="@string/message" />  
   <LinearLayout  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:gravity="center_horizontal"  
     android:orientation="horizontal" >  
     <Button  
       android:id="@+id/cadbtnOk"  
       android:layout_width="100dp"  
       android:layout_height="40dp"  
       android:layout_margin="10dp"  
       android:background="@android:color/darker_gray"  
       android:text="@android:string/ok" />  
     <Button  
       android:id="@+id/cadbtnCancel"  
       android:layout_width="100dp"  
       android:layout_height="40dp"  
       android:layout_margin="10dp"  
       android:background="@android:color/darker_gray"  
       android:text="@android:string/cancel" />  
   </LinearLayout>  
 </LinearLayout>  

Copy the below code into your res/style file

style.xml

 <style name="Dialog_No_Border">  
     <item name="android:windowIsFloating">true</item>  
     <item name="android:windowBackground">@color/transparent_color</item>  
   </style>  
   <style name="commonButtonStyle">  
     <item name="android:layout_width">wrap_content</item>  
     <item name="android:layout_height">wrap_content</item>  
     <item name="android:layout_gravity">center_horizontal</item>  
     <item name="android:layout_margin">10dp</item>  
   </style>  

color.xml
 <color name="transparent_color">#00000000</color>  
 <color name="light_green">#00AA00</color>  
 <color name="grey">#DCDCDC</color>  

strings.xml
  <string name="title_activity_custom_dialog">CustomDialogActivity</string>  
   <string name="title_customdialog">Various Custom Dialogs</string>  
   <string name="dl_simple_dialog">Simple Custom Dialog</string>  
   <string name="dl_border_dialog">Custom Dialog with Border</string>  
   <string name="dl_roundcorner_dialog">Custom Dialog with Round Corner</string>  
   <string name="dl_roundcorner_border_dialog">Custom Dialog with Round Corner &amp; Border</string>  
   <string name="title_text">Add Title Text</string>  
   <string name="message">Alert Message...</string>  

Here is the AndroidManifest.xml file

 <manifest xmlns:android="http://schemas.android.com/apk/res/android"  
   package="com.demo.customdialog"  
   android:versionCode="1"  
   android:versionName="1.0" >  
   <uses-sdk  
     android:minSdkVersion="8"  
     android:targetSdkVersion="15" />  
   <application  
     android:icon="@drawable/ic_launcher"  
     android:label="@string/app_name"  
     android:theme="@android:style/Theme.Light.NoTitleBar.Fullscreen" >  
     <activity  
       android:name="com.demo.customdialog.CustomDialogActivity"  
       android:label="@string/title_activity_custom_dialog" >  
       <intent-filter>  
         <action android:name="android.intent.action.MAIN" />  
         <category android:name="android.intent.category.LAUNCHER" />  
       </intent-filter>  
     </activity>  
   </application>  
 </manifest>  

Output:




You can Download sourcode HERE

No comments:

Post a Comment