Blogフリュー株式会社の技術ブログです2018年12月3日TextInputLayoutの導入方法と、導入による効果考察Androidこんにちは。ピクトリンク事業部の古川です。2018の12/03分となります。AndroidのTextInputLayoutについて触れていきます。Guidelineはこちらhttp://tech.furyu.jp/blog/wp-content/uploads/2018/12/textinputlayout.mp4上の動画のように、入力のヒントがアニメーションして常に表示されるようになってくれます。最近だと、オミカレさんのAndroidアプリがTextInputLayoutに対応しています。Libraryを入れます。"com.android.support:design:28.0.0"//...}これで準備は完了です。実際に使っていきましょう。レイアウトのXMLを作るTextInputLayoutを入れるリッチな入力欄を作るには、TextInputLayoutと一緒にTextInputEditTextを利用します。/></android.support.design.widget.TextInputLayout>導入はこれだけです。/></android.support.design.widget.TextInputLayout></android.support.constraint.ConstraintLayout>実行すると以下のような画面になりました。導入のまとめいかがでしたか?非常に簡単に導入する事ができました。入力欄の色はデフォルトで入っていますが、themeをStyleで作成することで自由に変更することも可能です。色を自由に変えることで、アプリのデザインに違和感なく導入することができます。以下の2点が大きいと思います。デザインがかっこよくなる入力ミスが低減されるそれぞれ見ていきます。デザインがかっこよくなるこれは言わずもがな、とは思います。通常のEditTextだとアニメーションも何もなく、少し固い印象です。TextInputLayoutの小さなアニメーションを入れることで「かっこいい」「なんか動いてる!」といった体験をユーザーへ与える事ができます。アニメーションがあると、アプリに対するユーザーの感じ方は大きく変化(向上)します。これだけでも導入する価値は大きいのではないでしょうか。入力ミスが低減されるTextInputLayoutとTextInputEditTextを組み合わせることで、ヒントが入力欄上部に常に表示されることになります。む」といったような複雑なルールを忘れずに、スムーズに入力してもらうことが可能になります。スムーズ入力できるということは、アプリがストレスフリーで利用できることになります。ストレスフリーなアプリは評価が向上します。実装関係者が知らずにEditTextをそのまま使ってしまう場合があります。TextInputLayout+TextInputEditTextを使った独自レイアウトを作っておき、その独自レイアウトを使うようにルール化すべきなのかもしれません。まとめTextInputLayoutの簡単な導入方法と、導入することにおけるメリットをまとめました。アニメーションやストレスフリーなアプリはユーザー体験を向上させ、アプリの評価も向上させます。改善は小さなことからコツコツと!これからも改善活動を続けていきたいと思います。