Cách triển khai TextInputLayout trong Android

TextInputLayout là gì?

TextInputLayout kế thừa LinearLayout, đóng vai trò wrapper cho EditText. Nó cung cấp hiệu ứng hint nổi (floating hint), hiển thị error, counter ký tự, password toggle, và hỗ trợ Material Design.

Ví dụ: Form đăng nhập Email/Password

Bước 1: Tạo project

Bước 2: Layout activity_main.xml

<LinearLayout ... android:orientation="vertical" android:background="#dde4dd">

    <android.support.design.widget.TextInputLayout
        android:id="@+id/layoutEmail"
        style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="8dp">

        <android.support.design.widget.TextInputEditText
            android:id="@+id/email"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Enter Email id"
            android:inputType="textEmailAddress" />
    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/layoutPassword"
        style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="8dp">

        <android.support.design.widget.TextInputEditText
            android:id="@+id/password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Password"
            android:inputType="textPassword" />
    </android.support.design.widget.TextInputLayout>

    <Button android:id="@+id/click" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:text="Click" />
</LinearLayout>

Bước 3: MainActivity.java

public class MainActivity extends AppCompatActivity {
    EditText email, password;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        email = findViewById(R.id.email);
        password = findViewById(R.id.password);

        findViewById(R.id.click).setOnClickListener(v -> {
            String e = email.getText().toString().trim();
            String p = password.getText().toString().trim();
            if (!e.isEmpty() && !p.isEmpty()) {
                Toast.makeText(this, "Email: " + e + " Pass: " + p, Toast.LENGTH_LONG).show();
            } else {
                if (e.isEmpty()) email.setError("Please Enter Email id");
                if (p.isEmpty()) password.setError("Please Enter Password");
            }
        });
    }
}

Bước 4: build.gradle - Thêm design library

implementation 'com.android.support:design:28.0.0'

Kết quả

Màn hình ban đầu (hint nằm ở giữa):

Nhập dữ liệu, hint nổi lên thành label, bấm Click:

Để trống, bấm Click → hiển thị error:

Tính năng mở rộng (Material Components)

• app:counterEnabled="true" app:counterMaxLength="20": Đếm ký tự.
• app:passwordToggleEnabled="true": Nút show/hide password tích hợp sẵn.
• app:boxBackgroundMode="filled" | "outline" | "none": Kiểu hộp.