Creating TextViews with Drawable and supporting vector images in it

As we know this is the age of vector for android. But there is some constraints even in the latest support libraries. One such is setting vector image for the drawable associated with the text view.

In order to add vector drawable images/icons in the drawable of a text view. We can use the following workaround. Until Android guys don’t come up with the updated libraries.

android:drawableTop="@drawable/ic_wishlist_wrapper"

1

android:drawableTop="@drawable/ic_wishlist_wrapper"

The idea is of adding vector image inside a layer-list or selector drawable and then setting it directly.

Here is the example:

/* ic_wishlist_wrapper.xml */

?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_wishlist"/>
</layer-list>

?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

</layer-list>

/* ic_wishlist.xml */

<?xml version="1.0" encoding="utf-8"?>


<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="32dp"
        android:height="32dp"
        android:viewportHeight="128"
        android:viewportWidth="128">

    <path
        android:fillColor="@android:color/white"
        android:pathData="M99.7,72l-33.4,32c-0.6,0.6-1.5,1-2.4,1s-1.7-0.3-2.4-1L28.2,71.9C27.8,71.5,16,60.8,16,48
c0-15.6,9.6-25,25.6-25C51,23,59.8,30.4,64,34.5C68.2,30.4,77,23,86.4,23c16,0,25.6,9.3,25.6,25C112,60.8,100.2,71.5,99.7,72z"/>
</vector>

<?xml version="1.0" encoding="utf-8"?>

<vector xmlns:android="http://schemas.android.com/apk/res/android"

android:width="32dp"

android:height="32dp"

android:viewportHeight="128"

android:viewportWidth="128">

<path

android:fillColor="@android:color/white"

android:pathData="M99.7,72l-33.4,32c-0.6,0.6-1.5,1-2.4,1s-1.7-0.3-2.4-1L28.2,71.9C27.8,71.5,16,60.8,16,48

c0-15.6,9.6-25,25.6-25C51,23,59.8,30.4,64,34.5C68.2,30.4,77,23,86.4,23c16,0,25.6,9.3,25.6,25C112,60.8,100.2,71.5,99.7,72z"/>

</vector>

and now setting ic_wishlist_wrapper instead of ic_wishlist will do the trick.

Hope this trick works for you and you continue to support more and more VectorDrawables.

Shubham Agarwal 18 December 2016

. . .

Discuss on Helpdesk

1 comments

Bukenya Charles Lusansa Jul 23, 2018 at 12:14 pm

Didn’t work for me

Creating TextViews with Drawable and supporting vector images in it

Leave a Comment Cancel Reply

1 comments

Message Sent!