TextInputLayoutのスタイル設定

TextInputLayoutのスタイル設定についてまとめようとしましたが途中で力尽きました。
https://github.com/material-components/material-components-android/blob/master/docs/components/TextField.md を読めばやろうとしていたことがだいたいまとまっていました。
やる気が出たら追記します。

### TextInputLayoutを表示するためのレイアウト

|未入力|入力後|
|-|-|
|![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149856/49c276cd-1e04-14d9-209d-01a51d3634ef.png)|![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149856/80507389-7164-5861-8d59-8a262e1c9280.png)|

```xml
    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

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

### hint(placeHolder)・helperTextの表示

|未入力かつ非フォーカス|フォーカス中または入力後|
|-|-|
|![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149856/c6a1234f-b29b-b8cb-bae2-1e2840131a38.png)|![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149856/5e60e8fe-ed4c-b92d-159f-20d096264f51.png)|

```xml:レイアウトファイルで設定
    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:helperText="ヘルパーテキスト">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="ヒント"/>

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

```kotlin:コードで設定
val textInputLayout = findViewById<TextInputLayout>(R.id.text_input_layout)
textInputLayout.helperText = "ヘルパーテキスト"
textInputLayout.hint = "ヒント"
```

### スタイル
スタイルは標準で次のようなスタイルが用意されています。
- `Widget.Material3.TextInputLayout.OutlinedBox`
- `Widget.Material3.TextInputLayout.OutlinedBox.Dense`
- `Widget.Material3.TextInputLayout.FilledBox`
- `Widget.Material3.TextInputLayout.FilledBox.Dense`

適用すると以下のような見た目になります。

|未入力かつ非フォーカス|フォーカス中または入力後|
|-|-|
|![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149856/3b499638-3244-563a-d941-3719da4a2505.png)|![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149856/4d0a8f31-8f0d-0cd1-3314-767a71603a49.png)|

```xml:レイアウトファイルで設定
    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/Widget.Material3.TextInputLayout.OutlinedBox">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

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

```xml:themes.xmlで設定
    <style name="Base.Theme.MyApplication" parent="Theme.Material3.DayNight.NoActionBar">
        <item name="textInputStyle">@style/Widget.Material3.TextInputLayout.OutlinedBox</item>
    </style>
```

アプリ内でデザインが異なる`TextInputLayout`を使い分ける場合、`attribute`を指定する方法もあります。

```xml:レイアウトファイルで設定
    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="?textInputFilledStyle">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

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

    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="?textInputOutlinedStyle">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

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

## 色
### 枠線

![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149856/18c72299-4d4b-aeae-c3b1-894c1d507d4e.png)

- `@style/Widget.Material3.TextInputLayout.OutlinedBox`で設定
```xml:theme.xml
    <style name="Base.Theme.MyApplication" parent="Theme.Material3.DayNight.NoActionBar">
        <item name="colorPrimary">#FF0000</item>
        <item name="colorOutline">#00FF00</item>
    </style>
```
- 独自スタイルで設定
```xml:theme.xml
    <style name="Base.Theme.MyApplication" parent="Theme.Material3.DayNight.NoActionBar">
        <item name="textInputStyle">@style/Widget.TextInputLayout.OutlinedBox</item>
    </style>

    <style name="Widget.TextInputLayout.OutlinedBox" parent="@style/Widget.Material3.TextInputLayout.OutlinedBox">
        <item name="boxStrokeColor">@color/text_input_layout_stroke_color</item>
    </style>
```

  ```xml:text_input_layout_stroke_color.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Focused -->
    <item android:color="#FF0000" android:state_focused="true"/>
    <!-- Normal -->
    <item android:color="#00FF00"/>
</selector>
  ```
- レイアウトファイルで直接設定
```xml
    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/text_input_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:boxStrokeColor="@color/text_input_layout_stroke_color">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

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