👋Android Programming : TextInputLayout을 이용한 UI 디자인

 

 

TextInputLayout을 이용해 UI 디자인을 해보겠습니다. 

위의 사진과 같이 기본 설정만 해두었습니다. 

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/carbohydrateTextInputLayout"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toTopOf="@+id/proteinTextView"
    app:layout_constraintEnd_toEndOf="@+id/titleTextView"
    app:layout_constraintStart_toStartOf="@+id/titleTextView"
    app:layout_constraintTop_toBottomOf="@+id/carbohydrateTextView">

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/carbohydrateEditText"
        android:hint="소수점 입력 가능"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

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

---

 

 

 

 

확인하기 쉽게 style 지정해서 background에 대한 색을 설정

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/carbohydrateTextInputLayout"
    style="@style/Theme.CalIngredientFood.FoodNtrIrdntInfo.TextInputLayout.FilledBox"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toTopOf="@+id/proteinTextView"
    app:layout_constraintEnd_toEndOf="@+id/titleTextView"
    app:layout_constraintStart_toStartOf="@+id/titleTextView"
    app:layout_constraintTop_toBottomOf="@+id/carbohydrateTextView">

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/carbohydrateEditText"
        style="@style/Theme.CalIngredientFood.FoodNtrIrdntInfo.EditText"
        android:hint="소수점 입력 가능"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

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

<style name="Theme.CalIngredientFood.FoodNtrIrdntInfo.TextInputLayout.FilledBox" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
    <item name="android:background">@color/purple_500</item>
</style>

<style name="Theme.CalIngredientFood.FoodNtrIrdntInfo.EditText" parent="Widget.AppCompat.EditText">
    <item name="android:background">@color/pink</item>
</style>

---

 

 

 

 

style에 errorEnabled를 사용해 오류 기능을 활성화한 후 error 상태

//TextInputLaout
<item name="errorEnabled">true</item>

binding.carbohydrateTextInputLayout.error = "오류입니다"

---

 

 

 

 

 

 

TextInputLaout과 TextInputEditText의 좌측 패딩을 없애기 위해서 style에 paddingStart를 0으로 설정(paddingLeft를 사용하는 경우 안됨)

 

error 시 TextInputLaout의 Box와 Focus된 경우의 Box의 색상 설정

inputType을 숫자만 입력 가능하도록 number로 설정

//TextInputLaout
<item name="boxStrokeErrorColor">@color/black</item>

//TextInputLaout
<item name="boxStrokeColor">@color/black</item>

//TextInputEditText
<item name="android:inputType">number</item>

//TextInputLaout, TextInputEditText
<item name="android:paddingStart">0dp</item>

---

 

 

 

 

TextInputLayout는 상단 / 하단 / 좌측의 기본 Padding 값 : 텍스트 필드 분할기 패딩 8dp + 상단 패딩 16dp / 8dp, 4dp
TextInputEditText 상단에 hint가 붙기 때문에 PaddingTop 값을 설정하는 경우 너무 작으면 text가 물림

 

하단 Padding 값 조정

//TextInputLayout 
<item name="android:paddingBottom">1dp</item>