📌 TextInputLayout

• TextInputLayout은 EditText를 기반으로 좀 더 유연한 동작을 보여주는 레이아웃이다.
• TextInputLayout이 TextInputEditText를 감싸고 있다.
  
  
  

📍 TextInputLayout 작성하기

🔸 TextInputLayout의 스타일 종류

(1) FilledBox, (2) OutlinedBox 스타일

• TextInputLayout 태그 안에 작성 (TextInputEditText에 작성 아님!)

FillBox

style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"

---

OutlinedBox

style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"

---

1. 레이아웃 작성

activity_main.xml

• hint 속성을 사용하여 작성 할 내용의 힌트 표시

• 비밀번호는 입력 후 보이지 않게 처리하기 위해서
  TextInputEditText에서 inputType="textPassword" 추가

• 입력 시 비밀번호 확인을 위한 토글 버튼을 만들기 위해
  TextInputLayout에 passwordToggleEnabled="true" 추가

• 입력 텍스트의 길이를 카운트 하기 위해서
  TextInputLayout에 counterEnabled="true" 속성과, counterMaxLength="10" 속성을 추가

• 입력된 텍스트 길이가 10자리를 넘어가면 더 이상 입력이 되지 않도록 한다.
  

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/field_email"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:padding="15dp"
        tools:ignore="MissingConstraints">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/email0"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/txt1"
            />

    </com.google.android.material.textfield.TextInputLayout>


    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/field_passwd"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/field_email"
        android:layout_marginTop="20dp"
        android:padding="15dp"
        app:passwordToggleEnabled="true"
        tools:ignore="MissingConstraints"
        >

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/passwd0"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/txt2"
            android:inputType="textPassword"
            />
        <!-- inputType="textPassword" 입력 후 보이지 X -->

    </com.google.android.material.textfield.TextInputLayout>


    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/field_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/field_passwd"
        android:layout_marginTop="20dp"
        app:counterEnabled="true"
        app:counterMaxLength="10"
        android:padding="15dp"
        >

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/name0"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/txt3"
            android:inputType="text"
            android:maxLength="10"
            />

    </com.google.android.material.textfield.TextInputLayout>


    <Button
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:text="@string/txt4"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/field_name"
        android:layout_marginTop="20dp"
        android:layout_marginHorizontal="15dp"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

📌 레이아웃 구성 완료

작성한 전체 소스코드 github : Android_Study/textinputlayout/