How to add an icon at each end of an Edittext?

Asked

Viewed 1,102 times

2

I want to add two icons to Edittext from android according to the image below.

inserir a descrição da imagem aqui

This is the code I’ve used to add the image to the right side.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:tools="http://schemas.android.com/tools"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

            <ImageView
                android:id="@+id/imageView1"
                android:padding="5dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignTop="@+id/editText1"
                android:layout_alignBottom="@+id/editText1"
                android:layout_alignRight="@+id/editText1"
                android:src="@drawable/icon_enter" />

            <EditText
                android:id="@+id/editText1"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:background="@drawable/edittext_bottom_line">

            </EditText>

        </RelativeLayout>

To place the two images in Edittext how should I proceed?

2 answers

1

Taking in your xml will be like this:

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

    <ImageView
        android:id="@+id/imageView1"
        android:padding="5dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/editText1"
        android:layout_alignBottom="@+id/editText1"
        android:layout_alignLeft="@+id/editText1"
        android:src="@mipmap/ic_launcher" />

    <EditText
        android:id="@+id/editText1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true">

    </EditText>

    <ImageView
        android:id="@+id/imageView2"
        android:padding="5dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/editText1"
        android:layout_alignBottom="@+id/editText1"
        android:layout_alignRight="@+id/editText1"
        android:src="@mipmap/ic_launcher" />

</RelativeLayout>

However the images are above Edittext.

If that’s not what you want to use a Linearlayout with horizontal orientation, placing Edittext between the two images.

In Edittext use android:layout_width="0dp" and android:layout_weight="1" so that it has a length equal to the entire width available between the images.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

     <ImageView
         android:id="@+id/button"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:src="@mipmap/ic_launcher"/>

     <EditText
         android:layout_width="0dp"
         android:layout_height="wrap_content"
         android:layout_weight="1"/>

     <ImageView
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:src="@mipmap/ic_launcher"/>

</LinearLayout>

Note: Substitute @mipmap/ic_launcherby the drawables of their images.

1


I set in Edittext itself, in the property android:drawableRight. You can do it that way too:

<EditText
     android:id="@+id/edt_mc_locproduto"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:hint="@string/lbl_loc_produto"
     android:inputType="textCapSentences"
     android:drawableRight="@drawable/ic_mi_pesquisar"
     android:drawableTint="@color/colorPrimary"
     android:imeOptions="actionSearch"
     android:imeActionLabel="Search"/>
  • 1

    This is the correct way to solve the question of the author.

  • 1

    I solved this way, using the two elements drawableLeft and drawableRight. android:drawableLeft="@drawable/icon_cadeado_little" android:drawableRight="@drawable/icon_enter_little"

Browser other questions tagged

You are not signed in. Login or sign up in order to post.