¿Cómo agregar una imagen en EditText en Android?

En Android, un EditText es una superposición sobre un TextView que lo hace editable usando texto invocando un teclado virtual en tiempo de ejecución. Generalmente se implementa para recopilar datos de texto del usuario. EditText se usa más comúnmente en formularios que requieren que los usuarios completen detalles y para pasar una consulta de búsqueda.

Agregar imagen en EditText

En este artículo, le mostraremos cómo puede agregar una imagen dentro de un EditText en Android. Siga los pasos a continuación una vez que el IDE esté listo.

Implementación paso a paso

Paso 1: crea un nuevo proyecto en Android Studio

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Demostramos la aplicación en Kotlin, así que asegúrese de seleccionar Kotlin como idioma principal al crear un nuevo proyecto.

Paso 2: agregue una imagen en res> carpeta dibujable

Navegue a la aplicación > res > carpeta dibujable y agregue cualquier imagen o vector de su elección. En esta demostración, agregamos un vector de búsqueda de activos vectoriales. Si es la primera vez que agrega un recurso vectorial, consulte el siguiente artículo que explica cómo crear y agregar un recurso vectorial en su proyecto de Android: ¿Cómo agregar recursos vectoriales en Android Studio?

Paso 3: trabajar con el archivo activity_main.xml

Vaya a la aplicación > res > diseño > actividad_principal.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo activity_main.xml . Agregue un EditText como se muestra a continuación.

<?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>

Método 1: agregar el atributo EditText para agregar un dibujable

Agregue el atributo drawableRight para agregar la imagen a la derecha del EditText.

<?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>

Método 2: trabajar con el archivo MainActivity.kt

Vaya al archivo MainActivity.kt y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.kt . Se agregan comentarios dentro del código para comprender el código con más detalle.

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)
    }
}

Producción:

En ambos casos, la salida es la misma que se muestra a continuación.