Android. How to always display Suffix Text on EditText
Using TextInputLayout & TextInputEditText
🔥해결하고자 하는 문제
위와 같은 디자인을 받았다. 현재 진행 중인 프로젝트에서는 학교 이메일로만 가입하는 정책이라서 뒤에 항상 동일한 메일 도메인을 표시한다.
저렇게 지정하는 것은 Material 디자인의 TextInputLayout과 TextInputEditText로 가능하다.
Material 컴포넌트를 사용하기 위해서는 다음을 설정해야 한다.
밑의 사진을 누르면 이동할 수 있다. 최신 버전을 확인하자.
현재(2022.05.25) 최신 버전은
1.6.0
TextInputLayout에 android:hint 속성에 힌트로 보여줄 텍스트를 지정하고 app:hintEnabled 속성에 true를 주면 다음과 같이 힌트가 보여진다.
그런데 차이점이 있다면 TextInputLayout은 포커즈를 받지 않은 상태에서는 Suffix Text가 보이지 않고, 포커즈를 받으면 hint가 위로 올라가면서 Suffix Text가 보이게 된다.
처음에는 커스텀 뷰를 만드려고 했는데 간단히 해결할 수 있는 방법을 찾게 되어 공유하려고 한다.
🔥어떻게 고쳐야 할까
layout inspector로 확인을 해보니 힌트 부분이 처음에 전체 공간을 차지하고 있는 것을 확인했다.
포커즈를 받은 상태를 확인해보니 애초에 없었던 Suffix Text가 등장했다. 이걸 보아 hint에 가려져서 보이지 않았던 것이 아니라 내부적으로 포커즈를 받았을 때만 보이도록 만들어진 것 같다.
우리가 해결해야 하는 부분은 두 가지이다.
- 포커즈를 받으면 힌트가 위로 올라가는 것이 아니라 보이지 않아야 한다.
- 포커즈를 받지 않은 상태에서도 Suffix Text가 보여야 한다.
🔥해결해보자
글자가 입력되면 힌트 없애기
이 부분은 간단하다. 힌트를 TextInputLayout가 아니라 TextInputEditText에서 표시하면 된다. android:hint 속성을 TextInputEditText로 옮기고, TextInputLayout에서 app:hintEnabled 속성을 제거하면 된다. (기본 값이 false이다)
입력 창을 클릭하면 힌트가 위로 올라가지 않고, 글자를 입력하면 힌트가 보이지 않는다.
항상 Suffix Text 표시하기
TextInputLayout.java 파일을 뒤져봤다. updateSuffixTextVisibility() 함수를 찾았는데 이 함수는 Suffix Text가 존재하고, 힌트가 확장되지 않는 상태일 때 Suffix Text를 보이게 하는 동작을 하는 것으로 생각된다.
힌트가 확장된 상태라고 하면 포커즈를 받지 않은 상태에서 힌트가 입력창 전체 부분을 덮고 있는 상태를 의미하는 것 같다.
또 TextInputLayout에 expandedHintEnabled 라는 속성이 있는데 이 속성의 주석을 보면 다음과 같이 적혀있다.
텍스트 필드가 채워지지 않고 포커즈를 받지 않은 경우 힌트가 입력 영역을 차지해야 하는지 여부
즉 expandedHintEnabled 속성으로 글자가 입력되지 않고, 포커즈를 받지 않은 상태에서는 힌트가 전체 입력 영역을 차지할지 말지 옵션을 줄 수 있다는 말이다.
🔥결론
- TextInputLayout에
app:expandedHintEnabled="false"속성 설정 - TextInputEditText에
android:hint속성 설정
🔥추가 사항
주석에는 위와 같은 설명이 적혀있었다.
힌트를 TextInputLayout이 아니라 TextInputLayout에 달으라는 말이다. 나중에 힌트를 수정할 때 문제가 생길 수 있다는 설명이다.
우리 프로젝트의 요구사항에서는 힌트가 변경되지 않기 때문에 문제가 되지 않는 부분이라고 생각하고, 코드를 좀 더 살펴보니 EditText에 힌트가 설정된 경우 이 힌트를 TextInputLayout으로 옮기는 과정이 있는 것을 확인했다.
