【TextInputLayout】マテリアルな見た目のログインフォームを作る

イケてるログインフォーム欲しい

こんなふうな入力欄タップしたらヒントが上にｸｲｯって上がるやつ。

インストール

implementation 'com.google.android.material:material:1.0.0'

レイアウト

TextInputLayoutの中にTextInputEditTextを配置します。

この時、TextInputLayoutのstyleに@style/Widget.MaterialComponents.TextInputLayout.OutlinedBoxを指定することでボーダーで覆われた見た目になります。

activity_main.xml

<androidx.constraintlayout.widget.ConstraintLayout
    ...

    <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/text_input_layout_email"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="24dp"
            android:layout_marginStart="24dp"
            android:layout_marginEnd="24dp"
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:errorEnabled="true"
            app:hintEnabled="true"
            app:hintAnimationEnabled="true">

        <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/edit_text_email"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/email_hint"
                android:inputType="textEmailAddress"/>

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

    ...

これをパスワード分も同様に追加します。（コードは省略）

colors.xml

デフォルトだと緑と赤のフォームになるのでちょっと色味も変えましょう。

    <color name="colorPrimary">#1E88E5</color>
    <color name="colorPrimaryDark">#AAAAAA</color>
    <color name="colorAccent">#1E88E5</color>

見た目ができるとこんな風になります。

見た目だけで言えばこれで完成ですね。

エラーの表示

バリエーションやメールパスワードの照合判定でエラーを出す必要があります。

TextInputLayoutは簡単にエラーを表示できます。

MainActivity.kt

val emailTextInputLayout = findById(R.id.text_input_layout_email)
emailTextInputLayout.error = "メールアドレスを入力してください。"

ソースコード全体

こちらにアップしております。↓

github.com

以上です。