Androidアプリ開発 Material design TextInputLayoutでフォーム画面を作成する

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

Androidアプリ開発では、Material designのTextLayoutを使ってフォーム画面を作成することがきます。
この記事は、AndroidアプリでMaterial designを使ってフォーム画面を作成する方法を記載した記事です。

環境はAndroid 6.0 (API level 23) です。

環境

  • OS X Yosemite
  • android sdk 23
  • Oracle jdk version 1.8.0_72
  • Android Studio 2.1.2

難易度

初心者向け

サンプルコード

Android-Material-Design-Demo

Material design

Material designはAndroid5.0から導入されたデザインです。
Androidに適したUI作成に役立つライブラリです。
AndroidのUIはiphoneとは大きく異なります。このライブラリは、AndroidのUIを学ぶのにも役立ちます。

実装

サンプルとして、以下のようなフォーム画面を作成します。

Sample form

ユーザー名を登録するだけのシンプルなフォームです。
TextInputLayoutを使って作成します。

インストール

Material designをインストールします。

{project_folder}/app/build.gradle
dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:23.4.0'
    +compile 'com.android.support:design:23.4.0'
    compile 'com.android.support:support-v4:23.4.0'
}
        

build.gradleにcompile 'com.android.support:design:23.4.0'を追記します。

XML実装

まずは画面UIのlayout.xmlを記述します。

{project_folder}/app/res/layout/content_main2.xml
<android.support.design.widget.TextInputLayout
    android:id="@+id/sample_form_text_input_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:errorEnabled="true"
    app:counterEnabled="true"
    app:counterMaxLength="10"
    app:hintEnabled="true"
    app:hintAnimationEnabled="true"
    app:counterTextAppearance="@style/counterText"
    app:counterOverflowTextAppearance="@style/counterOverride"
    >

    <EditText
        android:id="@+id/user_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="user name"
        android:imeOptions="actionSend"
        android:inputType="text"
        android:maxLines="1"
        android:singleLine="true" />

</android.support.design.widget.TextInputLayout>
        

EditTextをandroid.support.design.widget.TextInputLayoutで囲みます。

■ 実装の解説

1. xmlns:app="http://schemas.android.com/apk/res-auto"追加

親レイアウトにxmlns:app="http://schemas.android.com/apk/res-auto"を追記します。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    +xmlns:app="http://schemas.android.com/apk/res-auto">
    // 中身
</LinearLayout>
        

この記述でapp:errorEnabled等の、TextInputLayout属性が設定できます。

2. TextInputLayoutの属性設定

TextInputLayoutには様々な属性があります。
以下の属性が設定できます。

■ TextInputLayoutのXML属性

XML RecyclerView
app:errorEnabled true | false エラー表示の有無
app:counterEnabled true | false 文字数カウント表示の有無
app:counterMaxLength 数値 文字カウンタの最大数
app:hintEnabled true | false ヒント表示の有無
app:hintAnimationEnabled true | false ヒントアニメーションの有無
app:counterTextAppearance 文字カウントの色 style.xml
app:counterOverflowTextAppearance 文字カウント下線の色 style.xml

app:counterTextAppearanceとapp:counterOverflowTextAppearanceを利用するためには、style.xmlファイルに以下の記述をします。

{project_folder}/app/res/values/style.xml
<style name="counterText">
    <item name="android:textColor">#aa5353cc</item>
</style>

<style name="counterOverride">
    <item name="android:textColor">#ff0000</item>
</style>
        

これを設定しないと、


java.lang.RuntimeException: Failed to resolve attribute at index 6

        

エラーが発生します。
このエラーは、文字列を最大文字数以上入力すると、アプリがクラッシュします。

コード実装

上記のUIに関する処理をJavaコード側で実装します。

コードは、ActivityかFragmentに記述します。
ここのサンプルでは、Activityに記述します。

{project_folder}/Main2Activity.java
public class Main2Activity extends AppCompatActivity {

    private TextInputLayout mUserNameLayout;
    private EditText mUserNameView;

    private View mLoginFormView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        mUserNameLayout = (TextInputLayout) findViewById(R.id.sample_form_text_input_layout);
        mUserNameView = (EditText) findViewById(R.id.user_name);

        mUserNameView.setOnEditorActionListener(new TextView.OnEditorActionListener() {
            @Override
            public boolean onEditorAction(TextView textView, int id, KeyEvent keyEvent) {
                if (id == EditorInfo.IME_ACTION_SEND) {
                    String user_name = textView.getText().toString();
                    if (TextUtils.isEmpty(user_name)) {
                        mUserNameLayout.setError("This field is required.");
                    } else if (user_name.length() > 10) {
                        mUserNameLayout.setError("This field is less than 10.");
                    } else {
                        mUserNameLayout.setError(null);
                    }
                    return true;
                }
                return false;
            }
        });

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });

    }

}
        

■ 実装の解説

1. validate

@Override
public boolean onEditorAction(TextView textView, int id, KeyEvent keyEvent) {
    if (id == EditorInfo.IME_ACTION_SEND) {
        String user_name = textView.getText().toString();
        if (TextUtils.isEmpty(user_name)) {
            mUserNameLayout.setError("This field is required.");
        } else if (user_name.length() > 10) {
            mUserNameLayout.setError("This field is less than 10.");
        } else {
            mUserNameLayout.setError(null);
        }
        return true;
    }
    return false;
}
        

onEditorActionメソッドでvalidation処理を行っています。
android:imeOptions="actionSend"とEditorInfo.IME_ACTION_SENDが対応しています。

setErrorメソッドでエラーメッセージを設定し、画面に表示します。

Validation Error on the Screen

ビルドして実行

実装を終えたら、ビルドしてアプリを実行します。

Sample App

文字数のカウント、ヒント表示、エラーメッセージの表示ができるリッチなフォームUIが表示されました。

まとめ

android.support.design.widget.TextInputLayoutを利用すると、表現力のあるフォームが作成できます。
WEBアプリのvalidateよりもユーザーフレンドリーで、細かい画面が作成できるので、是非使い方を覚えてください。

関連記事

タグ検索で調べてみよう

Android6.0 UI