TUT ANDROID 030: 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

Screenshot_2014-07-20-11-34-38

Screenshot_2014-07-20-11-34-46

Screenshot_2014-07-20-11-35-04

Các bạn có thể dowload full src code theo link dưới đây

DialogUtilBase

Comments
  1. 5 years ago
  2. 5 years ago
    • 5 years ago
      • 5 years ago
  3. 5 years ago
  4. 4 years ago

Leave a Reply

Your email address will not be published. Required fields are marked *