Androidアプリ開発 Material design TextInputLayoutをカスタマイズする

2016年10月26日(編集2016年10月26日)
このエントリーをはてなブックマークに追加

Androidアプリ開発で利用するMaterial designのTextInputLayoutはカスタマイズできます。
この記事は、AndroidアプリでMaterial designのTextInputLayoutをカスタマイズする方法を記載した記事です。

環境はAndroid 7.1.1 (API level 25) です。

環境

  • OS X Yosemite
  • android sdk 25
  • Oracle jdk version 1.8.0_72
  • Android Studio 2.2.2

難易度

初心者向け

サンプルコード

Android-Service-Demo

TextInputLayout

TextInputLayoutはMaterial designで導入された入力テキスト用のレイアウトオブジェクトです。
入力項目を作成するのに役立ちます。

TextInputLayoutを使った画面

フォーカス時の色を変更

まずは、フォーカス時の色を変更します。

フォーカス時の下線の色

フォーカス時のデフォルトカラーはピンクです。これを青色に変えます。

styles.xmlにWidget.Design.TextInputLayoutを継承したstyleを作成します。
そして、colorControlActivated属性に色を指定します。

{project_folder}/res/values/styles.xml
    <style name="MyTheme.Design.TextInputLayout" parent="Widget.Design.TextInputLayout">
        <item name="colorControlActivated">#03A9F4</item>
    </style>
        

この新しいstyleを、レイアウトxmlのandroid.support.design.widget.TextInputLayoutに適用します。

{project_folder}/res/values/styles.xml
    <android.support.design.widget.TextInputLayout
        android:id="@+id/username_text_input_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:errorEnabled="true"
        app:counterEnabled="true"
        app:counterMaxLength="@integer/username_max_count"
        app:hintEnabled="true"
        app:hintAnimationEnabled="true"
       +app:theme="@style/MyTheme.Design.TextInputLayout">
        

ビルドして表示します。

changed colorControlActivated screen

色が変更されました。

通常時のEditTextの下線色を変更

通常時のデフォルトカラーは灰色です。

TextInputLayoutを使った画面

これを黄色に変えます。

上記で作成した新しいstyleを利用します。
そして、colorControlNormal属性に色を指定します。

{project_folder}/res/values/styles.xml
    <style name="MyTheme.Design.TextInputLayout" parent="Widget.Design.TextInputLayout">
       +<item name="colorControlNormal">#E6FF00</item>
        <item name="colorControlActivated">#03A9F4</item>
    </style>
        

ビルドして表示します。

changed colorControlActivated screen

色が変更されました。

Hintの色を変更

通常時のデフォルトカラーは灰色です。

TextInputLayoutを使った画面

これを緑に変えます。

上記で作成した新しいstyleを利用します。
そして、android:textColorHint属性に色を指定します。

{project_folder}/res/values/styles.xml
    <style name="MyTheme.Design.TextInputLayout" parent="Widget.Design.TextInputLayout">
       +<item name="android:textColorHint">#E6FF00</item>
        <item name="colorControlNormal">#E6FF00</item>
        <item name="colorControlActivated">#03A9F4</item>
    </style>
        

ビルドして表示します。

changed colorControlActivated screen

色が変更されました。

まとめ

android.support.design.widget.TextInputLayoutを利用すると、表現力のあるフォームが作成できます。
デフォルトでも強力ですが、アプリに応じたカスタマイズをして、より良いアプリを作成しましょう。

関連サービス

Validation View Generator

関連記事

タグ検索で調べてみよう

Android7.0 UI