[안드로이드] 머티리얼 디자인 - Text fields(EditText)

이번에 알아볼 머티리얼 디자인의 component는 Text fields 입니다. Text fields는 EditText와 똑같다고 보시면 됩니다.
아래의 예시를 참고해주세요.

Text fields를 구현하기 위해서 Material Design 홈페이지에 접속합니다.
https://material.io/components/text-fields

Material Design

IMPLEMENTATION으로 이동하여 구현 방법을 알아보겠습니다. 

우측의 Outlined text field로 이동합니다.

 

Outlined text field로 이동하니 layout을 어떻게 구성해야 하는지 나와 있습니다. 해당 내용을 복사+붙여넣기합니다.

 

위의 내용만 추가한 후 실행을 하면, 위의 예시처럼 글자를 작성하기 위해 터치를 하면 label이 부드러운 애니메이션과 함께 이동하는 것을 확인할 수 있습니다. 

 

 

다음은 아이콘 및 테두리 색 설정에 대해 알아보겠습니다.

 

startIconDrawable 속성을 통해서 가장 앞에 아이콘을 넣을 수 있습니다.

endIconMode는 위의 예시처럼 비밀번호를 볼 수 있는 기능, 작성한 문자를 모두 지우는 기능 등 여러가지 기능을 지원합니다.

boxStrokeColor는 테두리색을 변경합니다.
theme 속성에 MaterialTextStyle은 커서의 모양이나 색을 지정하거나 드래그 했을때의 색상 등을 지정한 style입니다. (하단부 첨부 참고)

그 외에도 
helperText속성(하단부에 추가 설명을 표시), errorColor 설정, errorIcon 설정 등 많은 속성이 존재합니다. 해당 내용들은 모두 위에서 참고했떤 Material Design 홈페이지에 나와있으니 참고하시면 좋을 것 같습니다.

 

 

 

 

 

MaterialTextStyle