Giới thiệu về TextInputLayout

1. TextInputLayout là gì

TextInputLayout là một dạng EditText hỗ trợ floating label tự động dựa vào thuộc tính hint của EditText, khi focus vào EditText thì phần hint đó sẽ nổi lên thành một label làm app của chúng ta có performent tốt hơn.

TextInputLayout còn hỗ trợ thông báo lỗi mỗi khi các bạn nhập sai quy chuẩn (được thiết lập trong code).

Để có thể hiểu rõ hơn về TextInputLayout các bạn tham khảo thêm tại đây.

2. Hướng dẫn sử dụng TextInputLayout

Để có thể sử dụng TextInputLayout các bạn phải add thử viện design của android studio vào project. Các bạn add dòng nào vào build.gradle (app)

compile 'com.android.support:design:25.2.0'

Vậy là các bạn đã có thể sử dụng thẻ TextInputLayout trong file .xml rồi.

3. Ví dụ về TextInputLayout

Trong ví dụ này mình xây dựng một layout đăng nhập đơn giản sử dụng TextInputLayout. Đầu tiên, mình tạo một project mới và đặt tên là TextInputLayoutDemo.

Xây dựng layout đăng nhập.

Tại file activity_main.xml mình sẽ tạo 2 TextInputLayout chứa TextInputEditText với username và password, thêm một button đăng nhập nữa. Các bạn theo dõi code:

// activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:padding="20dp"
tools:context="com.example.hungnguyen.textinputlayoutdemo.MainActivity">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="SIGN IN"
android:textSize="24sp"
android:textStyle="bold"
android:layout_centerHorizontal="true"
android:textColor="@color/colorAccent"
android:layout_marginTop="20dp"/>

<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/input_username_layout"
android:layout_marginTop="80dp">

<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Username"
android:id="@+id/input_username"/>

</android.support.design.widget.TextInputLayout>

<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/input_password_layout"
android:layout_below="@id/input_username_layout"
android:layout_marginTop="20dp"
app:passwordToggleEnabled="true">

<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Password"
android:imeActionId="@+id/login"
android:imeActionLabel="login"
android:imeOptions="actionUnspecified"
android:inputType="textPassword"
android:id="@+id/input_password"/>

</android.support.design.widget.TextInputLayout>

<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Sign in"
android:textColor="#ffffff"
android:background="@color/colorAccent"
android:layout_below="@id/input_password_layout"
android:layout_marginTop="40dp"
android:id="@+id/button_sign_in"/>

</RelativeLayout>

Lưu ý: để có cái icon con mắt ẩn/hiện password thì cần 2 dòng code này:

app:passwordToggleEnabled="true"
android:inputType="textPassword"

Ánh xạ và giả lập dữ liệu

Trong class MainActivity mình sẽ tiến hành ánh xạ Views như sau:

inputUsername = (TextInputEditText)findViewById(R.id.input_username);
inputPassword = (TextInputEditText)findViewById(R.id.input_password);
Button buttonSignIn = (Button)findViewById(R.id.button_sign_in);

Sau đó, mình giả lập tên đăng nhập, password và lỗi không đăng nhập được:

//error
static final String ERROR_USERNAME = "Wrong username";
static final String ERROR_PASSWORD = "Wrond password";
//sign in info
static final String USER_NAME = "Canvn123";
static final String PASS_WORD = "CanBeEverything";
//sign in success
static final String SIGN_IN_SUCCESS = "Sign in success";

Xây dựng logic sign và sự kiện click vào nút sign in

Mình tạo hàm onSignIn() và trong đó mình sẽ set lỗi khi đăng nhập, nếu không có lỗi thì mới báo lên là đăng nhập thành công. Các bạn theo dõi code:

//MainActivity
private void onSignIn() {
    //reset error
    inputUsername.setError(null);
    inputPassword.setError(null);

    //get username and password
    String Username = inputUsername.getText().toString();
    String Password = inputPassword.getText().toString();

    //check error
    boolean checkError = false;
    if (!Username.equals(USER_NAME)){
        inputUsername.setError(ERROR_USERNAME);
        checkError = true;
    }

    if (!Password.equals(PASS_WORD)){
        inputPassword.setError(ERROR_PASSWORD);
        checkError = true;
    }

    if (!checkError){
        Toast.makeText(MainActivity.this, SIGN_IN_SUCCESS,Toast.LENGTH_SHORT).show();
    }

}

Tiếp theo mình gắn hàm onSignIn() vừa tạo ở trên vào sự kiện click button sign in (Các bạn đừng quên implement thằng này View.OnClickListener):

@Override
protected void onCreate(Bundle savedInstanceState) {
    ...
    buttonSignIn.setOnClickListener(this);
}

@Override
public void onClick(View v) {
    switch (v.getId()){
    case R.id.button_sign_in:
    onSignIn();
    }
}

Cuối cùng là run Project và xem kết quả

Chúc các bạn thành công!!!!
by HungNguyen