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

you can Use the Below Code :

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

Answer 2

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 3

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 4

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 5

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 6

Use the android:drawableLeft property on the EditText.

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