[안드로이드] TextInputLayout, EditText (hint/placeholder, error message, 문자열 counting, password visibility)

TextInputLayout

기존에 EditText를 사용할 때 placeholder는 hint를 이용해서 

입력이 되지 않은 상태에 미리 정해진 text를 볼 수 있었다.

<EditText
    ...
    android:hint="@string/my_hint">
</EditText>

1) hint / error message 제공

TextInputLayout은 미리 정해진 text(Username)를 단순히 제공하는것이 아니라 

아래의 그림처럼 클릭했을 경우 hint가 자동적으로 위로 올라가는 기능을 제공한다. 

또, error message를 아래에 보여줄 수 있다.

코드

<android.support.design.widget.TextInputLayout
    android:id="@+id/username_text_input_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <EditText
        android:id="@+id/etUsername"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:ems="10"
        android:hint="Username" />

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

기본적으로 TextInputLayout 안에 EditText를 추가해준다.

private void setupFloatingLabelError() {
    final TextInputLayout floatingUsernameLabel = (TextInputLayout) findViewById(R.id.username_text_input_layout);
    floatingUsernameLabel.getEditText().addTextChangedListener(new TextWatcher() {
        // ...
        @Override
        public void onTextChanged(CharSequence text, int start, int count, int after) {
            if (text.length() > 0 && text.length() <= 4) {
                floatingUsernameLabel.setError(getString(R.string.username_required));
                floatingUsernameLabel.setErrorEnabled(true);
            } else {
                floatingUsernameLabel.setErrorEnabled(false);
            }
        }
        @Override
        public void beforeTextChanged(CharSequence s, int start, int count, 
                                      int after) {
            // TODO Auto-generated method stub
        }

        @Override
        public void afterTextChanged(Editable s) {

        }
    });
}

에러 메시지를 추가하기 위해서는 위와 같은 java코드를 추가해야한다. 

값이 변하는지 보는 addTextChangedListener를 통해서 언제 에러 메시지를 보여줄지를 결정할 수 있다.

2) character count

EditText에 입력된 character를 count할 수 있다.

아래의 그림을 예로 들면 10글자가 넘어갈 경우 라인의 색도 바꿀 수 있다.

코드는 간단하게 app:counterEnabled와 app:CounterMaxLength를 추가해주고,

setCounterEnabled()와 setCounterMaxLength()를 통해 동적으로 정의할 수 있다.

코드

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:counterEnabled="true"
    app:counterMaxLength="10"
    app:counterTextAppearance="@style/counterText"
    app:counterOverflowTextAppearance="@style/counterOverride">
    <EditText
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:hint="Username"
       android:layout_centerHorizontal="true"
       android:layout_centerVertical="true"
       android:ems="10"
       android:hint="Username" />
</android.support.design.widget.TextInputLayout>

3) password toggles (보이기/안보이기)

password toggle은 오른쪽에 있는 눈모양의 버튼을 이용하여 입력했던 

password를 보이게/안보이게 설정할 수 있는 기능이다.

코드는 app:passwordToggleEnabled를 이용하면 되고,

default인 눈모양의 아이콘을 바꾸기 위해서는 app:passwordToggleDrawble을 이용하면 된다.

코드

<android.support.design.widget.TextInputLayout
        android:id="@+id/username_text_input_layout"
        app:passwordToggleEnabled="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:id="@+id/etUsername"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:ems="10"
            android:inputType="textPassword"
            android:hint="Username" />

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