[Android Cơ Bản] (Material Design) TextInputLayout trong Android – Phần 2

Hi các em , trong bài ngày hôm nay chúng ta cùng tìm hiểu đối tượng TextInputLayout trong gói Material Design của Android.

TextInputLayout là gì ?
TextInputLayout (TIL) là 1 view trong thiết kế giao diện của Android dùng để bọc ngoài EditText hoặc TextInputEditText để tùy chỉnh thêm 1 số tính năng cho 2 ô nhập liệu này

Như ở hình, TIL hỗ trợ hiển thị HintText, Text Counter và Password Toggle

Để sử dụng được TIL, chúng ta mở file xml, trong tab Design. Tìm kiếm TIL và click icon Download để thêm thư viện cho dự án.

Chú ý : ở bước này máy tính cần có kết nối Internet để chương trình tải thư viện về.
Sau khi tải xong, các em kéo thả vào màn hình để sử dụng.

Tiến hành thiết lập 1 số tùy chỉnh với TIL như sau :

Dòng 29,30 thiết lập để bật chức năng đếm kí tự cho ô nhập

Dòng 28,34 thiết lập bật nút toggle hiển thị / ẩn password

Các tùy biến khác với TextInputLayout

setError : hàm thiết lập thông báo khi người dùng nhập sai thông tin

helperText : dòng chữ nhỏ phía dưới EditText để giải thích cho ý nghĩa ô nhập

Thiết lập mở textHelper, thiết lập màu sắc, kiểu chữ cho textHelper

Chúng ta cũng có thể sử dụng thông qua câu lệnh

placeTextHolder : là chữ hiển thị ở ô nhập trước khi người dùng input. Chữ sẽ bị mất đi khi người dùng bắt đầu nhập chữ cái đầu tiên. Thường dùng để hiển thị dữ liệu mẫu cho người dùng biết cần nhập gì . ví dụ . Example@gmail.com

Chúng ta cũng có thể dùng qua câu lệnh

prefixText : nhập sẵn giúp người dùng 1 đoạn tiền tố. ví dụ : đầu số điện thoại +84. Người dùng thì ko thể xóa tiền tố này

Ngược lại với prefixText là suffixText.

EndIconMode

Thiết lập 1 số icon và chức năng sẵn có thay thế cho icon “con mắt” bật tắt hiển thị password

clear_text : hiển thị nút x để người dùng clear text khi cần

Như vậy, trong bài chúng ta đã tìm hiểu các chức năng cơ bản của TextInputLayout. Mọi câu hỏi thắc mắc các em gửi về nhóm học Lập trình Android Huy Nguyen nhé.

https://www.facebook.com/groups/HuyNguyenAndroid/

Code mẫu : https://github.com/huuhuybn/TextInputLayoutExample