Android EditText with icon/button

Question

How can I obtain an EditText as those bellow?

The x button removes the text inserted and the eye button displays the clear password as long as it's pressed. Note that I refer to them as buttons because I don't really know what they actually are nor if they are part of the EditText itself or if they are independent views.

you can use drawableRight in editText for this. search for it and you will find lots of information on it. — Wasim K. Memon, Feb 09 '16 at 10:03
@androidnoobdev thank you for the info; i shall look that up — Ionut Ciuta, Feb 09 '16 at 10:05
http://practicaldroid.blogspot.in/2012/08/how-to-set-drawableright-resource-by.html — IntelliJ Amiya, Feb 09 '16 at 10:13

score 9 · Accepted Answer · edited Aug 06 '17 at 02:31

You can just add a button at the right of your EditText

<FrameLayout
    android:id="@+id/layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    style="@style/ScreenLoginContainer">

    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:id="@+id/edit_text_password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textPassword"
            android:imeOptions="actionDone"
            android:hint="@string/enter_password_hint"
            android:paddingRight="30dp"
            style="@style/ScreenPasswordEditText"/>

    </android.support.design.widget.TextInputLayout>

    <Button
        android:id="@+screen_card_ean_enter/show_password_button"
        style="@style/ShowHidePasswordButton"/>

</FrameLayout>

this was exactly what I was looking for, although I replaced the `button` with an `ImageView` — Ionut Ciuta, Feb 22 '16 at 13:26

score 6 · Answer 2 · answered Feb 09 '16 at 10:10

6

You can use android:drawableRight

Set a Drawable to the right of the text, in EditText, in XML .

android:drawableRight="@drawable/Your_drawable"

answered Feb 09 '16 at 10:10

IntelliJ Amiya

74,896
15
165
198

4

But how would you get the onClick handling? – user2143491 Jan 27 '17 at 13:23
2

@user2143491 You can follow https://stackoverflow.com/a/26269435/3395198 – IntelliJ Amiya Jan 08 '18 at 05:38

score 2 · Answer 3 · edited May 23 '17 at 11:46

2

You can use this : android:drawableRight="@drawable/your_icon" Also for click this answer

may help

edited May 23 '17 at 11:46

Community

1
1

answered Feb 09 '16 at 10:04

invisbo

3,399
1
16
20

score 2 · Answer 4 · answered Feb 09 '16 at 10:07

This is the prefect way to create an EditText with cross button at the end:

<FrameLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="9dp"
android:padding="5dp">

<EditText
    android:id="@+id/calc_txt_Prise"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:inputType="numberDecimal"  
    android:layout_marginTop="20dp"
    android:textSize="25dp"
    android:textColor="@color/gray"
    android:textStyle="bold"
    android:hint="@string/calc_txt_Prise"
    android:singleLine="true" />

<Button
    android:id="@+id/calc_clear_txt_Prise"      
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginRight="10dp"
    android:layout_gravity="right|center_vertical"
    android:background="@drawable/delete" />

And now to clear the EditText upon click you can use

button.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            EditTextID.setText("");
        }
    });

And in order to make the password visible till the button is pressed, you can implement it this way:

yourButton.setOnTouchListener(new OnTouchListener() {
        public boolean onTouch(View v, MotionEvent event) {

               switch ( event.getAction() ) {
                case MotionEvent.ACTION_DOWN: 
                   editText.setInputType(InputType.TYPE_CLASS_TEXT);
                break;
                case MotionEvent.ACTION_UP: 
                    editText.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD);
                break;
                }
                return true;
        }
    });

score 2 · Answer 5 · answered Sep 28 '17 at 05:45

The design support library has a setPasswordVisibilityToggleEnabled method: https://developer.android.com/reference/android/support/design/widget/TextInputLayout.html#setPasswordVisibilityToggleEnabled(boolean)

This would be good for your password edittext, but not the username one.

Android EditText with icon/button

5 Answers5