TextInputLayout: nó là gì, Material Design và thiết lập trong Android

TextInputLayout trong Android là gì

TextInputLayout là một ViewGroup từ gói com.google.android.material.textfield mở rộng LinearLayout và chứa một EditText bên trong. Thành phần này là một phần của thư viện Material Components cho Android, bắt đầu từ phiên bản 1.0.0. Mục đích chính của TextInputLayout là cung cấp triển khai sẵn có của Trường văn bản Material Design với nỗ lực tối thiểu từ phía nhà phát triển.

Không giống như EditText tiêu chuẩn, TextInputLayout quản lý hoạt ảnh của nhãn nổi, được thiết lập qua thuộc tính android:hint của EditText bên trong. Khi trường trống, nhãn hiển thị bên trong trường như một gợi ý thông thường. Ngay khi người dùng bắt đầu nhập, nhãn di chuyển có hoạt ảnh lên phía trên của trường, thu nhỏ kích thước. Theo Material Design Guidelines (2025), hoạt ảnh này cải thiện nhận thức về biểu mẫu vì người dùng luôn thấy tên trường, ngay cả sau khi nhập dữ liệu.

Về mặt kiến trúc, TextInputLayout triển khai mẫu decorator: nó chặn các sự kiện EditText, quản lý hiển thị các phần tử bổ sung (nhãn, lỗi, biểu tượng, bộ đếm) và điều phối hoạt ảnh của chúng. EditText bên trong có thể truy cập qua phương thức getEditText() và có thể được cấu hình với các thuộc tính tiêu chuẩn, bao gồm inputType, maxLines và hint.

<!-- Basic TextInputLayout markup -->
@+id/tilEmail
android:layout_width="match_parent"
android:layout_height="wrap_content">

    @+id/etEmail
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Email"
    android:inputType="textEmailAddress" />

</com.google.android.material.textfield.TextInputLayout>

Nhãn nổi và cách cấu hình

Nhãn nổi (floating label) là tính năng chính của TextInputLayout. Khi trường trống, văn bản từ android:hint hiển thị bên trong EditText như một trình giữ chỗ thông thường. Khi trường nhận tiêu điểm hoặc văn bản được nhập, nhãn nâng lên phía trên của TextInputLayout, giảm kích thước phông chữ và thay đổi màu sắc. Hành vi này giải quyết vấn đề gợi ý trở nên vô hình sau khi người dùng bắt đầu nhập.

Cấu hình nhãn nổi được thực hiện qua các thuộc tính TextInputLayout: app:hintEnabled xác định nhãn nổi có được bật hay không (mặc định true), app:hintAnimationEnabled bật hoặc tắt hoạt ảnh chuyển tiếp, app:expandedHintEnabled cho phép hiển thị nhãn ngay cả khi trường trống và không được tiêu điểm. Màu của nhãn ở các trạng thái khác nhau được quản lý qua các kiểu colorPrimary và colorControlHighlight.

Theo Google Material Components Team (2025), nhãn nổi đặc biệt hữu ích trong các biểu mẫu có nhiều trường, nơi người dùng có thể quên tên trường sau khi bắt đầu nhập. Không giống như android:hint đơn giản biến mất khi nhập, nhãn nổi luôn hiển thị, cung cấp ngữ cảnh cho mỗi trường.

Hiển thị lỗi trong TextInputLayout

TextInputLayout cung cấp một hệ thống hiển thị lỗi tích hợp được kết hợp trực quan với trường nhập. Khi đặt lỗi qua phương thức setError, thành phần làm nổi bật trường (màu của đường kẻ hoặc đường viền chuyển sang đỏ) và hiển thị văn bản lỗi bên dưới trường. Điều này loại bỏ nhu cầu về một TextView riêng cho thông báo lỗi.

Quản lý hiển thị lỗi được thực hiện qua các phương thức setError(CharSequence) và setErrorEnabled(boolean). Khi gọi setError với văn bản, lỗi hiển thị ngay lập tức; khi gọi setError(null), lỗi bị ẩn. TextInputLayout cũng hỗ trợ biểu tượng lỗi tùy chỉnh qua thuộc tính app:errorIconDrawable và quản lý màu lỗi qua app:errorTextColor.

Theo Material Design Guidelines (2025), thông báo lỗi phải cụ thể và hữu ích: thay vì “Đầu vào không hợp lệ” hãy viết “Email phải chứa @”. Hiển thị lỗi nên xảy ra sau khi hoàn thành nhập (khi mất tiêu điểm hoặc sau khi gửi biểu mẫu), không phải theo thời gian thực — điều này giảm căng thẳng cho người dùng khi điền biểu mẫu.

// Thiết lập lỗi theo chương trình
textInputLayout.error = "Password min 8 chars"

// Ẩn lỗi
textInputLayout.error = null

// Kiểm tra và đặt lỗi xác thực
if (email.isNullOrBlank()) {
    tilEmail.error = "Email is required"
} else {
    tilEmail.error = null
}

Biểu tượng và hành động trong TextInputLayout

TextInputLayout hỗ trợ hiển thị biểu tượng ở cả đầu trường (biểu tượng bắt đầu) và cuối trường (biểu tượng kết thúc). Biểu tượng có thể thực hiện các chức năng khác nhau: chuyển đổi hiển thị mật khẩu, xóa trường, hành động tùy chỉnh. Mỗi loại biểu tượng được điều khiển bởi một thuộc tính riêng và có thể được thay thế bằng biểu tượng tùy chỉnh qua thuộc tính app:startIconDrawable hoặc app:endIconDrawable.

Chế độ biểu tượng kết thúc được thiết lập qua thuộc tính app:endIconMode, có thể nhận các giá trị sau: password_toggle — chuyển đổi hiển thị mật khẩu, clear_text — xóa trường, dropdown_menu — mũi tên cho danh sách thả xuống, custom — biểu tượng tùy chỉnh. Đối với password_toggle, TextInputLayout tự động quản lý việc chuyển đổi inputType giữa textPassword và textVisiblePassword, đồng thời tạo hoạt ảnh cho biểu tượng con mắt.

• password_toggle — biểu tượng con mắt để hiện/ẩn mật khẩu, hoạt ảnh tích hợp.
• clear_text — biểu tượng dấu X để xóa trường, xuất hiện khi có văn bản.
• dropdown_menu — mũi tên cho Exposed Dropdown Menu (Material Design 3).
• custom — bất kỳ biểu tượng tùy chỉnh nào với trình xử lý qua setEndIconOnClickListener.

<!-- TextInputLayout with password toggle icon -->
@+id/tilPassword
android:layout_width="match_parent"
app:endIconMode="password_toggle"
app:passwordToggleTint="@color/primary">

    @+id/etPassword
    android:inputType="textPassword" />

</com.google.android.material.textfield.TextInputLayout>

Kiểu TextInputLayout: FilledBox và OutlinedBox

Material Components cho Android cung cấp hai kiểu chính cho TextInputLayout: FilledBox (được tô màu) và OutlinedBox (có đường viền). Kiểu FilledBox có nền được tô màu và một đường kẻ bên dưới trường thay đổi màu khi được tiêu điểm. Kiểu OutlinedBox có nền trong suốt và đường viền xung quanh toàn bộ trường, tạo ranh giới rõ ràng hơn và phù hợp hơn cho các biểu mẫu có nhiều trường.

Việc chọn kiểu phụ thuộc vào thiết kế ứng dụng: FilledBox được khuyến nghị cho các biểu mẫu sử dụng thường xuyên vì nó thu hút ít sự chú ý đến từng trường riêng lẻ. OutlinedBox được ưu tiên cho các biểu mẫu ngắn (đăng nhập, đăng ký) nơi mỗi trường cần được đánh dấu rõ ràng. Kiểu được thiết lập qua thuộc tính style trong XML hoặc qua chủ đề ứng dụng.

Material Design 3 (M3) đã giới thiệu các kiểu cập nhật cho TextInputLayout với kiểu chữ được cải thiện, mã thông báo màu mới và hỗ trợ màu động Material You. Trong M3, OutlinedBox đã trở thành kiểu được khuyến nghị mặc định và FilledBox đã điều chỉnh phần đệm và bán kính viền để phù hợp với đặc tả mới.

Ví dụ mã với TextInputLayout

Một ví dụ hoàn chỉnh về triển khai biểu mẫu đăng ký với TextInputLayout, bao gồm xác thực email và mật khẩu, hiển thị lỗi và biểu tượng hiển thị mật khẩu. Khi nhấn nút đăng ký, tất cả các trường được kiểm tra và thông báo lỗi tương ứng được hiển thị.

Bố cục XML của biểu mẫu đăng ký

@+id/tilName
app:boxBackgroundMode="outlined">
    @+id/etName
    android:hint="Name" />
</...TextInputLayout>

@+id/tilRegEmail
app:boxBackgroundMode="outlined">
    @+id/etRegEmail
    android:hint="Email"
    android:inputType="textEmailAddress" />
</...TextInputLayout>

@+id/tilRegPassword
app:boxBackgroundMode="outlined"
app:endIconMode="password_toggle">
    @+id/etRegPassword
    android:hint="Password"
    android:inputType="textPassword" />
</...TextInputLayout>

Xác thực biểu mẫu trong Kotlin

private fun validateForm(): Boolean {
    var isValid = true

    if (etName.text.isNullOrBlank()) {
        tilName.error = "Enter your name"
        isValid = false
    } else {
        tilName.error = null
    }

    val email = etRegEmail.text.toString()
    if (!Patterns.EMAIL_ADDRESS.matcher(email).matches()) {
        tilRegEmail.error = "Invalid email format"
        isValid = false
    } else {
        tilRegEmail.error = null
    }

    val password = etRegPassword.text.toString()
    if (password.length < 8) {
        tilRegPassword.error = "Password min 8 chars"
        isValid = false
    } else {
        tilRegPassword.error = null
    }

    return isValid
}