[안드로이드/Android] TextInputLayout - 속성변경(밑줄 색, 커서 색, 메세지 등)

TextInputLayout & TextInputEditText 설정 및 기본 커스텀(밑줄, 커서색, 메세지)

TextInPutLayout은 TextInputEditText 에 입력된 텍스트에 반응하는 레이아웃 입니다. EditText 의 상위 버전이라 할 수 있습니다.

기본 사용법

1. 라이브러리 설정

build.gradle 의 dependedncies 에 material 라이브러리를 넣어줍니다.

implementation 'com.google.android.material:material:1.2.0'

2. style

AppTheme 의 parent 를 AppCpmpat => MaterailComponents 로 변경해 줍니다. 

변경하지 않아도 사용할 순 있지만, 몇몇 속성이 적용되지 않습니다. (밑줄 색이라던가.. 터치 시 라밸 색이라던가...)

<!--<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">-->
    <style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar"> 
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

3. xml 선언

이제 원하는 xml에 태그를 추가해주면 준비는 끝납니다. TextInputEdittext 가 아닌 EditTextView 를 넣어도 동작은 합니다. 다만 모든 커스텀 속성들이 다 적용되는진 모르겠습니다. 

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/inputSmsCode"
    style="@style/EditTextGreyStyle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/EditTextGreyStyle">


    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/etSmsCode"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@color/colorPrimary"
        android:textSize="13sp" />
</com.google.android.material.textfield.TextInputLayout>

주의점

- 특별한 이유가 없다면 layout_height 는 둘다 wrap_content 로 해주세요. 텍스트 사이즈에 맞게 조정됩니다. 임의 설정시 잘못 조절하면 TextinputLayout 의 힌트 라벨과 TextInputEditText 의 텍스트가 겹치게 나올 수 있습니다.

- TextInputLayout : 말 그대로 layout 속성 적용( 에러/헬퍼/힌트 메세지 설정, 라벨/힌트/밑줄 색 설정 등

- TextInputEditText : textSize, textColor, font 등

커스텀 설정

<com.google.android.material.textfield.TextInputLayout
    app:helperTextEnabled="true"
    app:helperText="@string/app_name"
    app:helperTextTextColor="@color/colorPrimary" 
...

기본 설정은 위와 같이 TextInputLayout 에서 설정 할 수 있습니다. 에러/헬퍼/힌트 모드 enalbe = true 가 디폴트 입니다.

하지만 밑줄 색, 커서 색은 TextInputLayout 에서 때려죽여도 커스텀이 안됩니다. 제가 이 글을 쓰게 된 이유죠.

별도의 style 적용을 해줘야 합니다. 왜 공홈에 설명이 없는지..

색은 귀찮아서 통일했습니다.

<style name="EditTextGreyStyle" parent="Widget.Design.TextInputLayout"> // important : parent 를 이것으로.
    <item name="colorControlNormal">@color/colorPrimary</item>  // unFocus 상태일때 밑줄 색.
    <item name="boxStrokeColor">@color/colorPrimary</item> // Focus 상태일때 밑줄 색.
    <item name="android:textCursorDrawable">@color/colorPrimary</item>  // cursor 색.
   
    <item name="android:textColorHint">@color/colorPrimary</item>  // hint 색
    <item name="hintTextColor">@color/colorPrimary</item>   // floating hint 색
 <item name="helperText">@color/colorPrimary</item> // xml 에서 한 속성을 여기서도 할 수 있습니다.
 <item name="helperTextTextColor">@color/colorPrimary</item>
 <item name="errorTextColor">@color/colorPrimary</item>
</style>

parent 를 Widget.Design.TextInputLayout 로 설정해 주어야 합니다.

colorControlNomal : unFocus 상태시 밑줄 색
colorControlActivated : Focus 상태시 밑줄 색. => material 공홈에선 클릭시 밑줄 색상은 boxStrokeColor 라 명시되어 있습니다. 그러나 colorControlNomal 를 사용하게 되면 boxStrokeColor 가 적용되지 않기에, boxStrokeColor 를 썻다면 colorControlActivated 를 써줘야 합니다.

마지막으로 중요한 건 style 과 theme 두개 설정을 모두 걸어줘야 합니다.

밑눌을 제외하면 style 만 적용해도 되지만, 밑줄의 경우 두가지를 모두 설정해 줘야 합니다. 

그렇지 않으면 AppTheme 의 colorAccent 값이 적용됩니다.

<com.google.android.material.textfield.TextInputLayout
    style="@style/EditTextGreyStyle"
    android:theme="@style/EditTextGreyStyle"
    ...

이러면 밑줄 색, 커서 색을 포함한 기본적은 커스텀을 할 수 있습니다.

helper, error, endIcon 설정 등은 마테리얼 공홈을 가면 보다 자세히 보실 수 있습니다.