TextInputLayoutとは何か、Material DesignとAndroidでの設定

AndroidにおけるTextInputLayoutとは

TextInputLayoutは、com.google.android.material.textfieldパッケージのViewGroupで、LinearLayoutを拡張し、内部にEditTextを含みます。このコンポーネントはAndroid用Material Componentsライブラリの一部で、バージョン1.0.0から利用可能です。TextInputLayoutの主な目的は、開発者の最小限の労力でMaterial Designテキストフィールドの既製実装を提供することです。

標準のEditTextとは異なり、TextInputLayoutは内部のEditTextのandroid:hint属性で設定されるフローティングラベルのアニメーションを管理します。フィールドが空の場合、ラベルは通常のヒントとしてフィールド内に表示されます。ユーザーが入力を開始すると、ラベルはアニメーションでフィールドの上部に移動し、サイズが小さくなります。Material Design Guidelines（2025）によると、このアニメーションはユーザーがデータ入力後も常にフィールド名を確認できるため、フォームの認識性を向上させます。

アーキテクチャ的には、TextInputLayoutはデコレーターパターンを実装しています。EditTextのイベントをインターセプトし、追加要素（ラベル、エラー、アイコン、カウンター）の表示を管理し、それらのアニメーションを調整します。内部のEditTextはgetEditText()メソッドでアクセス可能で、inputType、maxLines、hintなどの標準属性で設定できます。

<!-- Basic TextInputLayout markup -->
@+id/tilEmail
android:layout_width="match_parent"
android:layout_height="wrap_content">

    @+id/etEmail
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Email"
    android:inputType="textEmailAddress" />

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

フローティングラベルとその設定

フローティングラベル（floating label）はTextInputLayoutの主要機能です。フィールドが空の場合、android:hintのテキストが通常のプレースホルダーとしてEditText内に表示されます。フィールドがフォーカスを取得するかテキストが入力されると、ラベルはTextInputLayoutの上部に浮かび上がり、フォントサイズを縮小して色を変更します。この動作により、ユーザーが入力を開始した後にヒントが見えなくなる問題が解決されます。

フローティングラベルの設定はTextInputLayoutの属性で行います。app:hintEnabledはフローティングラベルを有効にするかどうかを決定し（デフォルトtrue）、app:hintAnimationEnabledは遷移アニメーションを有効/無効にし、app:expandedHintEnabledはフィールドが空でフォーカスがない場合でもラベルを表示できるようにします。さまざまな状態でのラベルの色は、colorPrimaryおよびcolorControlHighlightスタイルで管理されます。

Google Material Components Team（2025）によると、フローティングラベルは多くのフィールドがあるフォームで特に有用で、ユーザーが入力を開始した後にフィールド名を忘れる可能性があります。入力時に消える単純なandroid:hintとは異なり、フローティングラベルは常に表示され、各フィールドにコンテキストを提供します。

TextInputLayoutでのエラー表示

TextInputLayoutは、入力フィールドと視覚的に統合された組み込みのエラー表示システムを提供します。setErrorメソッドでエラーを設定すると、コンポーネントはフィールドを強調表示し（線または輪郭の色が赤に変わります）、フィールドの下にエラーテキストを表示します。これにより、エラーメッセージ用の個別のTextViewが不要になります。

エラー表示の管理はsetError(CharSequence)メソッドとsetErrorEnabled(boolean)メソッドで行います。テキストを指定してsetErrorを呼び出すとエラーがすぐに表示され、setError(null)を呼び出すと非表示になります。TextInputLayoutはapp:errorIconDrawable属性によるカスタムエラーアイコンと、app:errorTextColorによるエラー色の管理もサポートしています。

Material Design Guidelines（2025）によると、エラーメッセージは具体的で有用であるべきです。「無効な入力」ではなく「メールには@を含める必要があります」と記述します。エラー表示は入力完了後（フォーカス喪失時またはフォーム送信後）に行うべきで、リアルタイムではありません。これにより、フォーム入力時のユーザーのストレスが軽減されます。

// プログラムによるエラー設定
textInputLayout.error = "Password min 8 chars"

// エラー非表示
textInputLayout.error = null

// 検証エラーのチェックと設定
if (email.isNullOrBlank()) {
    tilEmail.error = "Email is required"
} else {
    tilEmail.error = null
}

TextInputLayoutのアイコンとアクション

TextInputLayoutは、フィールドの先頭（start icon）と末尾（end icon）の両方にアイコンの表示をサポートしています。アイコンはさまざまな機能（パスワードの表示切り替え、フィールドのクリア、カスタムアクション）を実行できます。各アイコンタイプは個別の属性で制御され、app:startIconDrawableまたはapp:endIconDrawable属性でカスタムアイコンに置き換えることができます。

エンドアイコンモードはapp:endIconMode属性で設定され、次の値を取ることができます：password_toggle — パスワードの表示切り替え、clear_text — フィールドのクリア、dropdown_menu — ドロップダウンリスト用の矢印、custom — カスタムアイコン。password_toggleの場合、TextInputLayoutはtextPasswordとtextVisiblePasswordの間でinputTypeを自動的に切り替え、目のアイコンもアニメーションします。

• password_toggle — パスワード表示/非表示用の目のアイコン、組み込みアニメーション。
• clear_text — フィールドクリア用のバツアイコン、テキストがあるときに表示。
• dropdown_menu — Exposed Dropdown Menu（Material Design 3）用の矢印。
• custom — setEndIconOnClickListenerでハンドラを持つ任意のカスタムアイコン。

<!-- TextInputLayout with password toggle icon -->
@+id/tilPassword
android:layout_width="match_parent"
app:endIconMode="password_toggle"
app:passwordToggleTint="@color/primary">

    @+id/etPassword
    android:inputType="textPassword" />

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

TextInputLayoutのスタイル：FilledBoxとOutlinedBox

Android用Material ComponentsはTextInputLayoutに2つの主要スタイルを提供します：FilledBox（塗りつぶし）とOutlinedBox（輪郭線）。FilledBoxスタイルは色付きの背景とフィールド下の線を持ち、フォーカス時に色が変わります。OutlinedBoxスタイルは透明な背景とフィールド全体を囲む輪郭線を持ち、より明確な境界を作り出し、多くのフィールドがあるフォームに適しています。

スタイルの選択はアプリのデザインによって異なります。FilledBoxは頻繁に使用するフォームに推奨され、個々のフィールドへの注意を引きすぎません。OutlinedBoxは各フィールドを明確に示す必要がある短いフォーム（ログイン、登録）に適しています。スタイルはXMLのstyle属性またはアプリのテーマで設定します。

Material Design 3（M3）は、TextInputLayoutに改善されたタイポグラフィ、新しいカラートークン、Material Youのダイナミックカラーサポートを備えた更新スタイルを導入しました。M3ではOutlinedBoxがデフォルトの推奨スタイルとなり、FilledBoxは新しい仕様に合わせてパディングとボーダー半径を調整しました。

TextInputLayoutのコード例

TextInputLayoutを使用した登録フォームの完全な実装例。メールとパスワードの検証、エラー表示、パスワード表示アイコンを含みます。登録ボタンを押すと、すべてのフィールドがチェックされ、対応するエラーメッセージが表示されます。

登録フォームのXMLレイアウト

@+id/tilName
app:boxBackgroundMode="outlined">
    @+id/etName
    android:hint="Name" />
</...TextInputLayout>

@+id/tilRegEmail
app:boxBackgroundMode="outlined">
    @+id/etRegEmail
    android:hint="Email"
    android:inputType="textEmailAddress" />
</...TextInputLayout>

@+id/tilRegPassword
app:boxBackgroundMode="outlined"
app:endIconMode="password_toggle">
    @+id/etRegPassword
    android:hint="Password"
    android:inputType="textPassword" />
</...TextInputLayout>

Kotlinでのフォーム検証

private fun validateForm(): Boolean {
    var isValid = true

    if (etName.text.isNullOrBlank()) {
        tilName.error = "Enter your name"
        isValid = false
    } else {
        tilName.error = null
    }

    val email = etRegEmail.text.toString()
    if (!Patterns.EMAIL_ADDRESS.matcher(email).matches()) {
        tilRegEmail.error = "Invalid email format"
        isValid = false
    } else {
        tilRegEmail.error = null
    }

    val password = etRegPassword.text.toString()
    if (password.length < 8) {
        tilRegPassword.error = "Password min 8 chars"
        isValid = false
    } else {
        tilRegPassword.error = null
    }

    return isValid
}