How to place button inside of edit text

Question

I want to place an image button inside of EditText, but I don't have Idea please tell me how to do so as shown in the figure . Thanks

Answer 1

If You dont want click on that Image, Then you can use drawableRight property for EditText..

android:drawableRight="@drawable/icon"

If you want click then use below code.

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

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Enter search key" />

    <ImageButton
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:src="@drawable/search"
        android:layout_centerVertical="true"
        android:layout_margin="5dp"
        android:text="Button"/>

</RelativeLayout>

Answer 2

If you want such layout and also image as clickable then you can do something like this

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

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

    </EditText>
     <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/ic_launcher" />

</RelativeLayout>

Output:

Answer 3

In Material, there is that underline under EditText. In most applications the icons appear inside that underlining.

For that purpose, just use padding

android:paddingEnd = "@dimen/my_button_size"

Don't forget paddingRight for sub 4.2 versions.

<RelativeLayout ....>
   ...
   <EditText
   ...
   android:id="@+id/my_text_edit"
   android:textAlignment = "viewStart"
   android:paddingEnd = "@dimen/my_button_size"
   android:paddingRight = "@dimen/my_button_size"
   .../>

   <ImageButton 
   ....
   android:layout_width="@dimen/my_button_size" 
   android:layout_height="@dimen/my_button_size"
   android:layout_alignEnd="@id/my_text_edit"
   android:layout_alignRight="@id/my_text_edit"/>
   ...
</RelativeLayout>

It will limit the text to the image and the image will not overlap the text, however long the text may be.

Answer 4

My solution will fit all screen sizes without the editText going "behind" the imageButton. This also uses android resources, so you do not need to provide your own icon or string resource. Copy and paste this snippet wherever you would like a search bar:

   <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:orientation="horizontal">

   <EditText
        android:layout_margin="8dp"
        android:id="@+id/etSearch"
        android:hint="@android:string/search_go"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"/>

    <ImageView
        android:id="@+id/ivSearch"
        android:background="@color/transparent_black"
        android:padding="2dp"
        android:layout_width="wrap_content"
        android:layout_margin="8dp"
        android:src="@android:drawable/ic_menu_search"
        android:layout_height="wrap_content"
        tools:ignore="contentDescription" />

</LinearLayout>

Restult:

Answer 5

you can Use the Below Code :

android:drawableRight="@android:drawable/ic_menu_search"

Answer 6

How about placing it in a RelativeLayout like this ?:

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

    <!-- EditText for Search -->
    <EditText android:id="@+id/inputSearch"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:hint="Search whatever..."
            android:textSize="14dp"
            android:textStyle="italic"
            android:drawableLeft="@drawable/magnifyingglass"
            android:inputType="textVisiblePassword"
            android:theme="@style/EditTextColorCustom"/>

         <Button
            android:id="@+id/btn_clear"
            android:layout_width="14dp"
            android:layout_height="14dp"
            android:layout_marginTop="10dp"
            android:layout_alignRight="@+id/inputSearch"
            android:layout_marginRight="5dp"
            android:background="@drawable/xbutton"
            android:visibility="gone"/>
    </RelativeLayout>

Also this way you´ll be able to handle the visibility of the Button (GONE / VISIBLE) in code.

Hope it helps.

Answer 7

Place your EditText inside a linear layout (horizontal) and add a Image Button next to it (0 padding). Setting the background color of EditText and ImageButton will blend in.

Answer 8

I don't know why you want to place ImageButton to achieve, which can be done with simple property of EditText

android:drawableRight="your drawable"

Can't it be work for you?

Answer 9

There's solution with clickable compound drawable. It's working very well - I have tested it

SOLUTION

Answer 10

This is pretty simple I feel. Use relative layout as your parent layout. Place the editText to left and ImageButton to the right using either,

• alignRight property for the ImageButton
• by specifying the layout weight for each of the fields

Answer 11

Use the android:drawableLeft property on the EditText.

<EditText
    ...     
    android:drawableLeft="@drawable/my_icon" />