[Android : Kotlin] TextInputLayout을 사용해서 EditText를 꾸며보자

TextInputLayout을 사용하면 EditText에 넣은 힌트를 텍스트 입력중에 텍스트바 위로 올려서 보여주거나 텍스트의 글자 수를 세주거나 최대 글자 수를 초과할 경우 에러 메시지를 보여주는 등의 기능을 사용할 수 있다.

1. 의존성 추가

앱 모듈의 build.gradle에 안드로이드 디자인 서포트 라이브러리를 추가한다.

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

2. 텍스트 입력중에도 힌트 보여주기

먼저, TextInputLayout으로 EditText를 감싼다.

<LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
        <com.google.android.material.textfield.TextInputLayout
                android:id="@+id/main_textInputLayout_ID"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
            <EditText
                    android:id="@+id/Edit_ID"
                    android:layout_width="match_parent"
                    android:layout_height="50dp"
                    android:inputType="text"
                    android:hint="@string/id_req"
                    android:layout_gravity="center"/>

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

        <com.google.android.material.textfield.TextInputLayout
                android:id="@+id/main_textInputLayout_PW"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
            <EditText
                    android:id="@+id/Edit_PW"
                    android:layout_width="match_parent"
                    android:layout_height="50dp"
                    android:inputType="textPassword"
                    android:hint="@string/pw_req"
                    android:layout_gravity="center"/>

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

이렇게 감싸주기만 하면 EditText의 hint가 텍스트 입력중(Focus가 되어있을경우)에는 EditText의 위에서 hint 내용을 보여주게된다.

 

EditText의 hint가 위로 올라가는 모습

3. pw토글

TextInputLayout의 app:passwordToggleEnabled 속성을 사용해서 inputType = PassWord 속성을 가진 텍스트에 토글 버튼을 설정하여 패스워드를 보이게 혹은 안보이게 설정할 수 있다.

<com.google.android.material.textfield.TextInputLayout
                android:id="@+id/main_textInputLayout_PW"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:passwordToggleEnabled="true">
            <EditText
                    android:id="@+id/Edit_PW"
                    android:layout_width="match_parent"
                    android:layout_height="50dp"
                    android:inputType="textPassword"
                    android:hint="@string/pw_req"
                    android:layout_gravity="center"/>
</com.google.android.material.textfield.TextInputLayout>

 

 

PW Toggle

또한, app:passwordToggleDrawable 속성을 사용해서 toggle 이미지를 변경할 수 있다.

4. 글자 수 카운팅

TextInputLayout에 지정한 ID를 이용해서 isCounterEnabled() 메서드의 속성을 true로 설정해주어 EditText의 글자 수를 카운팅할 수 있다.

main_textInputLayout_ID.isCounterEnabled = true
main_textInputLayout_PW.isCounterEnabled = true

 

 

글자수 카운팅

 

5.최대 글자 수 설정

최대 글자 수를 설정하게 되면 설정한 글자 수를 초과하는 경우 텍스트 입력칸의 색이 바뀌게 되며 이때 isErrorEnabled() 메서드의 속성을 true로 하여 에러 메시지를 사용한다고 설정한 후 error() 메서드를 사용해서 에러 메시지의 내용을 설정해줄 수 있다.

private fun textLengthChecker() {
        main_textInputLayout_ID.isCounterEnabled = true
        main_textInputLayout_PW.isCounterEnabled = true

        main_textInputLayout_ID.counterMaxLength = 10 // ID 최대 길이
        main_textInputLayout_PW.counterMaxLength = 20 // PW 최대 길이


        main_textInputLayout_ID.isErrorEnabled = true
        main_textInputLayout_PW.isErrorEnabled = true


        Edit_ID.addTextChangedListener(object : TextWatcher {
            override fun beforeTextChanged(p0: CharSequence?, p1: Int, p2: Int, p3: Int) {
            }

            override fun onTextChanged(p0: CharSequence?, p1: Int, p2: Int, p3: Int) {
                if (Edit_ID.length() > 10){
                    main_textInputLayout_ID.error = "ID의 글자 수 최대 허용치를 초과하였습니다."
                } else {
                    main_textInputLayout_ID.error = null
                }
            }

            override fun afterTextChanged(p0: Editable?) {
            }
        })

        Edit_PW.addTextChangedListener(object : TextWatcher {
            override fun beforeTextChanged(p0: CharSequence?, p1: Int, p2: Int, p3: Int) {
            }

            override fun onTextChanged(p0: CharSequence?, p1: Int, p2: Int, p3: Int) {
                if (Edit_PW.length() > 20){
                    main_textInputLayout_PW.error = "PW의 글자 수 최대 허용치를 초과하였습니다."
                } else {
                    main_textInputLayout_ID.error = null
                }
            }

            override fun afterTextChanged(p0: Editable?) {
            }
        })
}

위의 함수는 addTextChangedListener를 사용해서 EditText의 상태에 따른 동작을 설정해주었는데, 지정한 글자수를 초과하는 경우에는 에러메시지를 보여주고 그렇지 않은 경우에는 에러 메시지를 지운다.

 

이 과정을 응용해서 유효성검사를 집어넣고 유효한 형식에 맞지 않는경우 에러 메시지를 띄우는 등의 기능을 추가할 수 있다.

 

최대 글자 수 초과시 에러메시지