Search code examples
androidandroid-layoutcompound-drawables

How to embed icon inside textfield in android?


I am trying to implement a password field with an eye icon inside of it.
I am using <android.support.design.widget.TextInputLayout> for animation purposes.

The eye icon however keeps on displaying under the EditText.

Here is my code:

<android.support.design.widget.TextInputLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="5dp"
                android:layout_marginTop="5dp">

                <EditText
                    android:id="@+id/input_password"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="Password"
                    android:inputType="textPassword" />

                <ImageView
                    android:id="@+id/fragment_login_password_visibility"
                    android:layout_height="wrap_content"
                    android:layout_width="wrap_content"
                    android:layout_alignRight="@+id/fragment_login_password"
                    android:clickable="true"
                    android:src="@drawable/ic_show_password" />

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

Any help is highly appreciated.


Solution

  • Add android:drawableLeft="@drawable/ic_show_password" to your EditText.
    And get rid of the ImageView.

    You can use compound drawables to put an icon to the left (as in my example), to the right, top and/or bottom of a View.