Devahoy Logo
PublishedAt

Android

ตัวอย่างการสร้าง Dialog บน Android

ตัวอย่างการสร้าง Dialog บน Android

Dialog มันก็คือ Popup ที่เอาไว้แสดง Alert เตือนผู้ใช้ หรือว่า ให้กรอกข้อมูลอะไรก็ว่าไป เป็น Window ขนาดเล็กๆ จริงๆ ไม่ต้องอธิบายอะไรมาก คิดว่าทุกคนคงรู้จัก Dialog อยู่แล้ว ตัวอย่างก็ประมาณนี้

ตัวอย่าง Dialog

ภาพ จาก Android Developer

เห็นว่าบางที การสร้าง Dialog ต่างๆ ทั้งแบบธรรมดา แบบ AlertDialog แบบ CustomDialog บางทีผมก็มีการลืมๆเหมือนกัน บางทีก็ขี้เกียจเขียน ก็อปของเก่ามาเลยง่ายดี วันนี้ก็เลยนำมาเขียนเป็นบทความไปซะเลย

ตัวอย่าง Dialog

Dialog ธรรมดา

เริ่มต้นด้วย Dialog แบบธรรมดาก่อนครับ เป็น Dialog ที่แสดง Title แล้วก็มีปุ่ม 2 ปุ่มให้เราตัดสินใจ ว่าจะทำอะไร เช่น Dialog ที่บอกเราว่า ต้องการออกจากแอพนี้จริงๆงั้นหรอ? ก็จะมีตัวเลือก ให้กด ว่า ออก กับ อยู่ต่อ โดยส่วนประกอบหลักๆของ Dialog จะเป็นดังนี้

ส่วนประกอบ Dialog

  • 1 Title สำหรับแสดงข้อความ Title
  • 2 Content ส่วนนี้จะไว้แสดงข้อความต่างๆ รวมถึง Custom Layout
  • 3 Button ส่วนนี้จะแสดง Button ของ Dialog

โดยทั่วไป ส่วนประกอบหลักๆของ Dialog ที่กล่าวมา จะใช้พวกนี้แหละ ในการสร้าง Dialog ต่างๆ

เริ่มแรกเลย การสร้างโปรเจ็คใน Android จะไม่ขอพูดถึงละกัน ข้ามมาดูที่โค๊ดเลย โค๊ดผมจะใช้ สองส่วนคือ activity_main.xml และ MainActivity.java สำหรับหน้าจอ Layout ผมออกแบบดังนี้ เป็นแค่เบสิค ไม่มีอะไรมาก มีแค่ข้อความ แล้วก็ปุ่ม Button เมื่อกดปุ่มนี้ก็จะโชว์ Dialog

Demo Dialog

activity_main.xml

1
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
2
xmlns:tools="http://schemas.android.com/tools"
3
android:layout_width="match_parent"
4
android:layout_height="match_parent"
5
android:paddingLeft="@dimen/activity_horizontal_margin"
6
android:paddingRight="@dimen/activity_horizontal_margin"
7
android:paddingTop="@dimen/activity_vertical_margin"
8
android:paddingBottom="@dimen/activity_vertical_margin">
9
10
<TextView
11
android:text="ตัวอย่างการใช้ Dialog แบบง่าย"
12
android:layout_width="wrap_content"
13
android:layout_height="wrap_content"
14
android:id="@+id/text_title"
15
android:textSize="18sp"
16
android:textColor="#D74B4C"
17
android:layout_alignParentTop="true"
18
android:layout_centerHorizontal="true"
19
android:layout_marginTop="40dp"/>
20
21
<Button
22
android:layout_width="match_parent"
23
android:layout_height="wrap_content"
24
android:id="@+id/button_open_dialog"
25
android:text="Open Dialog"
26
android:padding="20dp"
27
android:textSize="20sp"
28
android:textColor="#FFFFFF"
29
android:background="#D74B4C"
30
android:layout_centerVertical="true"
31
android:layout_alignParentRight="true"
32
android:layout_alignParentEnd="true" />
33
34
</RelativeLayout>

ส่วน MainActivity.java เริ่มแรก คลาสจะหน้าตาเป็นแบบนี้ (ส่วนอื่นๆ เมธอดอื่นๆ ผมไม่สนครับ สนแค่ onCreate() )

1
public class MainActivity extends ActionBarActivity {
2
3
private Button mButtonDialog;
4
5
@Override
6
protected void onCreate(Bundle savedInstanceState) {
7
super.onCreate(savedInstanceState);
8
setContentView(R.layout.activity_main);
9
}
10
...
11
}

ภายในเมธอด onCreate() ใช้ Button ที่ประกาศไว้ที่ xml ไฟล์ จากนั้นรับ Event Listener เมื่อคลิ๊ก ก็ให้ไปเปิด Dialog

1
mButtonDialog = (Button) findViewById(R.id.button_open_dialog);
2
3
mButtonDialog.setOnClickListener(new View.OnClickListener() {
4
@Override
5
public void onClick(View v) {
6
7
}
8
});

ทีนี้จะสร้าง Dialog ผมใช้คลาส AlertDialog.Builder ในการสร้าง Dialog โดยมีโครงสร้างดังนี้

1
AlertDialog.Builder builder =
2
new AlertDialog.Builder(MainActivity.this);
3
builder.setMessage("รับขนมจีบซาลาเปาเพิ่มมั้ยครับ?");
4
builder.setPositiveButton("รับ", new DialogInterface.OnClickListener() {
5
public void onClick(DialogInterface dialog, int id) {
6
Toast.makeText(getApplicationContext(),
7
"ขอบคุณครับ", Toast.LENGTH_SHORT).show();
8
}
9
});
10
builder.setNegativeButton("ไม่รับ", new DialogInterface.OnClickListener() {
11
@Override
12
public void onClick(DialogInterface dialog, int which) {
13
//dialog.dismiss();
14
}
15
});
16
builder.show();

จากข้างบน AlertDialog.Builder รับ argument เป็น context #setMessage ไว้สำหรับตั้งชื่อข้อความที่ต้องการแสดง ส่วน setPositiveButton และ setNegativeButton ไว้สำหรับตั้งค่าปุ่ม โดย argument ตัวแรก คือ ข้อความ ส่วน argument ที่สองคือ callback OnClickListener สำหรับ handler ว่าเวลากดแล้วจะทำอะไร โดยโค๊ดผมคือ เมื่อกด “รับ” ก็จะโชว์ข้อความ Toast ส่วน Dialog ก็มีหน้าตาแบบนี้

Simple Dialog

Dialog แบบโชว์ List

Dialog แบบโชว์ List ก็คล้ายๆ กับแบบธรรมดา เพียงแค่มี List ข้อมูลแสดงมาด้วย ตัวอย่าง ผมสร้างข้อมูลเก็บเป็น String[] ไฟล์ layout และ MainActivity ใช้จากตัวอย่างก่อนหน้าครับ

เมื่อผู้ใช้กดปุ่ม Button จากทีแรกโชว์แค่ Dialog ธรรมดา ตอนนี้จะมี List มาแสดงด้วย ผมใช้โค๊ดนี้

1
AlertDialog.Builder builder =
2
new AlertDialog.Builder(MainActivity.this);
3
builder.setTitle("Select Favorite Team");
4
builder.setItems(CLUBS, new DialogInterface.OnClickListener() {
5
@Override
6
public void onClick(DialogInterface dialog, int which) {
7
String selected = CLUBS[which];
8
Toast.makeText(getApplicationContext(), "คุณชอบ " +
9
selected, Toast.LENGTH_SHORT).show();
10
}
11
});
12
builder.setNegativeButton("ไม่ชอบซักทีม", null);
13
builder.create();
14
15
// สุดท้ายอย่าลืม show() ด้วย
16
builder.show();

สิ่งที่เปลี่ยนไปคือ ใช้ setTitle เพื่อแสดง Title ของ Dialog และใช้ setItems(List, Listener) เพื่อแสดง List แทนการแสดงข้อความ โดยรับ argument เป็น List และ Listener สำหรับ handler เมื่อผู้ใช้เลือกไอเท็มใน List ก็จะแสดง Toast ว่าเลือกไอเท็มอะไรไป หน้าตา Dialog ก็จะได้แบบนี้

Simple Dialog

Dialog แบบเลือก choice เดียว

Dialog แบบนี้คล้ายๆกับแบบ List ต่างกันที่มี ปุ่ม RadioButton มาให้ด้วย ว่าเราเลือกไอเท็มไหน ปุ่มก็จะไปปรากฎอยู่ที่ไอเท็มนั้นๆ ตามโค๊ดนี้เลย

1
AlertDialog.Builder builder =
2
new AlertDialog.Builder(MainActivity.this);
3
builder.setTitle("Select Favorite Team");
4
builder.setSingleChoiceItems(CLUBS, 0, new DialogInterface.OnClickListener() {
5
@Override
6
public void onClick(DialogInterface dialog, int which) {
7
mSelected = CLUBS[which];
8
}
9
});
10
builder.setPositiveButton("ยืนยัน", new DialogInterface.OnClickListener() {
11
@Override
12
public void onClick(DialogInterface dialog, int which) {
13
// ส่วนนี้สำหรับเซฟค่าลง database หรือ SharedPreferences.
14
Toast.makeText(getApplicationContext(), "คุณชอบ " +
15
mSelected, Toast.LENGTH_SHORT).show();
16
dialog.dismiss();
17
}
18
});
19
20
builder.setNegativeButton("ไม่ชอบซักทีม", null);
21
builder.create();
22
23
// สุดท้ายอย่าลืม show() ด้วย
24
builder.show();

จากด้านบน จะเห็นว่าผมได้ทำการลบ setItems และเปลี่ยนมาใช้ setSingleChoiceItems() ที่ใช้สำหรับแสดงตัวเลือกแบบ ตัวเลือกเดียวแทน โดย argument ที่มันรับคือ List, ตำแหน่งไอเท็มที่เลือก (ค่าเริ่มต้น) และ Listener ตามลำดับ และใช้ setPositiveButton เพิ่มเข้ามา เพื่อเอาไว้ยืนยัน ว่าเราทำการเลือกไอเท็มนี้แล้ว

โดยโค๊ดไม่มีอะไรซับซ้อนมาก Listener เมื่อมีการเลือกไอเท็ม ก็แค่หา ตำแหน่งไอเท็มนี้ มีค่าว่าอะไร จากนั้นเก็บลงตัวแปร String ชื่อ mSelected ซึ่งผมประกาศไว้เป็น member variable ส่วน Listener ของ ปุ่ม PossitiveButton ก็ให้แสดง Toast และปิด Dialog ด้วยคำสั่ง dialog.dismiss() หน้าตา Dialog ก็จะเป็นแบบนี้

Simple Dialog

Dialog แบบเลือกหลาย choice

Dialog แบบเลือกหลาย choice ชื่อก็ตรงตัวเลยครับ แสดงรายชื่อแบบ List และมี Choice ให้เลือกได้หลายๆตัวเลือก ดังโค๊ดนี้

1
mMultiSelected = new ArrayList<Integer>();
2
3
AlertDialog.Builder builder =
4
new AlertDialog.Builder(MainActivity.this);
5
builder.setTitle("Select Favorite Team");
6
builder.setMultiChoiceItems(CLUBS, null, new DialogInterface.OnMultiChoiceClickListener() {
7
@Override
8
public void onClick(DialogInterface dialog, int which, boolean isChecked) {
9
if (isChecked) {
10
mMultiSelected.add(which);
11
} else if (mMultiSelected.contains(which)) {
12
mMultiSelected.remove(Integer.valueOf(which));
13
}
14
}
15
});
16
17
builder.setPositiveButton("ยืนยัน", new DialogInterface.OnClickListener() {
18
@Override
19
public void onClick(DialogInterface dialog, int which) {
20
// เซฟค่าลง database หรือ SharedPreferences.
21
StringBuffer buffer = new StringBuffer();
22
for (Integer team : mMultiSelected) {
23
buffer.append(" ");
24
buffer.append(CLUBS[team]);
25
}
26
Toast.makeText(getApplicationContext(), "คุณชอบ" +
27
buffer.toString(), Toast.LENGTH_SHORT).show();
28
dialog.dismiss();
29
}
30
});
31
32
builder.setNegativeButton("ไม่ชอบซักทีม", null);
33
builder.create();
34
35
// สุดท้ายอย่าลืม show() ด้วย
36
builder.show();

จากโค๊ดด้านบน ได้เปลี่ยนจาก setSingleChoice เป็น setMultiChoiceItems โดยรับ argument 3 ตัวคือ ข้อมูล List, ค่าเริ่มต้นของไอเท็ม เช็คหรือไม่เช็ค และ Listener เป็น OnMultiChoiceClickListener ตามลำดับ

ส่วน onClick ของ OnMultiChoiceClickListener จะมีเงื่อนไข ว่า ถ้า isCheck แสดงว่า มีการเลือกไอเท็มนี้ ก็จะทำการเพิ่มไปยัง ArrayList ที่สร้างไว้ชื่อ mMultiSelected จากนั้นที่ setPositiveButton เมื่อทำการ onClick ก็ให้แสดง ไอเท็มที่เลือกทั้งหมด หน้าตาก็ประมาณนี้

Simple Dialog

Custom Dialog

มาถึง Dialog อันสุดท้าย คือ Custom Dialog เป็น Dialog ที่เราสามารถจะปรับแต่งได้เอง สามารถสร้าง Layout ได้เอง หลักการของมันคือ ให้ layout xml ที่เราได้ทำขึ้นมา คล้ายๆ เวลาเราเรียก setContentView(layout) ใน Activity ทั่วไป เราอยาก ให้ Dialog มี Layout แบบไหน ก็สร้างมา แล้ว setView ให้กับ Dialog ก็จะได้ Dialog หน้าตานั้นๆ จะให้ Dialog มีรูป มีปุ่ม Button มี TextView, EditText ก็ได้ทั้งนั้น

มาดูวิธีการสร้างกันเลยดีกว่า เริ่มแรก ให้ทำการสร้าง Layout ที่จะใช้ ผมตั้งชือ่ว่า dialog_custom.xml

1
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
2
android:orientation="vertical"
3
android:layout_width="match_parent"
4
android:layout_height="match_parent">
5
<ImageView
6
android:src="@drawable/ic_launcher"
7
android:layout_width="match_parent"
8
android:layout_height="64dp"
9
android:scaleType="center"
10
android:background="#ff3eaff9"
11
android:contentDescription="@string/app_name" />
12
<EditText
13
android:id="@+id/username"
14
android:inputType="textEmailAddress"
15
android:layout_width="match_parent"
16
android:layout_height="wrap_content"
17
android:layout_marginTop="16dp"
18
android:layout_marginLeft="4dp"
19
android:layout_marginRight="4dp"
20
android:layout_marginBottom="4dp"
21
android:hint="Username" />
22
<EditText
23
android:id="@+id/password"
24
android:inputType="textPassword"
25
android:layout_width="match_parent"
26
android:layout_height="wrap_content"
27
android:layout_marginTop="4dp"
28
android:layout_marginLeft="4dp"
29
android:layout_marginRight="4dp"
30
android:layout_marginBottom="16dp"
31
android:hint="Password"/>
32
</LinearLayout>

ส่วนตัว AlertDialog.Builder ก็จะได้หน้าตาแบบนี้

1
AlertDialog.Builder builder =
2
new AlertDialog.Builder(MainActivity.this);
3
LayoutInflater inflater = getLayoutInflater();
4
5
View view = inflater.inflate(R.layout.dialog_custom, null);
6
builder.setView(view);
7
8
final EditText username = (EditText) view.findViewById(R.id.username);
9
final EditText password = (EditText) view.findViewById(R.id.password);
10
11
builder.setPositiveButton("Login", new DialogInterface.OnClickListener() {
12
@Override
13
public void onClick(DialogInterface dialog, int which) {
14
// Check username password
15
if (username.getText().equals("demo@example.com") &&
16
password.getText().equals("demo")) {
17
Toast.makeText(getApplicationContext(), "Login success!",
18
Toast.LENGTH_SHORT).show();
19
} else {
20
Toast.makeText(getApplicationContext(), "Login Failed!",
21
Toast.LENGTH_SHORT).show();
22
}
23
}
24
});
25
builder.setNegativeButton("Cancel", new DialogInterface.OnClickListener() {
26
@Override
27
public void onClick(DialogInterface dialog, int which) {
28
29
}
30
});
31
32
builder.show();

สิ่งที่เปลี่ยนไปจาก Dialog อื่นๆคือ เราจะใช้เมธอด setView(View) สำหรับตั้งค่า Layout ต้องการ โดย View เราก็ทำการลิงค์มาจาก dialog_custom.xml ที่ได้สร้างไว้ ต่อมาก็ทำการเชื่อม EditText , username กับ password ที่สร้างไว้ โดยใช้ view.findViewById(int id) เพื่อที่จะสั่งให้หา id ใน dialog_custom.xml ถ้ามีแค่ findViewById มันจะไปหาใน activity_main.xml ซึ่งจะ null pointer exception แน่นอน

ส่วนที่เหลือก็ไม่มีอะไรมาก ตรง onClick ใครจะเอาไปทำอะไรต่อก็ตามสะดวก เช่นเช็ค username password ถูกต้องไหม ถ้าถูกก็เข้าสู่ระบบ ถ้าไม่ถูกก็พิมใหม่ เป็นต้น แต่ตรงส่วนนี้ ผมจะให้โชว์แค่ ข้อความธรรมดา ว่า ล็อคอินได้หรือไม่ได้ เท่านั้น สุดท้าย ก็ได้หน้าตาแบบนี้

Simple Dialog

Custom Dialog แบบที่ 2

Custom Dialog แบบนี้ การแสดงผล ก็ไม่แตกต่างจากแบบแรก คือนำ Layout ของเราเองมาแสดง แต่ที่แตกต่างกันคือ แบบนี้จะใช้ Dialog แทนที่จะเป็น AlertDialog.Builder โดย Layout ผมได้ทำการเพิ่มปุ่ม Button สำหรับ ล็อคอิน และ ยกเลิก ไปด้วย เนื่องจาก Dialog ธรรมดา จะไม่มี setPositiveButton กับ setNegativeButton มาให้ ฉะนั้นผมสร้างอีกไฟล์ชื่อ dialog_custom2.xml จะได้ดังนี้

1
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
2
android:orientation="vertical"
3
android:layout_width="match_parent"
4
android:layout_height="match_parent">
5
<EditText
6
android:id="@+id/username"
7
android:inputType="textEmailAddress"
8
android:layout_width="match_parent"
9
android:layout_height="wrap_content"
10
android:layout_marginTop="16dp"
11
android:layout_marginLeft="4dp"
12
android:layout_marginRight="4dp"
13
android:layout_marginBottom="4dp"
14
android:hint="Username" />
15
<EditText
16
android:id="@+id/password"
17
android:inputType="textPassword"
18
android:layout_width="match_parent"
19
android:layout_height="wrap_content"
20
android:layout_marginTop="4dp"
21
android:layout_marginLeft="4dp"
22
android:layout_marginRight="4dp"
23
android:layout_marginBottom="16dp"
24
android:hint="Password"/>
25
26
<LinearLayout
27
android:layout_width="match_parent"
28
android:layout_height="wrap_content"
29
android:orientation="horizontal"
30
android:weightSum="1">
31
32
<Button
33
android:id="@+id/button_cancel"
34
android:layout_weight="0.5"
35
android:layout_width="0dp"
36
android:layout_height="wrap_content"
37
android:padding="16dp"
38
android:text="Cancel"/>
39
40
<Button
41
android:id="@+id/button_login"
42
android:layout_weight="0.5"
43
android:layout_width="0dp"
44
android:layout_height="wrap_content"
45
android:padding="16dp"
46
android:text="Login"/>
47
</LinearLayout>
48
</LinearLayout>

ส่วนโค๊ด Dialog ก็จะได้ดังนี้

1
final Dialog dialog = new Dialog(MainActivity.this);
2
dialog.setTitle("Devahoy");
3
dialog.setContentView(R.layout.dialog_custom);
4
5
final EditText username = (EditText) dialog.findViewById(R.id.username);
6
final EditText password = (EditText) dialog.findViewById(R.id.password);
7
Button buttonCancel = (Button) dialog.findViewById(R.id.button_cancel);
8
Button buttonLogin = (Button) dialog.findViewById(R.id.button_login);
9
10
buttonCancel.setOnClickListener(new View.OnClickListener() {
11
@Override
12
public void onClick(View v) {
13
dialog.dismiss();
14
}
15
});
16
17
buttonLogin.setOnClickListener(new View.OnClickListener() {
18
@Override
19
public void onClick(View v) {
20
// Check username password
21
if (username.getText().equals("demo@example.com") &&
22
password.getText().equals("demo")) {
23
Toast.makeText(getApplicationContext(), "Login success!",
24
Toast.LENGTH_SHORT).show();
25
dialog.dismiss();
26
} else {
27
Toast.makeText(getApplicationContext(), "Login Failed!",
28
Toast.LENGTH_SHORT).show();
29
}
30
}
31
});
32
33
34
dialog.show();

จะเห็นว่าการสร้าง Dialog คล้ายๆกันเลย คือ new Dialog(MainActivity.this) รับเป็น context เหมือนกัน แล้วก็ใช้ setTitle สำหรับตั้งชื่อ , setContentView สำหรับตั้งค่า Layout ที่เราสร้างไว้ สุดท้ายก็เชื่อม EditText และ Button ต่างๆ ด้วย dialog.findViewById() จากนั้นก็ใช้ Listener ของ Button ทำการเช็ค username password ก็ได้หน้าตาประมาณนี้

ตัวอย่าง Simple Dialog

Demo

สุดท้าย ผมสร้างเลเอาท์ รวบรวมตัวอย่าง Dialog ทั้งหมด โดยเมื่อคลิกก็จะแสดงตัวอย่าง Dialog นั้นๆ แบบนี้

Dialog ทั้งหมด

ส่วนโค๊ดก็ตามข้างล่าง

activity_main.xml

1
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
2
xmlns:tools="http://schemas.android.com/tools"
3
android:layout_width="match_parent"
4
android:layout_height="match_parent"
5
android:paddingLeft="@dimen/activity_horizontal_margin"
6
android:paddingRight="@dimen/activity_horizontal_margin"
7
android:paddingTop="@dimen/activity_vertical_margin"
8
android:paddingBottom="@dimen/activity_vertical_margin" >
9
10
<TextView
11
android:text="ตัวอย่างการใช้ Dialog แบบง่าย"
12
android:layout_width="wrap_content"
13
android:layout_height="wrap_content"
14
android:id="@+id/text_title"
15
android:textSize="22sp"
16
android:textColor="#D74B4C"
17
android:layout_alignParentTop="true"
18
android:layout_centerHorizontal="true"
19
android:layout_marginTop="8dp"/>
20
21
<Button
22
android:layout_width="match_parent"
23
android:layout_height="wrap_content"
24
android:id="@+id/button_dialog_simple"
25
android:text="Dialog ธรรมดา"
26
android:padding="16dp"
27
android:textSize="20sp"
28
android:textColor="#FFFFFF"
29
android:background="#D74B4C"
30
android:layout_marginTop="16dp"
31
android:layout_below="@+id/text_title"
32
android:layout_alignParentLeft="true"
33
android:layout_alignParentStart="true"/>
34
35
<Button
36
android:layout_width="match_parent"
37
android:layout_height="wrap_content"
38
android:id="@+id/button_dialog_list"
39
android:text="Dialog แบบ List"
40
android:layout_marginTop="16dp"
41
android:padding="16dp"
42
android:textSize="20sp"
43
android:textColor="#FFFFFF"
44
android:background="#D74B4C"
45
android:layout_below="@+id/button_dialog_simple" />
46
47
<Button
48
android:layout_width="match_parent"
49
android:layout_height="wrap_content"
50
android:id="@+id/button_dialog_single_choice"
51
android:text="แบบเลือก choice เดียว"
52
android:layout_marginTop="16dp"
53
android:padding="16dp"
54
android:textSize="20sp"
55
android:textColor="#FFFFFF"
56
android:background="#D74B4C"
57
android:layout_below="@+id/button_dialog_list" />
58
59
<Button
60
android:layout_width="match_parent"
61
android:layout_height="wrap_content"
62
android:id="@+id/button_dialog_multi_choice"
63
android:text="แบบเลือกหลาย choice"
64
android:layout_marginTop="16dp"
65
android:padding="16dp"
66
android:textSize="20sp"
67
android:textColor="#FFFFFF"
68
android:background="#D74B4C"
69
android:layout_below="@+id/button_dialog_single_choice"/>
70
71
<Button
72
android:layout_width="match_parent"
73
android:layout_height="wrap_content"
74
android:id="@+id/button_dialog_custom"
75
android:text="Custom Dialog 1"
76
android:layout_marginTop="16dp"
77
android:padding="16dp"
78
android:textSize="20sp"
79
android:textColor="#FFFFFF"
80
android:background="#D74B4C"
81
android:layout_below="@+id/button_dialog_multi_choice" />
82
83
<Button
84
android:layout_width="match_parent"
85
android:layout_height="wrap_content"
86
android:id="@+id/button_dialog_custom2"
87
android:text="Custom Dialog 2"
88
android:layout_marginTop="16dp"
89
android:padding="16dp"
90
android:textSize="20sp"
91
android:textColor="#FFFFFF"
92
android:background="#D74B4C"
93
android:layout_below="@+id/button_dialog_custom" />
94
95
</RelativeLayout>

dialog_custom.xml

1
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
2
android:orientation="vertical"
3
android:layout_width="match_parent"
4
android:layout_height="match_parent">
5
<ImageView
6
android:src="@drawable/ic_launcher"
7
android:layout_width="match_parent"
8
android:layout_height="64dp"
9
android:scaleType="center"
10
android:background="#ff3eaff9"
11
android:contentDescription="@string/app_name" />
12
<EditText
13
android:id="@+id/username"
14
android:inputType="textEmailAddress"
15
android:layout_width="match_parent"
16
android:layout_height="wrap_content"
17
android:layout_marginTop="16dp"
18
android:layout_marginLeft="4dp"
19
android:layout_marginRight="4dp"
20
android:layout_marginBottom="4dp"
21
android:hint="Username" />
22
<EditText
23
android:id="@+id/password"
24
android:inputType="textPassword"
25
android:layout_width="match_parent"
26
android:layout_height="wrap_content"
27
android:layout_marginTop="4dp"
28
android:layout_marginLeft="4dp"
29
android:layout_marginRight="4dp"
30
android:layout_marginBottom="16dp"
31
android:hint="Password"/>
32
33
</LinearLayout>

dialog_custom2.xml

1
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
2
android:orientation="vertical"
3
android:layout_width="match_parent"
4
android:layout_height="match_parent">
5
<EditText
6
android:id="@+id/username"
7
android:inputType="textEmailAddress"
8
android:layout_width="match_parent"
9
android:layout_height="wrap_content"
10
android:layout_marginTop="16dp"
11
android:layout_marginLeft="4dp"
12
android:layout_marginRight="4dp"
13
android:layout_marginBottom="4dp"
14
android:hint="Username" />
15
<EditText
16
android:id="@+id/password"
17
android:inputType="textPassword"
18
android:layout_width="match_parent"
19
android:layout_height="wrap_content"
20
android:layout_marginTop="4dp"
21
android:layout_marginLeft="4dp"
22
android:layout_marginRight="4dp"
23
android:layout_marginBottom="16dp"
24
android:hint="Password"/>
25
26
<LinearLayout
27
android:layout_width="match_parent"
28
android:layout_height="wrap_content"
29
android:orientation="horizontal"
30
android:weightSum="1">
31
32
<Button
33
android:id="@+id/button_cancel"
34
android:layout_weight="0.5"
35
android:layout_width="0dp"
36
android:layout_height="wrap_content"
37
android:padding="16dp"
38
android:text="Cancel"/>
39
40
<Button
41
android:id="@+id/button_login"
42
android:layout_weight="0.5"
43
android:layout_width="0dp"
44
android:layout_height="wrap_content"
45
android:padding="16dp"
46
android:text="Login"/>
47
</LinearLayout>
48
</LinearLayout>

MainActivity.java

1
package com.phonbopit.androiddialog.demo;
2
3
import android.app.AlertDialog;
4
import android.app.Dialog;
5
import android.content.DialogInterface;
6
import android.os.Bundle;
7
import android.support.v7.app.ActionBarActivity;
8
import android.view.LayoutInflater;
9
import android.view.Menu;
10
import android.view.MenuItem;
11
import android.view.View;
12
import android.widget.Button;
13
import android.widget.EditText;
14
import android.widget.Toast;
15
16
import java.util.ArrayList;
17
18
public class MainActivity extends ActionBarActivity {
19
20
private static final String[] CLUBS =
21
{"Arsenal", "Chelsea", "Liverpool", "Man City", "Man Utd"};
22
23
String mSelected;
24
ArrayList<Integer> mMultiSelected;
25
26
Button mDialogSimple;
27
Button mDialogList;
28
Button mDialogSingleChoice;
29
Button mDialogMultipleChoice;
30
Button mDialogCustom;
31
Button mDialogCustom2;
32
33
@Override
34
protected void onCreate(Bundle savedInstanceState) {
35
super.onCreate(savedInstanceState);
36
setContentView(R.layout.activity_main);
37
38
mDialogSimple = (Button) findViewById(R.id.button_dialog_simple);
39
mDialogList = (Button) findViewById(R.id.button_dialog_list);
40
mDialogSingleChoice = (Button) findViewById(R.id.button_dialog_single_choice);
41
mDialogMultipleChoice = (Button) findViewById(R.id.button_dialog_multi_choice);
42
mDialogCustom = (Button) findViewById(R.id.button_dialog_custom);
43
mDialogCustom2 = (Button) findViewById(R.id.button_dialog_custom2);
44
45
46
mDialogSimple.setOnClickListener(new View.OnClickListener() {
47
@Override
48
public void onClick(View v) {
49
AlertDialog.Builder builder =
50
new AlertDialog.Builder(MainActivity.this);
51
builder.setMessage("รับขนมจีบซาลาเปาเพิ่มมั้ยครับ?");
52
builder.setPositiveButton("รับ", new DialogInterface.OnClickListener() {
53
public void onClick(DialogInterface dialog, int id) {
54
Toast.makeText(getApplicationContext(),
55
"ขอบคุณครับ", Toast.LENGTH_SHORT).show();
56
}
57
});
58
builder.setNegativeButton("ไม่รับ", null);
59
builder.create();
60
61
// สุดท้ายอย่าลืม show() ด้วย
62
builder.show();
63
}
64
});
65
66
mDialogList.setOnClickListener(new View.OnClickListener() {
67
@Override
68
public void onClick(View v) {
69
AlertDialog.Builder builder =
70
new AlertDialog.Builder(MainActivity.this);
71
builder.setTitle("Select Favorite Team");
72
builder.setItems(CLUBS, new DialogInterface.OnClickListener() {
73
@Override
74
public void onClick(DialogInterface dialog, int which) {
75
String selected = CLUBS[which];
76
Toast.makeText(getApplicationContext(), "คุณชอบ " +
77
selected, Toast.LENGTH_SHORT).show();
78
}
79
});
80
builder.setNegativeButton("ไม่ชอบซักทีม", null);
81
builder.create();
82
83
// สุดท้ายอย่าลืม show() ด้วย
84
builder.show();
85
}
86
});
87
88
mDialogSingleChoice.setOnClickListener(new View.OnClickListener() {
89
@Override
90
public void onClick(View v) {
91
AlertDialog.Builder builder =
92
new AlertDialog.Builder(MainActivity.this);
93
builder.setTitle("Select Favorite Team");
94
builder.setSingleChoiceItems(CLUBS, 0, new DialogInterface.OnClickListener() {
95
@Override
96
public void onClick(DialogInterface dialog, int which) {
97
mSelected = CLUBS[which];
98
}
99
});
100
builder.setPositiveButton("ยืนยัน", new DialogInterface.OnClickListener() {
101
@Override
102
public void onClick(DialogInterface dialog, int which) {
103
// เซฟค่าลง database หรือ SharedPreferences.
104
Toast.makeText(getApplicationContext(), "คุณชอบ " +
105
mSelected, Toast.LENGTH_SHORT).show();
106
dialog.dismiss();
107
}
108
});
109
110
builder.setNegativeButton("ไม่ชอบซักทีม", null);
111
builder.create();
112
113
// สุดท้ายอย่าลืม show() ด้วย
114
builder.show();
115
}
116
});
117
118
mDialogMultipleChoice.setOnClickListener(new View.OnClickListener() {
119
@Override
120
public void onClick(View v) {
121
mMultiSelected = new ArrayList<Integer>();
122
123
AlertDialog.Builder builder =
124
new AlertDialog.Builder(MainActivity.this);
125
builder.setTitle("Select Favorite Team");
126
builder.setMultiChoiceItems(CLUBS, null, new DialogInterface.OnMultiChoiceClickListener() {
127
@Override
128
public void onClick(DialogInterface dialog, int which, boolean isChecked) {
129
if (isChecked) {
130
mMultiSelected.add(which);
131
} else if (mMultiSelected.contains(which)) {
132
mMultiSelected.remove(Integer.valueOf(which));
133
}
134
}
135
});
136
137
builder.setPositiveButton("ยืนยัน", new DialogInterface.OnClickListener() {
138
@Override
139
public void onClick(DialogInterface dialog, int which) {
140
// เซฟค่าลง database หรือ SharedPreferences.
141
StringBuffer buffer = new StringBuffer();
142
for (Integer team : mMultiSelected) {
143
buffer.append(" ");
144
buffer.append(CLUBS[team]);
145
}
146
Toast.makeText(getApplicationContext(), "คุณชอบ" +
147
buffer.toString(), Toast.LENGTH_SHORT).show();
148
dialog.dismiss();
149
}
150
});
151
152
builder.setNegativeButton("ไม่ชอบซักทีม", null);
153
builder.create();
154
155
// สุดท้ายอย่าลืม show() ด้วย
156
builder.show();
157
}
158
});
159
160
mDialogCustom.setOnClickListener(new View.OnClickListener() {
161
@Override
162
public void onClick(View v) {
163
AlertDialog.Builder builder =
164
new AlertDialog.Builder(MainActivity.this);
165
LayoutInflater inflater = getLayoutInflater();
166
167
View view = inflater.inflate(R.layout.dialog_custom, null);
168
builder.setView(view);
169
170
final EditText username = (EditText) view.findViewById(R.id.username);
171
final EditText password = (EditText) view.findViewById(R.id.password);
172
173
builder.setPositiveButton("Login", new DialogInterface.OnClickListener() {
174
@Override
175
public void onClick(DialogInterface dialog, int which) {
176
// Check username password
177
if (username.getText().equals("demo@example.com") &&
178
password.getText().equals("demo")) {
179
Toast.makeText(getApplicationContext(), "Login success!",
180
Toast.LENGTH_SHORT).show();
181
} else {
182
Toast.makeText(getApplicationContext(), "Login Failed!",
183
Toast.LENGTH_SHORT).show();
184
}
185
}
186
});
187
builder.setNegativeButton("Cancel", new DialogInterface.OnClickListener() {
188
@Override
189
public void onClick(DialogInterface dialog, int which) {
190
191
}
192
});
193
194
builder.create();
195
196
builder.show();
197
}
198
});
199
200
mDialogCustom2.setOnClickListener(new View.OnClickListener() {
201
@Override
202
public void onClick(View v) {
203
final Dialog dialog = new Dialog(MainActivity.this);
204
dialog.setTitle("Devahoy");
205
dialog.setContentView(R.layout.dialog_custom2);
206
207
final EditText username = (EditText) dialog.findViewById(R.id.username);
208
final EditText password = (EditText) dialog.findViewById(R.id.password);
209
Button buttonCancel = (Button) dialog.findViewById(R.id.button_cancel);
210
Button buttonLogin = (Button) dialog.findViewById(R.id.button_login);
211
212
buttonCancel.setOnClickListener(new View.OnClickListener() {
213
@Override
214
public void onClick(View v) {
215
dialog.dismiss();
216
}
217
});
218
219
buttonLogin.setOnClickListener(new View.OnClickListener() {
220
@Override
221
public void onClick(View v) {
222
// Check username password
223
if (username.getText().equals("demo@example.com") &&
224
password.getText().equals("demo")) {
225
Toast.makeText(getApplicationContext(), "Login success!",
226
Toast.LENGTH_SHORT).show();
227
dialog.dismiss();
228
} else {
229
Toast.makeText(getApplicationContext(), "Login Failed!",
230
Toast.LENGTH_SHORT).show();
231
}
232
}
233
});
234
235
dialog.show();
236
}
237
});
238
}
239
}

นำเอาไปประยุกต์ใช้กันดูครับ สำหรับบทความนี้ก็จบเพียงเท่านี้ หวังว่าจะมีประโยชน์กับหลายๆคนนะครับ หากชื่นชอบบทความนี้ อย่าลืมช่วยกันแชร์ให้เพื่อนๆด้วยครับ ขอบคุณครับ

Reference:

Authors
avatar

Chai Phonbopit

เป็น Web Dev ในบริษัทแห่งหนึ่ง ทำงานมา 10 ปีกว่าๆ ด้วยภาษาและเทคโนโลยี เช่น JavaScript, Node.js, React, Vue และปัจจุบันกำลังสนใจในเรื่องของ Blockchain และ Crypto กำลังหัดเรียนภาษา Rust

Related Posts