【Android】EditTextにアイコン画像（ImageView）を設定する方法をわかりやすく解説

この記事では、Androidアプリ開発においてEditText内にアイコン画像を表示する方法を、具体的な手順とサンプルコード付きで解説します。検索ボックスなど、入力欄の左側に虫眼鏡アイコンを配置したい場合に役立つテクニックなので、ぜひ参考にしてください。

手順1：Android Studioで新規プロジェクトを作成する

まず、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"
    android:orientation="vertical"
    android:gravity="center"
    android:layout_marginTop="30dp"
    tools:context=".MainActivity">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:paddingStart="5dp"
        android:background="@drawable/rounded_edittext"
        android:drawableStart="@android:drawable/ic_menu_search"
        android:paddingLeft="5dp" />
</LinearLayout>

上記のコードでは、EditTextを1つ配置し、背景として後述する「background.xml」（角丸デザイン）を適用しています。

ここでのポイントは android:drawableStart 属性です。この属性にシステム標準の検索アイコン「ic_menu_search」を指定することで、EditTextの先頭（左側）に画像を表示できます。これがEditTextにアイコンを設定する最もシンプルな方法です。

手順3：drawableフォルダにbackground.xmlを作成する

続いて、「res/drawable/background.xml」に以下のコードを追加します。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="https://schemas.android.com/apk/res/android">

    <solid android:color="#FFFFFF" />

    <stroke
        android:width="1dp"
        android:color="#2f6699" />

    <corners
        android:radius="10dp" />
</shape>

このshapeリソースを適用することで、EditTextは「白背景＋青系の枠線（#2f6699）＋10dpの角丸」というスタイリッシュな見た目になります。色や角丸の大きさは、自分のアプリのデザインに合わせて自由に調整可能です。

アプリを実行して動作を確認する

それでは、実際にアプリケーションを実行してみましょう。実機のAndroidスマートフォンをパソコンに接続していることを前提に説明します。Android Studioでプロジェクトのアクティビティファイルを開き、ツールバーの「Run」アイコンをクリックしてください。接続したモバイルデバイスを選択すると、端末の画面に以下のように表示されます。