Custom Dialog - Tạo dialog có form nhập liệu

Các bước tạo một Dialog tùy chỉnh có form nhập liệu trong đó

1) Tạo activity mới để thử nghiệm

Bước này thì bạn tự biết tạo rồi, nếu chưa biết thì mời bạn xem lại https://snvn.net/tong-quan-ve-android-24

Hiểu thế nào là Dialog thì mời bạn tham khảo bài viết này https://snvn.net/android-widgets-25/alertdialog.51.html

Trong activity tạo một nút bấm để gọi Dialog hiển thị. Toàn bộ code file layout như sau:

<?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"> 
    
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="ShowDialogAdd"
        android:text="Add New Item"/>
    
</LinearLayout>

 

Trong activity viết sẵn hàm ShowDialogAdd() và tạm để trống code.

 public void ShowDialogAdd(View view){

    }

 

2) Tạo 1 file layout cho phần nội dung của dialog

Đặt tên là: layout_custom_dialog.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/layout_dialog">

    <EditText
        android:id="@+id/item_name"
        android:inputType="text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:layout_marginLeft="4dp"
        android:layout_marginRight="4dp"
        android:layout_marginBottom="4dp"
        android:hint="Name" />
    <EditText
        android:id="@+id/item_phone"
        android:inputType="phone"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp"
        android:layout_marginLeft="4dp"
        android:layout_marginRight="4dp"
        android:layout_marginBottom="16dp"
        android:fontFamily="sans-serif"
        android:hint="Phone"
        />

</LinearLayout>

 

3) Làm việc trong file java activity

Khai báo thuộc tính:
 

    public View layout_dialog_add;
    LayoutInflater inflater;

Trong hàm onCreate thực hiện ánh xạ layout 

inflater = (LayoutInflater) getSystemService(LAYOUT_INFLATER_SERVICE);
layout_dialog_add = inflater.inflate(R.layout.layout_custom_dialog, (ViewGroup)   findViewById(R.id.layout_dialog));

Toàn bộ code Activity ở bước này như sau:

public class DemoCustomDialog extends AppCompatActivity {
    public View layout_dialog_add;
    LayoutInflater inflater;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_demo_custom_dialog);

        inflater = (LayoutInflater) getSystemService(LAYOUT_INFLATER_SERVICE);
        layout_dialog_add = inflater.inflate(R.layout.layout_custom_dialog, (ViewGroup)   findViewById(R.id.layout_dialog));

    }

    public void ShowDialogAdd(View view){

    }
}

 

4. Bắt đầu tạo Dialog


Bạn cho đoạn code sau vào cuối cùng của hàm onCreate ở bước 3

//------------------- build dialog add new ---------------------
        // Xây dựng cái view
        if (layout_dialog_add.getParent() != null) {// xóa các view ở lần bấm chuột trước
            ((ViewGroup) layout_dialog_add.getParent()).removeAllViews();
        }
        //layout_root should be the name of the "top-level" layout node in the dialog_layout.xml file.
        final EditText item_name = (EditText) layout_dialog_add.findViewById(R.id.item_name);  // editext này lấy ở file layout_custom_dialog
        final EditText item_phone = (EditText) layout_dialog_add.findViewById(R.id.item_phone);


        //Building dialog
        AlertDialog.Builder builder = new AlertDialog.Builder(this);
        builder.setView(layout_dialog_add);
        builder.setTitle("Add New");
        builder.setIcon(R.mipmap.ic_add_user); // nếu bạn không thích thì comment dòng này lại 
        builder.setPositiveButton("Save", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {


                // lấy dữ liệu người dùng nhập cho vào biến
                String _name = item_name.getText().toString();
                String _phone = item_phone.getText().toString();
                // có dữ liệu rồi thì bạn gọi lệnh ghi vào csdl ở đây nhé

                Toast.makeText(getBaseContext(),"Bạn vừa nhập: " + _name + "\n" + _phone, Toast.LENGTH_SHORT).show();

                dialog.dismiss(); // tắt dialog
            }
        });
        builder.setNegativeButton("Cancel", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                dialog.dismiss(); // tắt dialog
            }
        });
        dialogAdd = builder.create(); // tạo dialog

 

Trong code trên có chỗ set biểu tượng là ic_add_user ==> biểu tượng này không có sẵn mà bạn phải tự tạo.

Bạn vào trang này https://romannurik.github.io/AndroidAssetStudio/icons-launcher.html 

và bấm nút download để tải biểu tượng về sẽ thành file nén. Bạn giải nén ra sau đó mở thư mục res ở trong kết quả giải nén, bôi đen copy toàn bộ thư mục  trong đó copy vào thư mục rest trong android studio.

Giải nén có các thư mục biểu tượng

Tiếp theo bạn paste vào trong này nhé.

paste icon to res

 

5) Gọi hàm show của dialog khi bấm nút

Trong hàm ShowDialogAdd bạn gọi hàm show.

  public void ShowDialogAdd(View view){
        dialogAdd.show();
    }

 

6) Chạy ứng dụng và bấm nút để show Dialog

Custom dialog
 

 

 

Thích thì Like, yêu thì Share, ghét thì bấm phím Ctrl + W

Đọc thêm Android Widgets