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 Dec, 2016
Updated by - Shubham Agarwal
14 Oct, 2016
Created by - Shubham Agarwal

. . .

1 comments

Bukenya Charles Lusansa 6 years ago

Didn’t work for me

Creating TextViews with Drawable and supporting vector images in it

Leave a Comment Cancel Reply

1 comments

Message Sent!