How to place button inside of EditText

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

enter image description here

are you want click on this image? – Niranj Patel Oct 31 '12 at 04:41 — Niranj Patel, Oct 31 '12 at 04:41
use EditText's android:drawableRight="@drawable/ic_search" – Kartik Domadiya Oct 31 '12 at 04:41 — Kartik Domadiya, Oct 31 '12 at 04:41
I have mentioned that this is an image button – Arshad Ali Oct 31 '12 at 05:18 — Arshad Ali, Oct 31 '12 at 05:18

score 61 · Accepted Answer · edited Oct 10 '18 at 19:17

61

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>

edited Oct 10 '18 at 19:17

Kirill Ryabin

193
1
2
15

answered Oct 31 '12 at 04:43

Niranj Patel

32,980
10
97
133

thanks for this reply but I want to the image be like clickable Button – Arshad Ali Oct 31 '12 at 04:48
this works but does not meet to my need because it shows the background color of button and border as well, I only want the transparent image.. – Arshad Ali Oct 31 '12 at 05:14
1

@ArshadAliSoomro use transperant image as background – Niranj Patel Oct 31 '12 at 05:17
No, This layout is wrong. what if we took EditText at the bottom or any random place? – Mohammed Azharuddin Shaikh Oct 31 '12 at 05:29
2

@CapDroid ...If I use your way of designing xml, the user text hides behind the imageview placed on the top. Do you have any idea, how to achieve this with restricting the text to go beyond the limit. – Shail Adi Jun 25 '13 at 06:14
this donot align the image to right of the EditText. – naamadheya Dec 20 '15 at 11:38

Mohammed Azharuddin Shaikh · Answer 2 · 2012-10-31T04:54:40.660

36

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:

enter image description here

edited Oct 31 '12 at 04:54

answered Oct 31 '12 at 04:49

Mohammed Azharuddin Shaikh

41,633
14
96
115

1

how to add click event on this Image, please – Arshad Ali Oct 31 '12 at 05:15
1

Map imageview by id in your Activity class and set Listener to it [See clickListener](http://start-jandroid.blogspot.in/2011/01/android-multiple-screen-example.html) – Mohammed Azharuddin Shaikh Oct 31 '12 at 05:21
how to keep my text from going behind the `ImageView`? – Nezam May 03 '14 at 02:19
3

In your XML for edittext, use `android:singleLine="true"` and `android:paddingRight="50dp"` to prevent your text from going behind the image button on the right – Price Jun 23 '14 at 18:41
There is no "+" in alignTop, alignBottom, and alignRight since you already declared @id/editText1 with a "+" in the EditText itself. – FlorianB Sep 28 '16 at 22:24

score 20 · Answer 3 · answered Jun 02 '16 at 12:12

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.

score 7 · Answer 4 · edited Jun 20 '20 at 09:12

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:

enter image description here

A bunch of thanks for your typical answer, hope in future it will help some newbies and me as well...! But I recommend to use [SearchView](https://developer.android.com/reference/android/support/v7/widget/SearchView.html) — Arshad Ali, Jan 02 '15 at 15:41
i wasted much time in doing this. thank you. how comes android makes our life difficult in doing this kind of simple thing? — DayDayHappy, Feb 08 '17 at 15:38

score 5 · Answer 5 · edited Oct 31 '12 at 04:45

5

you can Use the Below Code :

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

edited Oct 31 '12 at 04:45

Niranj Patel

32,980
10
97
133

answered Oct 31 '12 at 04:43

Bhavesh Patadiya

25,740
15
81
107

score 4 · Answer 6 · answered Aug 31 '16 at 15:56

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.

Hi, it´s just a custom style for the EditText (styles.xml) and the code I use in this particular case is: — Marcos, Jan 16 '17 at 09:04

score 1 · Answer 7 · answered Oct 31 '12 at 04:45

1

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.

answered Oct 31 '12 at 04:45

Mani

186
5

score 1 · Answer 8 · edited Jun 20 '20 at 09:12

1

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

SOLUTION

edited Jun 20 '20 at 09:12

Community

1
1

answered Aug 22 '13 at 11:10

Yorgi

186
3
10

score 1 · Answer 9 · answered Dec 09 '13 at 11:59

1

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

answered Dec 09 '13 at 11:59

Akanksha Hegde

1,738
11
14

live-love · Answer 10 · 2021-03-15T18:49:30.867

In the accepted answer the ripple effect doesn't work, it stays behind the button in the back.

This example has 2 buttons in the textbox. The ripple effect works because the parent layout has

   android:background="@android:color/transparent"

To make sure the ripple works and doesn't stay on the back, set the imagebutton's parent background to transparent.

 <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/transparent"
            android:focusableInTouchMode="true"
            android:layout_margin="4dp">

            <EditText
                android:id="@+id/editText"
                style="@android:style/TextAppearance.Medium"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="2dp"
                android:layout_marginTop="2dp"
                android:layout_marginRight="2dp"
                android:background="@drawable/shape_textbox"
                android:hint="text"
                android:imeOptions="actionDone"
                android:importantForAutofill="no"
                android:inputType="text" />

            <ImageButton
                android:id="@+id/btn1"
                android:layout_width="44dp"
                android:layout_height="44dp"
                android:layout_centerVertical="true"
                android:layout_margin="5dp"
                android:layout_toStartOf="@+id/btn2"
                android:background="?android:selectableItemBackgroundBorderless"
                android:src="@drawable/ic_btn1" />

            <ImageButton
                android:id="@+id/btn2"
                android:layout_width="44dp"
                android:layout_height="44dp"
                android:layout_alignParentEnd="true"
                android:layout_centerVertical="true"
                android:layout_margin="5dp"
                android:background="?android:selectableItemBackgroundBorderless"
                android:contentDescription="@string/clear"
                android:src="@drawable/ic_btn2" />

        </RelativeLayout>

Or you can also wrap your button in a frame layout:

<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@android:color/transparent"
    android:layout_alignParentEnd="true"
    android:layout_centerVertical="true"
    >
<ImageButton ... />
</FrameLayout>

score -1 · Answer 11 · answered Apr 16 '13 at 12:48

-1

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?

answered Apr 16 '13 at 12:48

RobinHood

10,897
4
48
97

OK that may work but my need was to click on the image button and get some action done on it as well! – Arshad Ali Apr 29 '15 at 03:27

score -2 · Answer 12 · edited Oct 31 '12 at 04:45

-2

Use the android:drawableLeft property on the EditText.

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

edited Oct 31 '12 at 04:45

Niranj Patel

32,980
10
97
133

answered Oct 31 '12 at 04:42

Goofy

6,098
17
90
156

How to place button inside of EditText

12 Answers12

Linked

Related