TextInputLayout에서 텍스트 필드 구현

우선 동작 확인

↓ 느낌의 텍스트 필드의 구현 방법을 소개합니다

구현 방법

TextInputLayout 사용

이 좋은 느낌의 텍스트 필드를 얻으려면 Design Support Library의 TextInputLayout을 사용하십시오.

activity_main.xml

        <android.support.design.widget.TextInputLayout
            android:id="@+id/userNameTextImaputLayout"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:errorEnabled="true"
            app:counterEnabled="true"
            app:counterMaxLength="10"
            app:hintEnabled="true"
            app:hintAnimationEnabled="true"
            android:layout_marginTop="67dp">

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

app:hintAnimationEnabled="true" 에서 placeholder 애니메이션을 활성화합니다. 이 애니메이션은 머티리얼 디자인에 따라 다르므로 스스로 사용자 정의할 필요 없이 머티리얼 디자인 애니메이션을 구현할 수 있습니다.
그건 그렇고, false로 설정하면 애니메이션이 사라집니다.
그 밖에도 app: counterEnabled ="true" 에서 오른쪽 하단의 문자수 카운터 표시를 유효화하고 있습니다.

자식 View에 TextInputEditText 배치

그런 다음 실제로 입력하기 위해 View, TextInputEditText를 TextInputLayout에 넣습니다.

activity_main.xml

        <android.support.design.widget.TextInputLayout
            android:id="@+id/userNameTextImaputLayout"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:errorEnabled="true"
            app:counterEnabled="true"
            app:counterMaxLength="10"
            app:hintEnabled="true"
            app:hintAnimationEnabled="true"
            android:layout_marginTop="67dp">

            <android.support.design.widget.TextInputEditText
                android:id="@+id/userNameEditText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="ユーザー名"
                android:imeOptions="actionSend"
                android:inputType="text"
                android:maxLines="1"
                android:textSize="20sp"/>

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

세로 화면만 대응의 경우, 아이 View는 보통의 EditText에서도 괜찮습니다만, 가로 화면으로 했을 때에 버그가 있기 때문에, 옆도 대응하는 경우는 TextInputEditText 를 지정합니다.

이상으로 좋은 느낌의 텍스트 필드를 실현할 수 있습니다.
에러문의 표시도 하고 싶은 경우는 코드로 하는 것이 됩니다.

오류 문 표시

MainActivity.kt

        binding.userNameEditText.addTextChangedListener(object : TextWatcher {
            override fun afterTextChanged(s: Editable?) {}
            override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {}
            override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {
                if (s!!.length > binding.userNameTextImaputLayout.counterMaxLength) {
                    binding.userNameTextImaputLayout.error = "ユーザー名は10文字以内で入力してください"
                } else {
                    binding.userNameTextImaputLayout.error = null
                }
            }
        })

TextInputEditText 의 입력 이벤트를 TextWatcher 로 감시해, 최대 문자수를 넘으면 TextInputLayout 의 error 에 에러문을 설정합니다. 최대 문자 수를 초과하지 않으면 error 를 null로 설정하고 오류 문자를 지 웁니다.
이 최대 문자수를 넘으면 판정은 스스로 실시하게 됩니다.if (s!!.length > binding.userNameTextImaputLayout.counterMaxLength) {이 부분이군요.

이제 에러문의 표시도 할 수 있게 되었습니다.

마지막으로

쉽게 좋은 느낌의 텍스트 필드를 구현할 수있었습니다.
이런 느낌의 텍스트 필드를 원할 수 있다고 생각하기 때문에, 그런 때는 자작하는 것이 아니라, 이것 사용하면 좋다고 생각합니다

코드는 여기

※ 참고로 ...
부모 레이아웃에 ConstraintLayout을 사용하고 있습니다.
Databinding을 사용하고 있습니다.
코드는 kotlin으로 작성됩니다.