BÀI 16 - TextInputLayput TRONG LẬP TRÌNH ANDROID

MỤC LỤC

  1. Android TextInputLayout - Giới thiệu.

  2. Floating Hint - Gợi ý thiết kế.

  3. Character Counting - Đếm ký tự nhập vào.

  4. Password Visibility Toggle - Ẩn/hiện khi nhập mật khẩu.

  5. Floating Label Error - Cảnh báo khi phát hiện lỗi.

  6. TextInputLayout Styles - Dạng hiển thị.

  1. Android TextInputLayout

TextInputLayout là một thành phần giao diện chứa một trường đầu vào văn bản (Text Input Field) và hỗ trợ trường đầu vào văn bản này về mặt trực quan. Nếu EditText đang được sử dụng, hãy đảm bảo rằng android:background của nó là @null để TextInputLayout có thể set đặt nền thích hợp cho nó.

Văn bản gợi ý (hint text) tự động nổi lên khi người dùng focus vào EditText.
Một trường mật khẩu (Password field) với một ImageView bên phải cho phép hiển thị mật khẩu.

TextInputLayout là một lớp con của LinearLayout, vì vậy nó có thể sắp xếp các View con trên một hàng hoặc một cột. Một trong các View con của nó là một trường đầu vào văn bản (Text input field), chẳng hạn như EditText, các View con khác đóng vai trò hỗ trợ về mặt trực quan.

Chú ý: Bạn cũng có thể đặt các TextInputLayout lồng nhau để có được một thành phần giao diện phức tạp hơn.

Library:

TextInputLayout không sẵn có trong thư viện tiêu chuẩn của Android, vì vậy để sử dụng bạn cần cài đặt nó vào project của bạn từ Palette của cửa sổ thiết kế hoặc khai báo thư viện này một cách thủ công.

Sau khi cài đặt thư viện này từ Palette bạn sẽ thấy nó được khai báo trong tập tin build.gradle (Module: app):

2. Floating Hint

Văn bản gợi ý (hint text) tự động nổi lên khi người dùng focus vào một EditText là tính năng hỗ trợ cơ bản của TextInputLayout, bạn có thể sử dụng nó mà không cần phải viết thêm bất kỳ một dòng mã Java bổ sung nào.

Kéo thả một TextInputLayout vào giao diện, theo mặc định nó sẽ chứa một View con là TextInputEditText, đây là một lớp hậu duệ của EditText.

TextInputLayout sẽ hiện thị như hình bên dưới.

Các thuộc tính liên quan tới tính năng "Floating Hint" bao gồm:

  • app:hintEnabled (Default true)

  • app:hintAnimationEnabled (Default true)

  • app:hintTextAppearance


  1. app:hintEnabled: Thuộc tính app:hintEnabled được sử dụng để enable/disable (bật/tắt) tính năng "Floating Hint" của TextInputLayout. Giá trị mặc định của nó là True.

  2. app:hintAnimationEnabled: Thuộc tính app:hintAnimationEnabled chỉ định có hay không hiệu ứng hoạt hình khi văn bản gợi ý (Hint text) nổi nên. Giá trị mặc định là true.

  3. app:hintTextAppearance: Thiết đặt mầu sắc, kích thước, kiểu dáng,... cho văn bản gợi ý (Hint text).


Một số stytle của TextInputLayout

  • app:hintTextAppearance="@style/TextAppearance.AppCompat.Large"
  • app:hintTextAppearance="@style/TextAppearance.AppCompat.Medium"
  • app:hintTextAppearance="@style/TextAppearance.AppCompat.Small"
  • app:hintTextAppearance="@style/TextAppearance.AppCompat.Body1"
  • app:hintTextAppearance="@style/TextAppearance.AppCompat.Body2"
  • app:hintTextAppearance="@style/TextAppearance.AppCompat.Display1"
  • app:hintTextAppearance="@style/TextAppearance.AppCompat.Display2"
  • app:hintTextAppearance="@style/TextAppearance.AppCompat.Display3"
  • app:hintTextAppearance="@style/TextAppearance.AppCompat.Display4"


3. Character Counting

TextInputLayout cũng hỗ trợ tính năng đếm số ký tự, đây cũng là một trong các tính năng khá thường xuyên được sử dụng trong các ứng dụng.

Kéo thả một TextInputLayout vào giao diện, theo mặc định nó sẽ chứa một TextInputEditText:

Tiếp theo: Thiết lập giá trị cho một vài thuộc tính của TextInputLayout.

  • app:counterEnabled = "true"

  • app:counterMaxLength: Đây là một thuộc tính tuỳ chọn để chỉ định số lượng ký tự tối đa của văn bản, giá trị này được dùng cho báo cáo. Người dùng vẫn có thể nhập vào một văn bản với số ký tự nhiều hơn.

Và kết quả mà bạn nhận được:

Chú ý: Sử dụng thuộc tính android:maxLength cho Input Field (EditText,..) nếu bạn muốn giới hạn số lượng ký tự của văn bản, và nó được bảo đảm.

4. Password Visibility Toggle

Kéo thả TextInputLayout vào giao diện, theo mặc định nó có sẵn TextInputEditText là một View con. Sau đó, sét đặt thuộc tính android:inputType = "textPassword" cho TextInputEditText.

Thiết đặt giá trị cho các thuộc tính sau:

  • app:passwordToggleEnabled

  • app:passwordToggleDrawable

  • app:passwordToggleContentDescription

  • app:passwordToggleTint

  • app:passwordToggleTintMode

app:passwordEnabled

Thuộc tính app:passwordEnabled="true" là cần thiết để bạn bật tính năng ẩn/hiện mật khẩu cho TextInputLayout, các thuộc tính khác như đề cập ở trên chỉ là các tùy chọn.

Chắc cũng quen thuộc với tính năng này đúng không

5. Floating Label Error

Một trong các tính năng khác của TextInputLayout là hiển thị một Label thông báo lỗi cho người dùng. Tuy nhiên để sử dụng tính năng này bạn cần viết mã Java bổ sung để điều khiển việc ẩn/hiện của Label.

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

this.setupFloatingLabelError();

}

private void setupFloatingLabelError() { final TextInputLayout textInputLayoutUserName = (TextInputLayout)findViewById(R.id.textInputLayout_user_name); textInputLayoutUserName.getEditText().addTextChangedListener(new TextWatcher() { @Override public void onTextChanged(CharSequence text, int start, int count, int after) { if (text.length() == 0 ) { textInputLayoutUserName.setError("Username is required"); textInputLayoutUserName.setErrorEnabled(true); } else if (text.length() < 5 ) { textInputLayoutUserName.setError("Username is required and length must be >= 5"); textInputLayoutUserName.setErrorEnabled(true); } else { textInputLayoutUserName.setErrorEnabled(false); } } @Override public void beforeTextChanged(CharSequence s, int start, int count, int after) {
 } @Override public void afterTextChanged(Editable s) { } }); }}

6. TextInputLayout Styles

Thuộc tính style là một tùy chọn của TextInputLayout, nó cho phép bạn sét đặt kiểu dáng cho TextInputLayout. Có một vài kiểu dáng sẵn có trong thư viện của Android mà bạn có thể sẵn sàng sử dụng.

Một số kiểu style
  • style="@style/Widget.Design.TextInputLayout"
  • style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"
  • style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox.Dense"
  • style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
  • style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"

style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"

style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"