AndroidのTextInputLayoutの実装方法を徹底解説

Android TextInputLayoutとは

実装方法に入る前に、まずAndroidにおけるTextInputLayoutについて簡単に説明します。TextInputLayoutはLinearLayoutを継承したウィジェットで、EditText(入力フィールド)のラッパーとして機能します。最大の特徴は、ユーザーがテキストを入力し始めると、ヒント(hint)がアニメーションしながらフローティングラベルとして上部に移動する点です。また、エラーメッセージの表示やカウンター表示など、入力フォームに必要な機能を簡単に実現できる便利なコンポーネントです。

本記事では、実際のコード例を通じて、AndroidアプリにTextInputLayoutを実装する手順をステップごとに解説します。

ステップ1:新規プロジェクトの作成

まず、Android Studioで新しいプロジェクトを作成します。メニューから「File」→「New Project」を選択し、必要な項目をすべて入力してプロジェクトを作成しましょう。

ステップ2:レイアウトファイル(activity_main.xml)の編集

次に、res/layout/activity_main.xmlに以下のコードを追加します。

<?xml version = "1.0" encoding = "utf-8"?>
<LinearLayout xmlns:android = "https://schemas.android.com/apk/res/android"
    xmlns:tools = "https://schemas.android.com/tools"
    android:layout_width = "match_parent"
    android:layout_height = "match_parent"
    tools:context = ".MainActivity"
    android:background = "#dde4dd"
    android:orientation = "vertical">
    <android.support.design.widget.TextInputLayout
        android:layout_width = "match_parent"
        android:layout_height = "wrap_content"
        android:id = "@+id/layoutEmail"
        android:layout_marginTop = "8dp"
        android:layout_marginStart = "8dp"
        android:layout_marginEnd = "8dp"
        style = "@style/Widget.MaterialComponents.TextInputLayout.FilledBox">
        <android.support.design.widget.TextInputEditText
            android:layout_width = "match_parent"
            android:layout_height = "wrap_content"
            android:id = "@+id/email"
            android:hint = "Enter Email id"
            android:inputType = "textEmailAddress"/>
    </android.support.design.widget.TextInputLayout>
    <android.support.design.widget.TextInputLayout
        android:layout_width = "match_parent"
        android:layout_height = "wrap_content"
        android:id = "@+id/layoutPassword"
        android:layout_marginTop = "8dp"
        android:layout_marginStart = "8dp"
        android:layout_marginEnd = "8dp"
        style = "@style/Widget.MaterialComponents.TextInputLayout.FilledBox">
        <android.support.design.widget.TextInputEditText
            android:layout_width = "match_parent"
            android:layout_height = "wrap_content"
            android:id = "@+id/password"
            android:hint = "Password"
            android:inputType = "textPassword"/>
    </android.support.design.widget.TextInputLayout>
    <Button
        android:id = "@+id/click"
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content"
        android:layout_gravity = "center"
        android:text = "Click"></Button>
</LinearLayout>

このレイアウトでは、メールアドレス用とパスワード用の2つのTextInputEditTextと、1つのボタンを配置しています。ボタンをタップすると、入力されたデータを取得してToastで表示する仕組みです。

ステップ3:MainActivity.javaの編集

続いて、src/MainActivity.javaに以下のコードを記述します。

package com.example.andy.myapplication;

import android.graphics.Point;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.TextureView;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    EditText email,password;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        email = findViewById(R.id.email);
        password = findViewById(R.id.password);
        Button click = findViewById(R.id.click);
        click.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(!email.getText().toString().isEmpty()&&(!password.getText().toString().isEmpty())) {
                    Toast.makeText(MainActivity.this, "you have entered email id " +
                                    email.getText().toString() + "Password " + password.getText().toString(), Toast.LENGTH_LONG).show();
                } else {
                    email.setError("Please Enter Email id");
                    password.setError("Please Enter Pass word");
                }
            }
        });
    }
}

このコードでは、ボタンがクリックされたときにメールアドレスとパスワードの両方が入力されているかどうかを判定しています。両方に入力があれば内容をToastで表示し、空欄がある場合はsetError()メソッドを使って各フィールドにエラーメッセージを表示します。これにより、TextInputLayoutのエラー表示機能も確認できます。

ステップ4:build.gradleに依存関係を追加

最後に、build.gradleファイルを開き、designサポートライブラリの依存関係を追加します。

apply plugin: 'com.android.application'
android {
    compileSdkVersion 28
    defaultConfig {
        applicationId "com.example.andy.myapplication"
        minSdkVersion 15
        targetSdkVersion 28
        compileSdkVersion 28
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}
dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:28.0.0'
    implementation 'com.android.support:design:28.0.0'
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
}

ここで重要なのは「com.android.support:design:28.0.0」という行です。TextInputLayoutはdesignライブラリに含まれているため、この依存関係がないとビルド時にエラーが発生します。

アプリの実行と動作確認

それではアプリを実行してみましょう。実機のAndroidスマートフォンをPCに接続している前提で説明します。Android Studioからプロジェクト内のいずれかのアクティビティファイルを開き、ツールバーの「Run」アイコンをクリックしてください。デバイス一覧から接続したモバイル端末を選択すると、端末上でアプリが起動します。

上の画像はアプリ起動時の初期画面です。次に、メールアドレスとパスワードを入力してボタンをタップしてみましょう。

入力済みの場合は、入力した内容がToastとして表示されます。逆に、入力欄をすべて空にしてボタンをタップすると、以下のようにエラーメッセージが表示されます。

まとめ

今回は、Material Design準拠の入力フォームを簡単に作成できるTextInputLayoutの基本的な実装方法を紹介しました。フローティングヒントやエラー表示などの機能を活用することで、ユーザーにとって分かりやすく使いやすいフォームUIを構築できます。ぜひ自分のプロジェクトにも取り入れてみてください。