【TextInputLayout / TextInputEditText】Material.TextFieldのカスタマイズチートシート

# 新しくなったMaterialDesignのTextField

`MaterialDesign`がまた新しくなり、その中でも`TextField`のデザインがまたアップデートされました。

<img width="761" alt="スクリーンショット 2018-10-05 18.02.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/63740/f00fb5fd-81b7-d825-a832-5703a33afd5f.png">

大きく分けて**2種類**のデザインに変更されました。

# Filled text fields と Outlined text fields

<img width="772" alt="スクリーンショット 2018-10-05 18.04.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/63740/e06ca305-1983-8ca6-64d6-950514570b1f.png">

1 が **Filled text fields**
2 が **Outlined text fields**

になります。

# com.google.android.materialの導入

これらのデザインをAndroidに導入するには、`com.google.android.material`のインポートが必要です。

以下の公式を参考にインポートします。

[Getting started with Material Components for Android](https://material.io/develop/android/docs/getting-started/)

ちなみにこのコンポーネント**AndroidX**が必要になりますが、
「まだsupport libから移行できないんだ！」っていう人用にも、`com.android.support:design:28.0.0-alpha3`で利用できるようにサポートされています。

また、`compileSDKVersion`は`P`になっています。

# [Filled text fields](https://material.io/design/components/text-fields.html#filled-text-field)のカスタマイズ

<img width="772" alt="スクリーンショット 2018-10-05 18.12.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/63740/fc211c4a-5933-62e3-86fb-8d8f1bb55bce.png">

まずこちらは、`Widget.MaterialComponents.TextInputLayout.FilledBox`をstyle指定してください

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

## boxBackgroudColor

`app:boxBackgroundColor`

<img src="https://qiita-image-store.s3.amazonaws.com/0/63740/4b4cb971-2ff5-be12-70c1-facf1ecd8e3d.png" width="300px">

## hintColor

`Widget.MaterialComponents.TextInputLayout.FilledBox -> hintTextAppearance`
`TextAppearance.AppCompat.Caption -> android:textColor`

```xml
<style name="Sample.InputLayout.Activate" parent="TextAppearance.AppCompat.Caption">
    <item name="android:textColor">#0000FF</item>
</style>

<style name="EditText.Filled" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
    <item name="hintTextAppearance">@style/Sample.InputLayout.Activate</item>
</style>
```

<img src="https://qiita-image-store.s3.amazonaws.com/0/63740/570519b9-780c-fa72-1d96-38ab5103409f.png" width="300px">

## helperTextColor

`Widget.MaterialComponents.TextInputLayout.FilledBox -> helperTextTextAppearance`
`TextAppearance.AppCompat.Caption -> android:textColor`

```xml
<style name="Sample.InputLayout.Activate" parent="TextAppearance.AppCompat.Caption">
    <item name="android:textColor">#0000FF</item>
</style>

<style name="EditText.Filled" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
    <item name="helperTextTextAppearance">@style/Sample.InputLayout.Activate</item>
</style>
```

<img src="https://qiita-image-store.s3.amazonaws.com/0/63740/4b7d6670-47e8-ac8c-e68c-bbcd78e1909b.png" width="300px">

## errorTextColor

`Widget.MaterialComponents.TextInputLayout.FilledBox -> errorTextAppearance`
`TextAppearance.AppCompat.Caption -> android:textColor`

```xml
<style name="Sample.InputLayout.Error" parent="TextAppearance.AppCompat.Caption">
    <item name="android:textColor">#0000FF</item>
</style>

<style name="EditText.Filled" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
    <item name="errorTextAppearance">@style/Sample.InputLayout.Error</item>
</style>
```

<img src="https://qiita-image-store.s3.amazonaws.com/0/63740/506b0485-f7d9-5403-a418-680c02d6184d.png" width="300px">

※ 下線もerrorと同じ色になります。

## bottomBar

`TextInputEditText -> Base.Widget.AppCompat.EditText`
`colorControlNormal / colorControlNormal`

```xml
<style name="EditText.Style" parent="Base.Widget.AppCompat.EditText">
    <item name="colorControlNormal">#0000FF</item>
    <item name="colorControlActivated">#0000FF</item>
</style>
```

```activity_main.xml
<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/input_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginEnd="16dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    style="@style/EditText.Filled">

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/EditText.Style"
        />
</com.google.android.material.textfield.TextInputLayout>
```

<img src="https://qiita-image-store.s3.amazonaws.com/0/63740/aee7947f-6a67-0c5a-70a4-55c8c6813e0a.png" width="300px">

# cornerRadius

`app:boxCornerRadiusTopStart`
`app:boxCornerRadiusTopEnd`
`app:boxCornerRadiusBottomStart`
`app:boxCornerRadiusBottomEnd`

<img src="https://qiita-image-store.s3.amazonaws.com/0/63740/11f65490-68a7-d70a-9a61-62ce9bfa483e.png" width="300px">

# [Outlined text field](https://material.io/design/components/text-fields.html#outlined-text-field) のカスタマイズ

<img width="771" alt="スクリーンショット 2018-10-12 16.42.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/63740/1a737fd8-72ee-37c8-45c7-4c28b0c88176.png">

こちらは、`Widget.MaterialComponents.TextInputLayout.OutlinedBox`をstyle指定してください

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

## boxBackgroudColor

`app:boxBackgroundColor`

<img src="https://qiita-image-store.s3.amazonaws.com/0/63740/d5aa9a82-a3ef-e21c-ba55-50bfdeccc7d6.png" width="300px">

## hintColor

`Widget.MaterialComponents.TextInputLayout.OutlinedBox -> hintTextAppearance`
`TextAppearance.AppCompat.Caption -> android:textColor`

<img src="https://qiita-image-store.s3.amazonaws.com/0/63740/bdb85e96-9086-52de-df31-5053efed7983.png" width="300px">

```xml
<style name="Sample.InputLayout.Activate" parent="TextAppearance.AppCompat.Caption">
    <item name="android:textColor">#0000FF</item>
</style>

<style name="EditText.Boxed" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
    <item name="hintTextAppearance">@style/Sample.InputLayout.Activate</item>
</style>
```

## helperTextColor

`Widget.MaterialComponents.TextInputLayout.OutlinedBox -> helperTextTextAppearance`
`TextAppearance.AppCompat.Caption -> android:textColor`

```xml
<style name="Sample.InputLayout.Activate" parent="TextAppearance.AppCompat.Caption">
    <item name="android:textColor">#0000FF</item>
</style>

<style name="EditText.Filled" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
    <item name="helperTextTextAppearance">@style/Sample.InputLayout.Activate</item>
</style>
```

<img src="https://qiita-image-store.s3.amazonaws.com/0/63740/7e00e868-70de-861c-4ae0-12fb5c635e08.png" width="300px">

## errorTextColor

`Widget.MaterialComponents.TextInputLayout.OutlinedBox -> errorTextAppearance`
`TextAppearance.AppCompat.Caption -> android:textColor`

```xml
<style name="Sample.InputLayout.Error" parent="TextAppearance.AppCompat.Caption">
    <item name="android:textColor">#0000FF</item>
</style>

<style name="EditText.Boxed" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
    <item name="errorTextAppearance">@style/Sample.InputLayout.Error</item>
</style>
```

<img src="https://qiita-image-store.s3.amazonaws.com/0/63740/7407f331-8845-accf-e3bb-89694fbcc228.png" width="300px">

※ アウトラインも同じ色になります。

## boxStrokeColor

`Widget.MaterialComponents.TextInputLayout.OutlinedBox -> boxStrokeColor`

<img src="https://qiita-image-store.s3.amazonaws.com/0/63740/7a8d455a-00c8-de53-27aa-a683ef0ec380.png" width="300px">

## cornerRadius

`app:boxCornerRadiusTopStart`
`app:boxCornerRadiusTopEnd`
`app:boxCornerRadiusBottomStart`
`app:boxCornerRadiusBottomEnd`

<img src="https://qiita-image-store.s3.amazonaws.com/0/63740/64561be6-bc5c-a6f6-8eeb-46da4e58100c.png" width="300px">

# まとめ

MaterialDesignは当初は「ユーザーが様々なプラットフォームでサービスにアクセスしても、同等の価値を得ることができるように」と設計されていたものですが、
徐々に我々デベロッパー向けに、「より開発のしやすい、よりサービスの本質開発に集中できるように」という側面も強くなっており、単純にMDを用いるだけでなく、そのカスタマイズもやりやすくなってきています。

その恩恵にあやかって、もっとより簡単に、よりレベルの高いサービスを作れるように、我々エンジニアもデザインの事を知っておきたいものです。