6

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.

Image

Gabriele Mariotti
  • 320,139
  • 94
  • 887
  • 841
Ishaan Ohri
  • 187
  • 1
  • 2
  • 9

3 Answers3

6

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>

enter image description here

Note: it requires the version 1.1.0 of the library.

Gabriele Mariotti
  • 320,139
  • 94
  • 887
  • 841
  • 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. – Nekomajin42 Nov 02 '19 at 02:21
  • 1
    @Nekomajin42 It requires the version 1.1.0 of the Material Components Library – Gabriele Mariotti Nov 02 '19 at 09:08
  • @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. – Nekomajin42 Nov 02 '19 at 18:01
  • @Nekomajin42 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](https://github.com/material-components/material-components-android/blob/master/docs/getting-started.md#4-change-your-app-theme-to-inherit-from-a-material-components-theme) in your app. – Gabriele Mariotti Nov 02 '19 at 18:24
  • @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`. – Nekomajin42 Nov 02 '19 at 19:20
  • @GabrieleMariotti I wonder is there an option to provide `startIconDrawable` padding? – Anoop M Maddasseri Sep 03 '20 at 04:23
  • 1
    @AnoopM not currently (1.2.1-1.3.0-alpha02) – Gabriele Mariotti Sep 03 '20 at 05:51
5

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)

dominicoder
  • 9,338
  • 1
  • 26
  • 32
1

step 1: copy required Text field

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

enter image description hereenter image description here enter image description here

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

enter image description here

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

enter image description here enter image description here enter image description here enter image description here

Select icon before Finish enter image description here

Select icon and click OK enter image description here

Done :) enter image description here

Lojith Vinsuka
  • 906
  • 1
  • 10
  • 8