TextInputLayoutの導入方法と、導入による効果考察

こんにちは。ピクトリンク事業部の古川です。

この記事はフリューAdvent Calendar 2018の12/03分となります。

AndroidのTextInputLayoutについて触れていきます。

TextInputLayoutとは

AndroidのText入力欄をリッチにしてくれるもので、Support Library に含まれています。

Material Design Guidelineはこちら

上の動画のように、入力のヒントがアニメーションして常に表示されるようになってくれます。リッチですよね。

最近だと、オミカレさんのAndroidアプリがTextInputLayoutに対応しています。

導入方法

非常に簡単です。

Support Libraryをimplementする

まずはSuport Libraryを入れます。

dependencies {
//...
    implementation "com.android.support:design:28.0.0"
//...
}

これで準備は完了です。

では実際に使っていきましょう。

レイアウトのXMLを作る

TextInputLayoutを入れる

リッチな入力欄を作るには、TextInputLayoutと一緒にTextInputEditTextを利用します。

<android.support.design.widget.TextInputLayout
 android:id="@+id/textInputLayout"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content">

 <android.support.design.widget.TextInputEditText
 android:id="@+id/userName"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:hint="User Name"
 android:imeOptions="actionSend"
 android:inputType="text"
 android:maxLines="1"
 android:textSize="20sp" />
</android.support.design.widget.TextInputLayout>

導入はこれだけです。

ログイン画面風に入力画面を作ると以下のようになります（レイアウトXML全体）

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.TextInputLayout
        android:id="@+id/textInputLayout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:padding="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <android.support.design.widget.TextInputEditText
            android:id="@+id/userName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="User Name"
            android:imeOptions="actionSend"
            android:inputType="text"
            android:maxLines="1"
            android:textSize="20sp" />
    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:padding="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textInputLayout">

        <android.support.design.widget.TextInputEditText
            android:id="@+id/password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Password"
            android:imeOptions="actionSend"
            android:inputType="text"
            android:maxLines="1"
            android:textSize="20sp" />
    </android.support.design.widget.TextInputLayout>

</android.support.constraint.ConstraintLayout>

実行すると以下のような画面になりました。

導入のまとめ

いかがでしたか？

非常に簡単に導入する事ができました。

入力欄の色はデフォルトで入っていますが、themeをStyleで作成することで自由に変更することも可能です。

色を自由に変えることで、アプリのデザインに違和感なく導入することができます。

導入における効果の考察

以下の２点が大きいと思います。

1. デザインがかっこよくなる
2. 入力ミスが低減される

それぞれ見ていきます。

デザインがかっこよくなる

これは言わずもがな、とは思います。

通常のEditTextだとアニメーションも何もなく、少し固い印象です。

TextInputLayoutの小さなアニメーションを入れることで「かっこいい」「なんか動いてる！」といった体験をユーザーへ与える事ができます。

アニメーションがあると、アプリに対するユーザーの感じ方は大きく変化（向上）します。

これだけでも導入する価値は大きいのではないでしょうか。

入力ミスが低減される

TextInputLayoutとTextInputEditTextを組み合わせることで、ヒントが入力欄上部に常に表示されることになります。

そのため、例えばパスワードのような「入力ルール」を常に見られる状態になります。

結果、「半角英数字８文字以上、大文字含む」といったような複雑なルールを忘れずに、スムーズに入力してもらうことが可能になります。

スムーズ入力できるということは、アプリがストレスフリーで利用できることになります。

ストレスフリーなアプリは評価が向上します。

ちょっとしたデメリット

入力欄を全てTextInputLayout＋TextInputEditTextにする…となると、その分コードは長くなりますし、

実装関係者が知らずにEditTextをそのまま使ってしまう場合があります。

TextInputLayout＋TextInputEditTextを使った独自レイアウトを作っておき、

その独自レイアウトを使うようにルール化すべきなのかもしれません。

まとめ

TextInputLayoutの簡単な導入方法と、導入することにおけるメリットをまとめました。

アニメーションやストレスフリーなアプリはユーザー体験を向上させ、アプリの評価も向上させます。

改善は小さなことからコツコツと！

これからも改善活動を続けていきたいと思います。