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.
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:
In your CustomDialogActivity write the code as below:ProjectName:CustomDialogPackageName: com.demo.customdialogActivityName: CustomDialogActivity
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>
<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 & 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