Tương tự như options menu hay popup menu, custom dialog cũng là một dạng menu tuy nhiên thay vì chỉ nhấn để chọn chức năng thì custom dialog sẽ cho phép chúng ta tương tác giống như một màn hình thu nhỏ. Rất hay luôn nha, chúng ta cùng tìm hiểu thông qua ví dụ bên dưới

Như ví dụ bên trên khi người dùng chưa có tài khoản, họ sẽ phải tạo cho mình 1 tài khoản. Thông thường chỉ cần số điện thoại/email và mật khẩu là được. Nhưng ứng dụng của mình thì chỉ hạn chế số người nhất định nên sẽ có thêm mã ứng dụng (gọi là btg key). Khi nhập đúng mã thì tài khoản mới được tạo.

Khi đã tạo được tài khoản, thì các thông tin về tên tài khoản và mật khẩu sẽ hiển thị trên màn hình đăng nhập. Và khi bấm vào nút login thì ứng dụng sẽ chuyển qua màn hình cập nhật thông tin. Tại đây, người dùng sẽ nhập đủ thông tin cần thiết và save change lại. Khi bấm vào nút save change toàn bộ dữ liệu sẽ được đưa lên firebase và ứng dụng sẽ truy cập trên đó khi người dùng đăng suất và đăng nhập lại (phần database này mình sẽ hướng dẫn kỹ càng ở bài học khác, bài này các bạn chỉ quan tâm cách tạo custom dialog thôi).

Và custom dialog mà chúng ta tìm hiểu chính là giao diện tạo tài khoản khi bấm vào item new acount trong popup menu. Mình thiết kế custom dialog với 3 textInputLayout là số điện thoại, mật khẩu và mật mã, 2 button là tạo và hủy. Giờ chúng ta sẽ tìm hiểu một chút nhé.

Đối với textInput số điện thoại, mình sẽ gán cho một mã vùng là +84 sẵn, có nhiều cách để code nên mình không hướng dẫn nhé! và trong textInput có một thuộc tính để tạo sẵn một text mà người dùng không xóa được, là prefixText =" ". Số điện thoại sẽ có 10 số vì thế chúng ta sẽ gọi một hàm là .length() để tính số ký tự trong chuỗi. Trong inputText có một hàm để làm như thế này nữa. Nhưng nhược điểm là khi người dùng nhập xong và bấm nút thì mới phát hiện lỗi sai. Và chúng ta sẽ code trên java để khi người dùng bấm tới đâu sẽ phát hiện lỗi sai tại cùng thời điểm.

• Đầu tiên, chúng ta sẽ tạo id cho editText nhập số điện thoại, sau đó trong .java chúng ta code như thế này tên id.addTextChangeListener(){ phát sinh 3 hàm (trước khi nhập, khi nhập, sau khi nhập)} hàm này sẽ theo dõi hành vi người dùng khi bấm vào editText và việc của chúng ta là code cảnh báo lỗi khi người dùng nhập thiếu hay dư số lượng ký tự thôi.

• inputTextLayout sẽ có 2 thuộc tính cần gán id, bên ngoài gọi là layout, bên trong là editText. Chúng ta sẽ kiểm tra dữ liệu tại editText và hiển thị lỗi tại Layout. Để hiển thị lỗi chúng ta dùng hàm .setError("nội dung cần báo lỗi")

2 thuộc tính mật khẩu và mật mã cũng tương tự như trên, tuy nhiên chúng ta sẽ phải ẩn hoặc hiển các thông tin này. Và chúng sẽ được bật tắt thông qua con mắt trên editText đó như ví dụ...

Để làm được như vậy trong file.xml các bạn gọi hàm này. passwordToggleEnabled="true" (trên phần layout) mặc định nó sẽ hiển thị text của bạn và khi bạn bấm vào con mắt nó mới ẩn. Như vậy hơi kỳ đúng hông, lẻ ra nó phải ẩn trước và bấm vào để nó hiển thị thì mới hợp lý. Và chúng ta sẽ gọi thêm một hàm nữa để set định dạng của editText này. Trong phần editText các bạn gọi hàm inputType="textPassword" thì lúc này mặc định text của bạn sẽ là những dấu * và khi bấm vào con mắt nó mới hiển thị.

Rồi còn code hủy thì gọi hàm .dissmis(); he

Code tạo thì khó hơn chút, nói chung nếu sai thì báo lỗi, nếu đúng thì thực hiện cái đoạn màu đỏ á!

Và tất nhiên code này nằm trong hàm của custom dialog nhe! Giờ code cho custom của dialog nữa xong. Đầu tiên khởi tạo hàm và các thuộc tính cơ bản. Nhớ .show(); để hiển thị nhé!

Sau đó là ánh xạ các view cần thiết. Do các id này nằm trong file xml của dialog nên khi ánh xạ chúng ta phải code như này là dialog.findViewbyId(); thì mới được nhé

code cho các editText để phát hiển lỗi của người dùng.

code cho 2 cái nút như hướng dẫn ở trên là xong.

Rồi đọc thì hơi mơ hồ nhưng tự suy luận để code sẽ cho bạn nhiều trải nghiệm xịn xò nhé!