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.

Solution 1

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>

Solution 2

You can use android:drawableRight

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

android:drawableRight="@drawable/Your_drawable"

Solution 3

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.

Solution 4

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

may help

Solution 5

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;
        }
    });

View more solutions

Comments

[Ionut Ciuta]

this was exactly what I was looking for, although I replaced the button with an ImageView

[user2143491]

But how would you get the onClick handling?

[IntelliJ Amiya]

@user2143491 You can follow stackoverflow.com/a/26269435/3395198