AndroidのEditTextに画像（アイコン）を追加する方法を解説

このチュートリアルでは、AndroidアプリのEditText内に画像（アイコン）を表示する方法を、サンプルコードとともにわかりやすく解説します。検索ボックスなどでよく見かける「テキスト入力欄の右側に虫眼鏡アイコンが表示される」UIは、android:drawableRight属性を使うだけで簡単に実装できます。

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

まず、Android Studioを起動し、メニューから「File」→「New Project」を選択して新しいプロジェクトを作成します。必要な項目（プロジェクト名、保存先、言語など）をすべて入力して完了させてください。

手順2：activity_main.xmlにEditTextを配置する

次に、「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:paddingEnd="10dp"
        android:background="@drawable/rounded_edittext"
        android:drawableRight="@android:drawable/ic_menu_search" />

</LinearLayout>

コードのポイント

上記のコードでは、EditTextを配置し、以下の2つの設定を行っています。

• android:drawableRight：EditTextの右側にシステム標準の検索アイコン（ic_menu_search）を表示します。独自の画像を使いたい場合は、@drawable/任意の画像名を指定してください。
• android:background：後述のドローアブルファイル「rounded_edittext.xml」を背景として適用し、角丸の枠線を持つ見た目にしています。

手順3：角丸背景用のドローアブルを作成する

続いて、「res/drawable/rounded_edittext.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>

このシェープファイルでは、白背景（#FFFFFF）・青系の枠線（#2f6699）・10dpの角丸を定義しており、EditTextが洗練されたデザインになります。色や角丸のサイズは自由にカスタマイズ可能です。

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

それでは、実際にアプリを動かして結果を確認してみましょう。実機のAndroidスマートフォンをPCに接続している前提で説明します。Android Studioでプロジェクト内のアクティビティファイルを開き、ツールバーの「Run（実行）」アイコンをクリックしてください。デバイス選択画面で接続した端末を選ぶと、スマートフォンの画面にアプリが起動し、以下のように右側に検索アイコン付きのEditTextが表示されます。

まとめ

EditTextへの画像追加は、android:drawableLeft・drawableRight・drawableTop・drawableBottomのいずれかの属性にドローアブルを指定するだけで実現できます。さらに、shapeリソースを組み合わせることで、入力欄のデザインも柔軟にカスタマイズできるので、検索フォームやログイン画面などのUI改善にぜひ活用してみてください。