How to Add Image on EditText in Android?

In Android, An EditText is an overlay over a TextView that makes it editable using text by invoking a soft keyboard in run time. It is generally implemented to collect text data from the user. EditText is most commonly used in forms that require users to fill in details and for passing a search query.

Add Image on EditText

In this article, we will show you how you could add an Image inside an EditText in Android. Follow the below steps once the IDE is ready.

Step by Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. We demonstrated the application in Kotlin, so make sure you select Kotlin as the primary language while creating a New Project.

Step 2: Add an Image in res > drawable folder

Navigate to the app > res > drawable folder and add any image or vector of your choice. In this demonstration, we added a search vector from vector assets. If you are new to adding a vector asset, then refer to the following article that explains creating and adding a vector asset in your Android project: How to Add Vector Assets in Android Studio?

Step 3: Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. Add an EditText as shown below.

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <EditText
        android:id="@+id/edit_text_1"
        android:layout_width="match_parent"
        android:layout_height="50sp"
        android:hint="Type something..."/>

</RelativeLayout>

Method 1: Adding EditText attribute to add a drawable

Add drawableRight attribute to add the image to the right of the EditText.

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <EditText
        android:id="@+id/edit_text_1"
        android:layout_width="match_parent"
        android:layout_height="50sp"
        android:hint="Type something..."
        android:drawableRight="@drawable/ic_baseline_search_24"/>

</RelativeLayout>

Method 2: Working with the MainActivity.kt file

Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.

Kotlin

package org.geeksforgeeks.addimageinedittext

import android.annotation.SuppressLint
import android.graphics.drawable.Drawable
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.EditText

class MainActivity : AppCompatActivity() {
    @SuppressLint("UseCompatLoadingForDrawables")
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // Declaring and initializing the
        // EditText from the layout file
        val mEditText = findViewById<EditText>(R.id.edit_text_1)

        // Initializing the drawable and
        // setting it inside the EditText
        val mDrawable: Drawable = getDrawable(R.drawable.ic_baseline_search_24)!!
        mEditText.setCompoundDrawablesWithIntrinsicBounds(null, null, mDrawable, null)
    }
}

Output:

In both cases, the output is the same as shown below.