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

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

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

 

TextInputLayoutとは

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

Material Design Guidelineはこちら

 

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

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

 

導入方法

非常に簡単です。

Support Libraryをimplementする

まずはSuport Libraryを入れます。

これで準備は完了です。

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

レイアウトのXMLを作る

TextInputLayoutを入れる

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

導入はこれだけです。

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

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

textinputlayoutsample-MainActivity-12032018102340

 

導入のまとめ

いかがでしたか?

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

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

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

 

導入における効果の考察

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

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

それぞれ見ていきます。

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

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

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

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

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

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

入力ミスが低減される

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

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

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

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

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

ちょっとしたデメリット

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

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

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

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

 

まとめ

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

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

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

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