74

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>
1
  • No, the browser only shows me the xml Oct 12, 2015 at 23:23

7 Answers 7

145

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

enter image description here

1
  • 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, 2021 at 14:00
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.

1
  • 3
    I don't see this
    – hmac
    May 22, 2020 at 9:57
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"

3
  • 1
    This is what I was looking for. Thanks! Aug 2, 2018 at 16:03
  • This plugin make a preview of all available drawable in project. With a convenience access by sidebar.
    – nyconing
    Dec 6, 2018 at 3:43
  • nice, just what I needed Jan 31 at 3:25
3

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

3
  • When I do that, I just see the XML. Any idea what I'm missing? Oct 13, 2015 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, 2015 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 Apr 12, 2018 at 1:54
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.

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

1

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.

android studio controls

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.