Android custom dialog

Trong bài này mình sẽ hướng dẫn các bạn cách tạo custom dialog trong android bằng việc sử dụng xml layout file.

Để các bạn hiểu rõ vấn đề này mình sẽ làm một ứng dụng đơn giản với các button và show các dialog tương ứng khi click vào các button đó.

Để làm đc ví dụ này các bạn thực hiên lần lượt theo các bước sau.

Bước 1: tạo foder res-> drawable

sau đó tạo lần lượt các file bg_conner_bottom_blue.xml, bg_conner_bottom.xml, bg_conner.xml, bg_lnlayout.xml

đây là các file custom backgroud và custom color khi click vào view trong android

bg_conner_bottom_blue.xml

<?xml version="1.0" encoding="utf-8"?>



<shape xmlns:android="http://schemas.android.com/apk/res/android"

 android:shape="rectangle" >



<!-- <corners -->

 <!-- android:bottomLeftRadius="2dp" -->

 <!-- android:bottomRightRadius="2dp" /> -->

 <gradient

 android:angle="90"

 android:centerColor="@color/blueLight"

 android:endColor="@color/blueLight"

 android:startColor="@color/blueLight" />



</shape>

bg_conner_bottom.xml

<?xml version="1.0" encoding="utf-8"?>



<shape xmlns:android="http://schemas.android.com/apk/res/android"

 android:shape="rectangle" >



<!-- <corners -->

 <!-- android:bottomLeftRadius="2dp" -->

 <!-- android:bottomRightRadius="2dp" /> -->

 <gradient

 android:angle="90"

 android:centerColor="@color/white"

 android:endColor="@color/white"

 android:startColor="@color/white" />



</shape>

bg_conner.xml

<?xml version="1.0" encoding="utf-8"?>



<shape xmlns:android="http://schemas.android.com/apk/res/android"

 android:shape="rectangle" >



<!-- <corners -->

 <!-- android:bottomLeftRadius="2dp" -->

 <!-- android:bottomRightRadius="2dp" -->

 <!-- android:topLeftRadius="2dp" -->

 <!-- android:topRightRadius="2dp" /> -->

 <gradient

 android:angle="90"

 android:centerColor="@color/white"

 android:endColor="@color/white"

 android:startColor="@color/white" />



</shape>

bg_lnlayout.xml

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">



<item android:drawable="@drawable/bg_conner_bottom_blue" android:state_pressed="true"/>

 <item android:drawable="@drawable/bg_conner_bottom"/>



</selector>

Bước 2: mở file res->values->strings.xml

<resources>



<string name="app_name">DialogUtilBase</string>

 <string name="CLOSE">CLOSE</string>

 <string name="SUBMIT">SUBMIT</string>

 <string name="ShowDialogOneButton">Show Dialog One Button</string>

 <string name="ShowDialogTwoButton">Show Dialog Two Button</string>

 <string name="ShowDialogHaveEditText">Show Dialog Have EditText</string>

 <string name="NUllString"></string>



</resources>

Bước 3 tạo file res->values->color.xml

<?xml version="1.0" encoding="utf-8"?>



<resources>

 <color name="actionbar_text">#DDFF00</color>

 <color name="Lightblue">#00B2EE</color>

 <color name="blueDialog">#33B5E5</color>

 <color name="blue">#426EB4</color>

 <color name="blueLight">#2FA3DF</color>

 <color name="gray">#F0F0F0</color>

 <color name="Darkgray">#898989</color>

 <color name="Lightgray">#E8E8E8</color>



 <color name="white">#FFFFFF</color>

 <color name="black">#000000</color>

 <color name="black1">#2c2c2c</color>

 <color name="red">#CD0000</color>

 <color name="greenLight">#5BBD2B</color>



 <color name="SSTPR">#EF000000</color>



 <color name="orange">#EB9F1D</color>

 <color name="DarkRed">#A41D24</color>



</resources>

Bước 4 tạo các file layout ứng với các giao diện dialog  và giao diện activity demo

layout_main.xml

<?xml version="1.0" encoding="utf-8"?>



<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

 android:layout_width="match_parent"

 android:layout_height="match_parent"

 android:orientation="vertical" >



<Button

 android:layout_width="fill_parent"

 android:layout_height="wrap_content"

 android:onClick="ShowDialogOneButton"

 android:text="@string/ShowDialogOneButton" />

 <Button

 android:layout_width="fill_parent"

 android:layout_height="wrap_content"

 android:onClick="ShowDialogTwoButton"

 android:text="@string/ShowDialogTwoButton" />

 <Button

 android:layout_width="fill_parent"

 android:layout_height="wrap_content"

 android:onClick="ShowDialogHaveEditText"

 android:text="@string/ShowDialogHaveEditText" />



</LinearLayout>

layout_dialog_one_button.xml

<?xml version="1.0" encoding="utf-8"?>



<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

 android:layout_width="match_parent"

 android:layout_height="match_parent"

 android:background="@drawable/bg_conner"

 android:orientation="vertical"

 android:paddingTop="10dp" >



<TextView

 android:id="@+id/tvTitle"

 android:layout_width="fill_parent"

 android:layout_height="wrap_content"

 android:gravity="center"

 android:text="@string/NUllString"

 android:textColor="@color/blueDialog"

 android:textSize="20sp"

 android:textStyle="bold" />



<View

 android:layout_width="fill_parent"

 android:layout_height="2dp"

 android:layout_marginTop="10dp"

 android:background="@color/blueDialog" />



<TextView

 android:id="@+id/tvMessage"

 android:layout_width="fill_parent"

 android:layout_height="wrap_content"

 android:layout_marginBottom="10dp"

 android:layout_marginLeft="15sp"

 android:layout_marginRight="15dp"

 android:layout_marginTop="15dp"

 android:text="@string/NUllString"

 android:textSize="16sp" />



<View

 android:layout_width="fill_parent"

 android:layout_height="1dp"

 android:background="@color/Lightgray" />



<TextView

 android:id="@+id/tvButonClose"

 android:layout_width="fill_parent"

 android:layout_height="50dp"

 android:background="@drawable/bg_lnlayout"

 android:clickable="true"

 android:gravity="center"

 android:text="@string/CLOSE"

 android:textColor="@color/Darkgray"

 android:textSize="17sp" />



</LinearLayout>

layout_dialog_two_button.xml

<?xml version="1.0" encoding="utf-8"?>



<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

 android:layout_width="match_parent"

 android:layout_height="match_parent"

 android:background="@drawable/bg_conner"

 android:orientation="vertical"

 android:paddingTop="10dp" >



<TextView

 android:id="@+id/tvTitle"

 android:layout_width="fill_parent"

 android:layout_height="wrap_content"

 android:gravity="center"

 android:text="@string/NUllString"

 android:textColor="@color/blueDialog"

 android:textSize="20sp"

 android:textStyle="bold" />



<View

 android:layout_width="fill_parent"

 android:layout_height="2dp"

 android:layout_marginTop="10dp"

 android:background="@color/blueDialog" />



<TextView

 android:id="@+id/tvMessage"

 android:layout_width="fill_parent"

 android:layout_height="wrap_content"

 android:layout_marginBottom="10dp"

 android:layout_marginLeft="15sp"

 android:layout_marginRight="15dp"

 android:layout_marginTop="15dp"

 android:text="@string/NUllString"

 android:textSize="16sp" />



<View

 android:layout_width="fill_parent"

 android:layout_height="1dp"

 android:background="@color/Lightgray" />



<LinearLayout

 android:layout_width="fill_parent"

 android:layout_height="50dp"

 android:orientation="horizontal" >



<TextView

 android:id="@+id/tvButonClose"

 android:layout_width="0dp"

 android:layout_height="50dp"

 android:layout_weight="1"

 android:background="@drawable/bg_lnlayout"

 android:clickable="true"

 android:gravity="center"

 android:text="@string/CLOSE"

 android:textColor="@color/Darkgray"

 android:textSize="17sp" />



<View

 android:layout_width="1dp"

 android:layout_height="50dp"

 android:background="@color/Lightgray" />



<TextView

 android:id="@+id/tvButonSubmit"

 android:layout_width="0dp"

 android:layout_height="50dp"

 android:layout_weight="1"

 android:background="@drawable/bg_lnlayout"

 android:clickable="true"

 android:gravity="center"

 android:text="@string/SUBMIT"

 android:textColor="@color/Darkgray"

 android:textSize="17sp" />

 </LinearLayout>



</LinearLayout>

layout_dialog_include_edittext.xml

<?xml version="1.0" encoding="utf-8"?>



<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

 android:layout_width="match_parent"

 android:layout_height="match_parent"

 android:background="@drawable/bg_conner"

 android:orientation="vertical"

 android:paddingTop="10dp" >



<TextView

 android:id="@+id/tvTitle"

 android:layout_width="fill_parent"

 android:layout_height="wrap_content"

 android:gravity="center"

 android:text="@string/NUllString"

 android:textColor="@color/blueDialog"

 android:textSize="20sp"

 android:textStyle="bold" />



<View

 android:layout_width="fill_parent"

 android:layout_height="2dp"

 android:layout_marginTop="10dp"

 android:background="@color/blueDialog" />



<TextView

 android:id="@+id/tvMessage"

 android:layout_width="fill_parent"

 android:layout_height="wrap_content"

 android:layout_marginBottom="10dp"

 android:layout_marginLeft="15sp"

 android:layout_marginRight="15dp"

 android:layout_marginTop="15dp"

 android:text="@string/NUllString"

 android:textSize="16sp" />



<EditText

 android:id="@+id/etEditData"

 android:hint="@string/NUllString"

 android:layout_width="fill_parent"

 android:layout_height="wrap_content"

 android:layout_marginBottom="10dp"

 android:layout_marginLeft="15sp"

 android:layout_marginRight="15dp"

 android:layout_marginTop="5dp" />



<View

 android:layout_width="fill_parent"

 android:layout_height="1dp"

 android:background="@color/Lightgray" />



<LinearLayout

 android:layout_width="fill_parent"

 android:layout_height="50dp"

 android:orientation="horizontal" >



<TextView

 android:id="@+id/tvButonClose"

 android:layout_width="0dp"

 android:layout_height="50dp"

 android:layout_weight="1"

 android:background="@drawable/bg_lnlayout"

 android:clickable="true"

 android:gravity="center"

 android:text="@string/CLOSE"

 android:textColor="@color/Darkgray"

 android:textSize="17sp" />



<View

 android:layout_width="1dp"

 android:layout_height="50dp"

 android:background="@color/Lightgray" />



<TextView

 android:id="@+id/tvButonSubmit"

 android:layout_width="0dp"

 android:layout_height="50dp"

 android:layout_weight="1"

 android:background="@drawable/bg_lnlayout"

 android:clickable="true"

 android:gravity="center"

 android:text="@string/SUBMIT"

 android:textColor="@color/Darkgray"

 android:textSize="17sp" />

 </LinearLayout>



</LinearLayout>

Bước 5: tạo các file java tương ứng

BaseDialog.java

package com.basetut.dialogutilbase;



import android.app.Dialog;

import android.content.Context;

import android.graphics.Rect;

import android.graphics.drawable.ColorDrawable;

import android.view.Window;

import android.widget.LinearLayout.LayoutParams;



public class BaseDialog extends Dialog {



public BaseDialog(Context context) {

 super(context);

 // config base dialog

 // config window

 getWindow().setBackgroundDrawable(

 new ColorDrawable(android.graphics.Color.TRANSPARENT));

 requestWindowFeature(Window.FEATURE_NO_TITLE);

 Rect displayRectangle = new Rect();

 getWindow().getDecorView().getWindowVisibleDisplayFrame(

 displayRectangle);

 int mwith = (int) (displayRectangle.width() * 0.9);

 getWindow().setLayout(mwith, LayoutParams.WRAP_CONTENT);

 }

}

DialogOneButton .java

package com.basetut.dialogutilbase;



import android.content.Context;

import android.view.View;

import android.widget.TextView;



public class DialogOneButton extends BaseDialog {



public DialogOneButton(Context context, String title, String message) {

 super(context);



// init view

 setContentView(R.layout.layout_dialog_one_button);

 TextView tvTitle, tvMessage, tvButonClose;

 tvTitle = (TextView) findViewById(R.id.tvTitle);

 tvMessage = (TextView) findViewById(R.id.tvMessage);

 tvButonClose = (TextView) findViewById(R.id.tvButonClose);

 tvButonClose.setOnClickListener(new View.OnClickListener() {

 @Override

 public void onClick(View v) {

 DialogOneButton.this.dismiss();

 }

 });



// config view

 tvTitle.setText(title);

 tvMessage.setText(message);

 }

}

DialogTwoButton.java

package com.basetut.dialogutilbase;



import android.content.Context;

import android.view.View;

import android.widget.TextView;



public class DialogTwoButton extends BaseDialog {



public DialogTwoButton(Context context, String title, String message,

 View.OnClickListener callBackCLickSubmit) {

 super(context);



// init view

 setContentView(R.layout.layout_dialog_two_button);

 TextView tvTitle, tvMessage, tvButonClose, tvButonSubmit;

 tvTitle = (TextView) findViewById(R.id.tvTitle);

 tvMessage = (TextView) findViewById(R.id.tvMessage);

 tvButonClose = (TextView) findViewById(R.id.tvButonClose);

 tvButonSubmit = (TextView) findViewById(R.id.tvButonSubmit);



// handle onclick

 tvButonClose.setOnClickListener(new View.OnClickListener() {

 @Override

 public void onClick(View v) {

 DialogTwoButton.this.dismiss();

 }

 });

 tvButonSubmit.setOnClickListener(callBackCLickSubmit);



 // config view

 tvTitle.setText(title);

 tvMessage.setText(message);

 }



}

DialogWithEditText.java

package com.basetut.dialogutilbase;



import android.content.Context;

import android.view.View;

import android.widget.EditText;

import android.widget.TextView;



public class DialogWithEditText extends BaseDialog {

 final static String TAG = "DialogWithEditText";

 protected EditText etEditData;



public DialogWithEditText(Context context, String title, String message,

 View.OnClickListener callBackClickSubmit) {

 super(context);

 // init view

 setContentView(R.layout.layout_dialog_include_edittext);

 TextView tvTitle, tvMessage, tvButonClose, tvButonSubmit;

 tvTitle = (TextView) findViewById(R.id.tvTitle);

 tvMessage = (TextView) findViewById(R.id.tvMessage);

 tvButonClose = (TextView) findViewById(R.id.tvButonClose);

 tvButonSubmit = (TextView) findViewById(R.id.tvButonSubmit);

 etEditData = (EditText) findViewById(R.id.etEditData);



// handle onclick

 tvButonClose.setOnClickListener(new View.OnClickListener() {

 @Override

 public void onClick(View v) {

 DialogWithEditText.this.dismiss();

 }

 });

 tvButonSubmit.setOnClickListener(callBackClickSubmit);



// config view

 tvTitle.setText(title);

 tvMessage.setText(message);

 }



}

Utils.java

package com.basetut.dialogutilbase;



import android.app.Dialog;

import android.content.Context;



public class Utils {



public static void showDialogOneButton(Context context, String title,

 String message) {

 DialogOneButton dob = new DialogOneButton(context, title, message);

 dob.show();

 }



public static void dismissSafeDialog(Dialog d) {

 if (d != null) {

 d.dismiss();

 }

 }

}

MainActivity.java

package com.basetut.dialogutilbase;



import android.app.Activity;

import android.os.Bundle;

import android.text.InputType;

import android.util.Log;

import android.view.Gravity;

import android.view.View;

import android.view.View.OnClickListener;



public class MainActivity extends Activity {

 private DialogOneButton dob;

 private DialogTwoButton dtb;

 private DialogWithEditText dwet;



@Override

 protected void onCreate(Bundle savedInstanceState) {

 super.onCreate(savedInstanceState);

 setContentView(R.layout.layout_main);

 }



public void ShowDialogOneButton(View v) {

 Utils.showDialogOneButton(MainActivity.this, "ABC", "12323");

 }



public void ShowDialogTwoButton(View v) {

 dtb = new DialogTwoButton(MainActivity.this, "ewrwer", "4234",

 new OnClickListener() {

 @Override

 public void onClick(View v) {

 Log.d("debug", "clik SM");

 dtb.dismiss();

 }

 });

 dtb.show();

 }



public void ShowDialogHaveEditText(View v) {

 dwet = new DialogWithEditText(MainActivity.this, "EDIT DATA",

 "Please insert data edit!", new OnClickListener() {

 @Override

 public void onClick(View v) {

 Log.d("debug", "data edit: "

 + dwet.etEditData.getText().toString());

 dwet.dismiss();

 }

 });

 dwet.etEditData.setLines(4);

 dwet.etEditData.setInputType(InputType.TYPE_CLASS_TEXT

 | InputType.TYPE_TEXT_FLAG_MULTI_LINE);

 dwet.etEditData.setGravity(Gravity.TOP | Gravity.LEFT);

 dwet.show();

 }



@Override

 protected void onDestroy() {

 Utils.dismissSafeDialog(dob);

 Utils.dismissSafeDialog(dtb);

 Utils.dismissSafeDialog(dwet);

 super.onDestroy();

 }



}

kết quả thực hiện chương trình