Dialog và CustomDialog trong Android

1. Dialog là gì?

Các bạn có thể hiểu đơn giản dialog là một hộp thông báo hiện ra khi người dùng thực hiện một thao tác nào đó. Ví dụ khi bạn thoát ứng dụng, thông thường sẽ xuất hiện một thông báo là "bạn có muốn thoát ứng dụng hay không?". Việc này giúp cho người dùng chắc chắn hơn về hành động của mình.

2. Ví dụ

Ví dụ lần này, mình sẽ tạo một project giao diện login khi thoát ứng dụng sẽ show dialog ra hỏi "bạn có muốn thoát ứng dụng không?" và khi bấm vào nút đăng ký sẽ show một dialog (đã custom) để điền thông tin cá nhân vào.

Đầu tiên tạo một project mới đặt tền gì thì tuỳ bạn, mình sẽ đặt tên là DialogExample.

• Bước 1: Tạo layout

Mình sẽ tạo một layout login đơn giản, gồm 2 EditText và 3 Button, các bạn theo dõi code như sau:

//activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.hungnguyen.dialogexample.MainActivity"
    android:padding="16dp">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Username"
        android:id="@+id/edit_username"
        android:layout_marginTop="20dp"/>

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/edit_username"
        android:hint="Password"
        android:layout_marginTop="20dp"
        android:id="@+id/edit_password"/>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Sign in"
        android:id="@+id/button_sign_in"
        android:layout_below="@id/edit_password"
        android:layout_marginTop="20dp"/>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Sign up"
        android:id="@+id/button_sign_up"
        android:layout_below="@id/button_sign_in"
        android:layout_marginTop="20dp"/>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Exit"
        android:id="@+id/button_exit"
        android:layout_below="@id/button_sign_up"
        android:layout_marginTop="20dp"/>
</RelativeLayout>

Tiếp theo là layout form đăng ký để custom dialog, gồm 4 EditText và 1 Button như sau:

//form_sign_up.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Name"
        android:id="@+id/name" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="username"
        android:layout_marginTop="20dp"
        android:id="@+id/username"
        android:layout_below="@id/name"/>
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Password"
        android:id="@+id/pass"
        android:layout_marginTop="20dp"
        android:layout_below="@id/username"/>
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Phone"
        android:id="@+id/phone"
        android:layout_marginTop="20dp"
        android:layout_below="@id/pass"/>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Register"
        android:id="@+id/register"
        android:layout_below="@id/phone"
        android:layout_marginTop="20dp"/>

</RelativeLayout>

• Bước 2: Ánh xạ, setOnClick và tạo Dialog

Ở đây mình chỉ dụng 2 button để show dialog, nên mình chỉ ánh xạ 2 button thôi nhé, cho đỡ tốn thời gian

btnSignUp = (Button)findViewById(R.id.button_sign_up);
btnExit = (Button)findViewById(R.id.button_exit);

Set sự kiện click cho 2 button. Và đừng quên implements View.OnclickListener trong MainActivity.class nha.

btnExit.setOnClickListener(this);
btnSignUp.setOnClickListener(this);

Tạo Dialog exit và Dialog sign up:

//Dialog exit
private void dialogExit(){
        AlertDialog.Builder dialogExit = new AlertDialog.Builder(this);
        dialogExit.setMessage("Do you want to exit?");
        dialogExit.setPositiveButton("Yes", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                finish();
            }
        })
                .setNegativeButton("No", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        dialog.dismiss();
                    }
                });

        AlertDialog alertDialog = dialogExit.create();
        alertDialog.show();
    }

//Dialog sign up
private void dialogSignUp(){
        dialogSignUp = new Dialog(this);
        dialogSignUp.setContentView(R.layout.form_sign_up);
        dialogSignUp.setTitle("INFORMATION FORM");
        Button btnRegister = (Button) dialogSignUp.findViewById(R.id.register);
        btnRegister.setOnClickListener(this);
        dialogSignUp.show();
    }

• Bước 3: Bắt sự kiện click để show dialog

@Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.button_exit:
                dialogExit();
                break;
            case R.id.button_sign_up:
                dialogSignUp();
                break;
            case R.id.register:
                Toast.makeText(MainActivity.this, "Account Created", Toast.LENGTH_SHORT).show();
                dialogSignUp.dismiss();
        }
    }

• Bước 4: Run app và xem kết quả

Vừa rồi mình đã giới thiệu cho các bạn về DiaLog trong Android, chúc các bạn thành công nhé!!!

by HungNguyen