Sử dụng DialogFragment trong Android

Giới thiệu

Dialog là dạng cửa sổ  cho phép người dùng có thể nhập thông tin cho ứng dụng.
Ví dụ: khi người dùng thoát ứng dụng hoặc xóa dữ liệu ta cần đưa ra một cửa sổ nhỏ để xác nhận thông tin lại lần cuối.
Trong bài viết này tôi sẽ hướng dẫn các bạn sử dụng lớp DialogFragment có khả năng tùy chỉnh và sử dụng cao hơn Dialog bình thường.

Tạo ứng dụng Android

Sử dụng Android Studio, tạo ứng dụng mới tên: DemoDialogFragement

Thêm một Fragment tên UserInfoDlg vào project

Thiết kế giao diện cho dialog như sau (tên tập tin: fragment_user_info_dlg.xml)

Code xml của tập tin fragment_user_info_dlg.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Name"
        android:textSize="18sp"
        android:layout_marginTop="16dp"
        android:id="@+id/tv_name"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Class"
        android:textSize="18sp"
        android:id="@+id/tv_class"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="MSSV"
        android:textSize="18sp"
        android:id="@+id/tv_mssv"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="16dp"
        android:orientation="horizontal">
        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:id="@+id/btn_update"
            android:text="Update"/>
        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:id="@+id/btn_close"
            android:text="Close"/>

    </LinearLayout>
</LinearLayout>

Code của tập tin UserInfoDlg.java

package vn.aptech.demodialogfragment;

import android.os.Bundle;

import androidx.annotation.Nullable;
import androidx.fragment.app.DialogFragment;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;

public class UserInfoDlg extends DialogFragment {
    TextView tvName;
    TextView tvClass;
    TextView tvMSSV;
    Button btnUpdate;
    Button btnClose;

    //Được dùng khi khởi tạo dialog mục đích nhận giá trị
    public static UserInfoDlg newInstance(String data) {
        UserInfoDlg dialog = new UserInfoDlg();
        Bundle args = new Bundle();
        args.putString("data", data);
        dialog.setArguments(args);
        return dialog;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_user_info_dlg, container);
    }

    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        // lấy giá trị tự bundle
        String data = getArguments().getString("data", "");
        tvName = view.findViewById(R.id.tv_name);
        tvMSSV = view.findViewById(R.id.tv_mssv);
        tvClass = view.findViewById(R.id.tv_class);
        btnClose = view.findViewById(R.id.btn_close);
        btnUpdate = view.findViewById(R.id.btn_update);
        tvName.setText(data);
        tvClass.setText("T1.1808");
        tvMSSV.setText("Student1234");
        btnUpdate.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(getActivity(), "Update clicked!", Toast.LENGTH_SHORT).show();
            }
        });
        btnClose.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                getDialog().dismiss();
            }
        });
    }
}

Code của tập tin activity_main.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/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="16dp"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:paddingTop="16dp"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="QuangHD"
        android:gravity="center"
        android:textSize="24sp"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Sử dụng Dialog Fragment "
        android:gravity="center"
        android:textSize="18sp"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btn_show_dialog"
        android:layout_marginTop="16dp"
        android:layout_gravity="center"
        android:text="Show Dialog" />
</LinearLayout>
 

Code của tập tin MainActivity.java

package vn.aptech.demodialogfragment;

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.FragmentManager;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {
    Button btnShowDialog;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        btnShowDialog = findViewById(R.id.btn_show_dialog);
        btnShowDialog.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //Show Dialog và truyền giá trị vào dialog
                // Các bạn có thể truyền cả object nếu muốn.
                FragmentManager fm = getSupportFragmentManager();
                UserInfoDlg userInfoDialog = UserInfoDlg.newInstance("QuangHD");
                userInfoDialog.show(fm, null);
            }
        });
    }
}