How to place image view beside editTtext view

Question

I did a password visibilty toggle without using textInputLayout (Because I want the default ediText field feel).

How do I place the imageView beside the editText in layout which when clicked does the action for password visibility in my java code?

This is what I currently have..

I want that eye icon placed inside the editText field at the right.

My xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android.support.design="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:gravity="center"
android:background="@color/white"
tools:context=".RegisterActivity"
android:fitsSystemWindows="true"
>
.......
<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" />
    .......
   </LinearLayout>

Not working. Layout distorted, content not showing – Ibramazin Dec 27 '19 at 17:31 — Ibramazin, Dec 27 '19 at 17:31

Heals Legodi · Accepted Answer · 2019-12-27T17:40:45.363

1

[UPDATED RESPONSE] You can use android:drawableRight="@drawable/eye_show" see snippet. That will place image to the right, use android:drawableLeft="@drawable/eye_show" to place image to the left of the EditText

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:android.support.design="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:gravity="center"
    android:background="@color/white"
    tools:context=".RegisterActivity"
    android:fitsSystemWindows="true">

    <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"
       android:drawableRight="@drawable/eye_show" />


    </LinearLayout>


       </LinearLayout>

edited Dec 27 '19 at 17:40

answered Dec 27 '19 at 17:15

Heals Legodi

251
3
6

I did this, didnt work. Image not placed inside the editText as wanted – Ibramazin Dec 27 '19 at 17:31
Working, but how do I handle click event on the image?? the image has onClick attribute which calls my java code to show/hide password. – Ibramazin Dec 27 '19 at 18:15
I have done it using this https://stackoverflow.com/questions/3554377/handling-click-events-on-a-drawable-within-an-edittext?page=1&tab=votes#tab-top – Ibramazin Dec 27 '19 at 19:00
But how do I change the image after clicking the icon - if(password.getTransformationMethod().equals(PasswordTransformationMethod.getInstance())){((ImageView)(view)).setImageResource(R.drawable.eye_hide); } not working - EditText cannot be cast to image view – Ibramazin Dec 27 '19 at 19:01
Never mind. All fixed!!! with editText.setCompoundDrawablesWithIntrinsicBounds(0, 0, R.drawable.drawableRight, 0); – Ibramazin Dec 27 '19 at 19:24

How to place image view beside editTtext view

1 Answers1