Is there a way to preview a vector drawable

Question

Short of building and installing my app, is there a way to preview a vector drawable xml file?

I've built it into a small test app in Android Studio, and can preview it as part of the layout file, but I was hoping for a simpler way.

Edit: here's what my drawable.xml file looks like:

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">

    <group>
        <path
            android:fillColor="#f5a625"
            android:strokeColor="#000000"
            android:strokeWidth=".5"
            android:pathData="M0,0l18,0l6,6l0,10l-24,0z" />
    </group>
</vector>

No, the browser only shows me the xml – Edward Falk Oct 12 '15 at 23:23 — Edward Falk, Oct 12 '15 at 23:23

dasar · Accepted Answer · 2017-11-06T12:30:22.623

145

There is a Preview tab especial for that at the right side (since Android Studio 2.0):

edited Nov 06 '17 at 12:30

answered Feb 28 '16 at 16:22

dasar

5,321
4
24
36

This `Preview` tab doesn't exist anymore. The functionality is now integrated within the window itself. You can choose to switch Between `Code`, `Split` and `Design`. However it only shows these buttons if the vector drawable is used in the currently selected build variant. The only way I could see a preview for other build variants, was to switch to that specific build variant. – Wirling Feb 22 '21 at 14:00

score 16 · Answer 2 · answered Apr 23 '17 at 20:53

16

If the Preview window doesn't automatically show. You can manually show the Preview window by going to View -> Tool Windows -> Preview in Android Studio's menu.

answered Apr 23 '17 at 20:53

Jade

3,156
1
34
44

3

I don't see this – hmac May 22 '20 at 09:57

score 15 · Answer 3 · answered May 29 '18 at 19:41

15

There is a way to preview all the vector drawables in your project at the same time using the Android Studio plugin at https://plugins.jetbrains.com/plugin/10741-vector-drawable-thumbnails

just go to Settings -> Plugins -> Browse Repositories and search for "Vector Drawable Thumbnails"

answered May 29 '18 at 19:41

Ignacio Tomas Crespo

3,401
1
20
13

1

This is what I was looking for. Thanks! – André Luiz Reis Aug 02 '18 at 16:03
This plugin make a preview of all available drawable in project. With a convenience access by sidebar. – nyconing Dec 06 '18 at 03:43
nice, just what I needed – ILovemyPoncho Jan 31 '23 at 03:25

score 3 · Answer 4 · answered Oct 13 '15 at 05:23

3

Android Studio 1.4 lets you preview VectorDrawables. Just double-click on them in your res/drawable folder.

answered Oct 13 '15 at 05:23

Paul LeBeau

97,474
9
154
181

When I do that, I just see the XML. Any idea what I'm missing? – Edward Falk Oct 13 '15 at 17:49
It didn't show the preview for me at first either, but by going to another file and then going back to the vector drawable the preview showed up. The tab might also be minimized: look for the 'Preview' tab on the right hand side. – jguerinet Oct 23 '15 at 20:03
1

it would be nice if it was possible to preview all of them together like in finder/explorer. We often need to search through icons to find the one we need and it's not ideal to double click on each one – Carson Holzheimer Apr 12 '18 at 01:54

score 3 · Answer 5 · answered Sep 15 '22 at 22:22

3

My solution for this was: right click on the .xml file, then click "Open in Right Split". The preview should appear on the right side of the code.

answered Sep 15 '22 at 22:22

Chefski

31
2

score 1 · Answer 6 · answered Apr 12 '18 at 02:16

1

You can quickly search through vector drawable previews in Android Studio by going to design view in the xml editor and under properties, clicking the ... button next to srcCompat

answered Apr 12 '18 at 02:16

Carson Holzheimer

2,890
25
36

score 1 · Answer 7 · answered Feb 22 '21 at 14:16

When you open the vector drawable in Android Studio, there are controls available in the upper right corner of the window. You can choose to switch between Code, Split and Design.

However these controls only show up if the vector drawable is used in the currently selected build variant. The only way I could see a preview for drawables from other build variants, was to switch to that specific build variant.

Is there a way to preview a vector drawable

7 Answers7

Linked