Left Icon in TextInputLayout

Question

I'm trying to add an Left Icon to my TextInputLayout, but text get over the Icon. When I add a padding, everything move together.

I tried with

 android:drawableLeft="@drawable/ic_store_white_48dp"
 android:drawablePadding="50dp"
 android:drawableStart="@drawable/ic_store_white_48dp"

But it is not working ! I should implement a LinearLayout horizontal for each row, but I would like to be sure there is no easier way to do it

Here is my code layout:

        <android.support.design.widget.TextInputLayout
            android:id="@+id/til_calle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">


            <EditText
                android:id="@+id/et_calle"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:drawableLeft="@drawable/ic_store_white_48dp"
                android:drawablePadding="50dp"
                android:drawableStart="@drawable/ic_store_white_48dp"
                android:hint="Calle"
                android:inputType="text" />

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

Answer 1

Make sure you are using the latest Design library, all you need for both Design and AppCompat is:

compile 'com.android.support:design:23.2.0'

Try using both the Design's library TextInputLayout and AppCompat's AppCompatEditText.

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:textColor="@android:color/white"
    android:textColorHint="@color/loginHint">

    <android.support.v7.widget.AppCompatEditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:imeOptions="actionNext"
        android:inputType="textEmailAddress|textNoSuggestions"
        android:minWidth="350dp"
        android:drawableLeft="@drawable/ic_store_white_48dp"
        android:drawableStart="@drawable/ic_store_white_48dp"
        android:textColor="@android:color/white"
        android:textColorHint="@color/loginHint"
        android:textCursorDrawable="@null"
        app:backgroundTint="@android:color/white"/>
</android.support.design.widget.TextInputLayout>

Answer 2

Yes. Currently its a bug on Layout. You can try giving leftPadding to EditText or give some blank_spaces before the text.

Answer 3

With the Material Components library you can change the left icon in the TextInputLayout using the app:startIconDrawable attribute.

Something like:

    <com.google.android.material.textfield.TextInputLayout
        android:hint="Hint text"
        app:startIconDrawable="@drawable/ic_add_24px"
        ...>

        <com.google.android.material.textfield.TextInputEditText/>

    </com.google.android.material.textfield.TextInputLayout>

Answer 4

If you are using material input layout so you just need to add one line in input layout's xml code

app:startIconDrawable="@drawable/ic_baseline_content_paste_24"

Answer 5

This is a bug that was reported on Android's Issue Tracker

https://code.google.com/p/android/issues/detail?id=225836

and it's now been fixed on the latest release of the Design Support Library (v25.0.1). Just add the required dependency to the build gradle...

dependencies {
    compile 'com.android.support:design:25.0.1'
}

Answer 6

It is simple, when adding passwordToggleEnabled it automatically adding the eye icon on the right and the drawableLeft was gone. so you have to remove the drawableLeft and just use the drawableStart.

<android.support.design.widget.TextInputLayout
        android:id="@+id/til_calle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

      <EditText
            android:id="@+id/et_calle"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:drawablePadding="50dp"
            android:drawableStart="@drawable/ic_store_white_48dp"
            android:hint="Calle"
            android:inputType="text" />

Answer 7

Using material library, you can set custom icon using endIconMode="custom":

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/date_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:endIconMode="custom"
    app:endIconDrawable="@drawable/ic_calendar">

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/date_end"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="none"
        android:textSize="14sp"
        tools:text="30 feb" />

</com.google.android.material.textfield.TextInputLayout>

Answer 8

Here is my code layout:

 <android.support.design.widget.TextInputLayout
            android:id="@+id/input_layout_username"
            android:layout_width="match_parent"

            android:layout_height="wrap_content">

            <EditText
                android:id="@+id/input_username"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:singleLine="true"
                android:drawableLeft="@drawable/icon_user"
                android:drawableStart="@drawable/icon_user"
                android:drawablePadding="10dp"
                android:hint="User Name" />
        </android.support.design.widget.TextInputLayout>

android:drawablePadding="10dp"

Its work