Android Studio vector drawable outline in preview window?

Question

Is there a way in Android Studio to show vector drawable outline in preview window, so that you can see how the vectors a drawn on the viewport. That's useful when you for example want to translate the object and want to know if it is clipped because of moving it out of the viewport.

Answer 1

Here is a simple VectorDrawable file.

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

    <path
        android:pathData="M  162   8
        q    -07    00   -41    26
        q    -34    27   -50    64
        q    -25    59   -19   117
        q     07    70    53   121
        q     57    63   151    62
        q     87   -01   140   -66
        q     46   -55    48  -142
        q     01   -56   -34  -105
        q    -38   -52   -77   -70
        l    -29   -11
        q     16   -01    31   -02
        q     59   -01   119   -02    "

        android:strokeLineCap="round"
        android:strokeColor="#f00f"
        android:fillColor="#00000000"
        android:strokeWidth="32"/>




</vector>

Create a blank .xml file in "drawable" folder in Android Studio and then copy this code into that. Then click the file. You will see something like an inverted omega in blue color in the preview window.

Hope this helps you.

For translating it simply you may change the first two coordinates after "M" in pathdata. Instead of M 162, 8 if you make it 862, 8 a part of the image goes off the screen on the right side. The value 162 after M is the value on X axis and 8 is the value on the Y axis. While M moves the path to some point on the screen all other quadratic curves get drawn from that point because all the values in the pathdata are relative and not absolute because those are preceded by "q" and not "Q"(capital). You can also tweak the width, height, viewportWidth and viewportHeight and see how the aspect ratio of the image and the scaling of the image change.