How to insert an icon in the beginning of a Material Text Field

Question

I am trying to insert an icon in the beginning of a Material Text Field. I couldn't find anything suitable in material.io's documentation as well.

This is what I am trying to achieve.

Labdanum

Does this answer your question? How to position drawable start icon at the start of the material text input layout – Salient

Answer 1

Use a TextInputLayout with the app:startIconDrawable

<com.google.android.material.textfield.TextInputLayout
    android:hint="Select Time"
    app:startIconDrawable="@drawable/ic_add_24px"
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox">

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

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

Note: it requires the version 1.1.0 of the library.

Inevitable

The app:startIconDrawable attribute doesn't work for me. The icon does not show up in design view, and I get an error like this: AAPT: error: attribute app:startIconDrawable not found. Besides this, the material component library seems to work fine. – Nobleminded

@Nobleminded It requires the version 1.1.0 of the Material Components Library – Inevitable

@Gabrielle Mariotti Thanks! I used 1.0.0. Updated to 1.2.0-alpha01, but now I lost the whole material style. All I can see is the default AppCompat style on the layout design. – Nobleminded

@Nobleminded I think that the 1.1.0-beta01 is better. It will become stable in a few weeks. In any case you have to use a Material Component Theme in your app. – Inevitable

@Gabrielle Mariotti I tried 1.1.0-beta01 as well. Same result. I use the material component theme. Everything was fine (except the icon) with 1.0.0. – Nobleminded

@GabrieleMariotti I wonder is there an option to provide startIconDrawable padding? – Goatee

@AnoopM not currently (1.2.1-1.3.0-alpha02) – Inevitable

Answer 2

Use the drawableStart attribute:

https://developer.android.com/reference/android/widget/TextView.html#attr_android:drawableStart

https://developer.android.com/reference/android/widget/TextView.html#setCompoundDrawablesRelativeWithIntrinsicBounds(int,%20int,%20int,%20int)

Grunter

is the question about TextView or Text Field? – Salient

Answer 3

step 1: copy required Text field

Material text field doc : https://material.io/components/text-fields/android#using-text-fields

step 2: select text field -> search "draw" -> Click drawableLeft icon

step 3: Select or Add icon (I'll select vector icon)

Select icon before Finish

Select icon and click OK

Done :)

Encapsulate

Show us the resulting xml code. – Salient