How to place an ImageView beside EditText password input field

Question

I am trying to do password visibility toggle in password field using EditText TextView (I dont want to use the android support TextInputLayout)

Everything working but how do I pace the ImageView In the right position beside the password EditText field.

This is what I have now

This is what I want

I want the image to be at that position inside the password EditText field.

My layout file

 <EditText
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:id="@+id/etPassword"
    android:layout_marginRight="20dp"
    android:inputType="textPassword"
    android:layout_marginLeft="20dp"
    android:layout_marginBottom="20dp"
    android:paddingLeft="20dp"
    android:background="@drawable/input_border"
    android:hint="Your Password" />

<ImageView
    android:id="@+id/show_pass_btn"
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:layout_alignParentRight="true"
    android:layout_centerVertical="true"
    android:layout_marginRight="5dp"
    android:alpha=".5"
    android:onClick="ShowHidePass"
    android:padding="5dp"
    android:src="@drawable/eye_show" />

`I dont want to use the android support TextInputLayout)` why?. its easy. — IntelliJ Amiya, Dec 25 '19 at 16:27
@IntelliJAmiya looks so different from the normal editText field which I prefer. — Ibramazin, Dec 25 '19 at 16:41
I have done the java code just looking for a way to place that image beside the editText field — Ibramazin, Dec 25 '19 at 16:42
@Ibramazin What you are looking for is exactly a TextInputLayout. Just use the right style — Gabriele Mariotti, Dec 25 '19 at 19:47
TextInputLayout have that functionality https://stackoverflow.com/a/44173975/4017501 — cutiko, Dec 25 '19 at 20:07
Is there a way of making textInputLayout to look like the normal editText without the material input field and floating label just normal editText? @cutiko — Ibramazin, Dec 27 '19 at 08:11

score 1 · Answer 1 · answered Dec 25 '19 at 19:34

I would like to suggest two solutions. I am using the second one myself

First: By adding a drawable to an EditText

You can add an icon to the EditText like this:

    <EditText
        ...
        android:drawableEnd="@drawable/ic_settings_24dp"
        ...
    />

and then add a listener to it like this: Handling click events on a drawable within an EditText

Second: By extending TextInputLayout

I was having the same issue so what i did was to create a view class that extends TextInputLayout. That way the material theme does not apply the filled box style by default and you still get all the TextInputLayout goodness.

import android.content.Context
import android.util.AttributeSet
import com.google.android.material.textfield.TextInputLayout

class CustomTextInputLayout @JvmOverloads constructor(
        context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
): TextInputLayout(context, attrs, defStyleAttr) {

}

    <com.passwordstore.android.ui.views.CustomTextInputLayout
        android:id="@+id/til_notes"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:hint="@string/notes"
        app:endIconMode="clear_text"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/btn_generate_password"
        style="@style/BoxTextInputLayout">
        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fontFamily="@font/poppins_medium" />
    </com.passwordstore.android.ui.views.CustomTextInputLayout>

And here's the result

Old EditText design with TextInputLayout

Not sure why you try to reinvent the wheel - TextInputLayout does that out of the box — Marcin Orlowski, Dec 25 '19 at 19:39
Yeah i am still using TextInputLayout however it applies a default FilledBox style to the EditText. I don't know any way to disable that style so i wrapped the TextInputLayout in a custom class. That way the AppTheme doesn't add the material style to it. — Skrilltrax, Dec 25 '19 at 19:47
No reason to extend the TextInputLayout in this way. Just change the style — Gabriele Mariotti, Dec 25 '19 at 19:49
Tried all the available styles for TextInputLayout, None seems to work though. Do you have any idea which style gives back the old EditText design ? — Skrilltrax, Dec 25 '19 at 19:56

user13947473 · Answer 2 · 2020-07-17T10:37:22.083

You can use app:passwordToggleEnabled="true" in TextInputLayout and, if you also need to give custom icon use, "app:passwordToggleDrawable="

      <com.google.android.material.textfield.TextInputLayout
                            android:layout_width="match_parent"
                            android:layout_height="50dp"
                            app:passwordToggleEnabled="true">
        
                            <com.google.android.material.textfield.TextInputEditText
                                android:id="@+id/ed_password"
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"  
                                android:gravity="center_vertical"
                                android:hint="Password"
                                android:imeOptions="actionNext"
                                android:inputType="textPassword"
                                android:textSize="16sp"
                                android:padding="10dp" />
        
        
                        </com.google.android.material.textfield.TextInputLayout>

score 0 · Answer 3 · answered Sep 22 '20 at 10:33

<EditText
    android:id="@+id/loginPassword"
    android:layout_width="325dp"
    android:layout_height="53dp"
    android:layout_marginTop="20dp"
    android:background="@drawable/et_style"
    android:hint="Password"
    android:inputType="textPassword"
    android:paddingLeft="8dp"
    android:textColorHint="@color/colorOrange"
    android:textSize="20sp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/loginUsername" />

<ImageView
    android:id="@+id/password_toggle_img"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="15dp"
    android:layout_marginEnd="12dp"
    android:layout_marginRight="12dp"
    app:layout_constraintBottom_toBottomOf="@id/loginPassword"
    app:layout_constraintEnd_toEndOf="@+id/loginPassword"
    app:layout_constraintTop_toTopOf="@+id/loginPassword"
    app:layout_constraintVertical_bias="0.0"
    app:srcCompat="@drawable/ic_baseline_visibility_24"
    tools:ignore="VectorDrawableCompat" />

While this code may solve the question, [including an explanation](//meta.stackexchange.com/q/114762) of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please [edit] your answer to add explanations and give an indication of what limitations and assumptions apply. — Adrian Mole, Sep 22 '20 at 12:42

How to place an ImageView beside EditText password input field

3 Answers3

First: By adding a drawable to an EditText

Second: By extending TextInputLayout