How to set TextInputLayout startIcon to VectorDrawable with multiple paths

Question

I'm unable to set the Android Material TextInputLayout startIcon to a VectorDrawable with multiple paths.

Here's the VectorDrawable's XML

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <path
        android:fillColor="#FFF"
        android:pathData="M12,12m-10,0a10,10 0,1 1,20 0a10,10 0,1 1,-20 0" />
    <path
        android:fillColor="#000"
        android:pathData="M11,13H13V15H11M11,9H13V11H11M11,17H13A2,2 0 0,0 15,15V13.5A1.5,1.5 0 0,0 13.5,12A1.5,1.5 0 0,0 15,10.5V9A2,2 0 0,0 13,7H11A2,2 0 0,0 9,9V10.5A1.5,1.5 0 0,0 10.5,12A1.5,1.5 0 0,0 9,13.5V15A2,2 0 0,0 11,17M12,1C5.92,1 1,5.92 1,12C1,18.08 5.92,23 12,23C18.08,23 23,18.08 23,12C23,5.92 18.08,1 12,1M12,19A7,7 0 0,1 5,12A7,7 0 0,1 12,5A7,7 0 0,1 19,12A7,7 0 0,1 12,19Z" />
</vector>

It looks like an 8-ball in the Android Studio preview, but when it loads it's just a gray circle.

I've tried making a LayerList with two separate VectorDrawables, loading the images programmatically and through XML, but none of that worked. The image loads fine into an ImageView. Thanks for any help I can get.

Answer 1

You can solve this by setting it programmatically using the resource identifier of the start icon drawable of the TextInputLayout which is text_input_start_icon.

To get the resource integer ID use: getIdentifer() of the Resources class.

val startIconViewId = resources.getIdentifier(
    "text_input_start_icon", "id",
    packageName
)
val textInputLayout = findViewById<TextInputLayout>(R.id.my_text_input_layout)
val startIconDrawable: CheckableImageButton = textInputLayout.findViewById(startIconViewId)

val view = View(this)
view.setBackgroundResource(R.drawable.my_vector_drawable)
startIconDrawable.setBackground(view.background)

But you also must keep app:startIconDrawable set in the xml layout.

Do you know how to change the size? Changing the XML height and width isn't working. Also, having the startIconDrawable set in XML is causing both icons to appear on my device.

You can change the height & width of the CheckableImageButton itself.

val layoutParams = startIconDrawable.layoutParams
layoutParams.height = 100
layoutParams.width = 100
startIconDrawable.setBackground(view.background)

Result: