CODEWITHSUNDEEP
javaandroidxml
Ibramazin
Ibramazin

Reputation: 1018

How to place an ImageView beside EditText password input field

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

Password visibility

This is what I want

Password

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" />

Upvotes: 0

Views: 454

Answers (3)

Karan Rawat
Karan Rawat

Reputation: 1

<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" />

Upvotes: 0

user13947473
user13947473

Reputation: 1

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>

Upvotes: 0

Skrilltrax
Skrilltrax

Reputation: 11

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

Upvotes: 1

Related Questions