[Android] TextInputLayout 사용하기

TextInputLayout

TextInputLayout은 EditText를 기반으로 좀 더 유연한 동작을 보여주는 레이아웃입니다.

이는 TextInputEditText를 감싸고 있고 TextInputEditText에 입력된 텍스트에 반응합니다.

 

TextInputLayout을 사용하기 위해서는 build.gradle에 Material Library가 추가되어 있어야 합니다.

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

 

먼저 아무 속성도 설정하지 않을 때의 TextInputLayout의 모습은 다음과 같습니다.

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

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/textInputEditText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="힌트" />
        
</com.google.android.material.textfield.TextInputLayout>

 

TextInputLayout의 속성

• style : 기본 스타일인 FilledBox과 OutlinedBox 
• app:errorEnabled : 입력된 텍스트가 올바르지 않을 때 에러 메세지 표시
• app:counterEnabled : 입력된 텍스트의 길이 카운트
• app:counterMaxLength : 입력된 텍스트의 길이 제한

위의 모든 속성을 적용하였을 때의 TextInputLayout의 모습은 다음과 같습니다.

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/textInputLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:errorEnabled="true"
    app:counterEnabled="true"
    app:counterMaxLength="30"
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox">

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/textInputEditText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="힌트" />
</com.google.android.material.textfield.TextInputLayout>