kako.dev

開発、自作アプリのこと

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

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

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

f:id:h3-birth:20190613011059p:plain:w300

インストール

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

レイアウト

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

この時、TextInputLayoutstyle@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>

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

f:id:h3-birth:20190613011059p:plain:w300

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

エラーの表示

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

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

MainActivity.kt

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

ソースコード全体

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

github.com

以上です。