TextInputLayout & TextInputEditText 사용하기

TextInputLayout과 TextInputEditText에 대해 알아봅니다.

Photo by Romain Vignes on Unsplash

TextInputLayout & TextInputEditText 이란?

TextInputLayout은 TextInputEditText에 입력된 텍스트에 반응하는 레이아웃입니다. EditText의 상위 버전이라고 할 수 있습니다. 대표적인 기능 몇 가지와 사용법에 대해 알아보겠습니다.

사용법

1. 앱 수준의 build.gradle 파일에 들어간 후 dependencies에 머티리얼 라이브러리를 implementation 해줍니다.

dependencies 추가하기

2. 자신이 사용할 레이아웃에 TextInputLayout 태그와 그 안에 TextInputEditText 태그를 추가해주면 준비는 끝입니다.

Error Message 나타내기

• 먼저 TextInputLayout에 errorEnabled 태그를 추가해줍니다. 이 과정에서 app : ..을 입력할 때 빨간줄이 뜰 수 있는데 alt + Enter로 import해주면 됩니다.

에러 메시지 나타내보기

• 그 다음 사용하는 액티비티로 가서 error를 어떤 조건에서 나타낼지 입력해줍니다. 저는 TextInputEditText가 공백일때 에러를 나타내도록 설정하였습니다. 레이아웃에서 app : errorEnabled를 false로 설정하면 끌 수 있습니다. if문 안의 조건으로 error 발생 요건을 바꾸어 줄 수 있습니다.

공백 에러 메시지 띄우기

• 실행화면

Hint 및 TextCounter 사용하기

입력하는 텍스트의 힌트를 제공하는 Hint 설정과 글자 수를 세는 Text Counter에 대해 알아봅니다.

• TextInputLayout 태그 안에 app: … 속성을 지정해줍니다. hintEnabled를 true로 설정하면 hint를 사용하겠다는 뜻이고 hintAnimationEnabled 또한 true로 지정하여 애니메이션 효과를 주게합니다. 그리고 사용할 hint를 써줍니다.
• counterEnabled 와 counterMaxLength 는 이름에서 알 수 있듯이 카운터 기능을 켜주고 최대 길이를 지정해 줄 수 있습니다.

• 저는 counter를 이용하여 입력 글자가 3글자가 넘거나 비어있을 경우 에러메시지를 출력하도록 메인 액티비티 안의 코드를 간단하게 수정해보았습니다.

• 실행화면

힌트와 카운터 기능이 잘 작동되는 것을 볼 수 있습니다.

짧은 글이지만 읽어주셔서 감사합니다