Android Studio includes a Vector Asset Studio tool that can help you add Material icons and import SVG (Scalable Vector Graphic) files into your project as vector drawable resources. Using vector drawable resources instead of pictures can reduce the size of the APK, because the same file can be resized to fit screens of different resolutions without losing the quality of the picture. The old version of Android does not support vector drawables. Vector Asset Studio can help you convert vector drawables into images of different sizes when building.
About Vector Asset Studio
Vector Asset Studio will add vector images to the project in the form of XML file descriptions. Maintaining an XML file is much simpler than maintaining multiple resolution images.
Android4.4 (API level 20) or lower versions do not support vector drawables. If your minimum API level is lower than 20, you have two options when using Vector Asset Studio: generate PNG files (default) or use Support Library.
In order to maintain backward compatibility, Vector Asset Studio generates rasterized images of vector drawables. The vector and rasterized resources will be packaged together in the APK file. In Java code, you can think of vector resources as Drawable or @drawable in XML code; when your application is running, it will decide whether to use vector resources or raster images according to the current system API version.
Furthermore, in order to use Android Support Library 23.2 or higher, you can add some declarations in the build.gradle file.
Supported vector image types
The Google material design specification provides material icons, which you can directly apply to your Android applications. Vector Asset Studio helps you select, import and change the size of material icons.
Vector Asset Studio can also help you import your own SVG files. SVG is an XML-based W3C standard. Vector Asset Studio supports the necessary standards, but not all features. When you declare an SVG file, Vector Asset Studio tells you whether it supports the image code. If the SVG code is not supported, it will convert this file into an XML file containing VectorDrawable code.
Thinking of SVG files
A vector drawable is fine for a simple icon. Material icons provide very good examples of image types, and it is also very good to convert to vector drawables. However, many app running icons contain too many details, so they are more suitable for rasterized images.
The initial loading of vector images requires more CPU resources than rasterized images. After that, both memory usage and performance are the same. It is recommended to limit vector images to a maximum of 200*200 dp, otherwise, it will take a lot of time to draw.
Although the vector drawable supports one or more colors, in many cases the icon color is black (android:fillColor=”#FF000000”). With this feature, you can add a tint to the vector drawable used in the layout. The icon color will change to tint color. If the icon color is not black, the icon color may be mixed with the tint color.
Run Vector Asset Studio
In order to open Vector Asset Studio, use the following methods:
1. In Android Studio, open an Android application project.
2. In the Project window, select the Android view.
3. Right-click the res folder and select New> Vector Asset.
Vector Asset Studio shows:
Import a vector image
Vector Asset Studio helps you import a vector image into your app project.
Add a material icon
1. In Vector Asset Studio, select Material Icon
2. Select Choose
3. Select a material icon and click OK
icon to appear in Vector Drawable Preview.
4. Optionally, you can change the resource name, size, transparency and RTL mirroring settings.
5. Click Next
6. Optional. Change the module and resource directory.
7. Click Finish.
Vector Asset Studio adds an XML that defines the vector drawable to the app/src/main/res/drawable/ folder of your project.
8. Build the project.
If your minimum API level is Android4.4 or lower, and you don't add Support Library, Vector Asset Studio generates PNG files, and you cannot modify these files.
Import an SVG file
After opening Vector Asset Studio, you can import an SVG file in the following ways:
1. In Vector Asset Studio, select Local SVG file and the
file must be locally. If it is online, you need to download it locally.
2. Click on the picture to import
images displayed in the Vector Drawable Preview.
However, if the SVG file contains unsupported features, an error will be reported at the bottom of Vector Asset Studio, as follows:
3. Optional. Change the resource name, size, transparency and other settings
4. Click Next
5. Optional. Change the module and resource directory.
6. Click Finish.
7. Build the project.
If your minimum API level is Android4.4 or lower, and you don't add Support Library, Vector Asset Studio generates PNG files, and you cannot modify these files.
Add a vector Drawable to the layout
Add any control that can use icons in a layout file, such as ImageButton, ImageView, etc., to point to a vector resource. For example: the following layout displays vector resources in a button.
To set a vector resource to the control, perform the following steps:
1. Open a project and import a vector resource
2. In the Android view of the Project window, double-click a layout XML file, such as content_main.xml
3. Click Design to open the layout editing is
4, drag ImageButton control from the Palette window to the layout editor.
5. In the Properties window, locate the src property of ImageButton and click...
6. In the Resources dialog box, select Project, navigate to the Drawable folder, and select a vector resource. Click OK.
The vector resources are displayed in the ImageButton layout.
7. In order to change the color of the picture, you can set the tint property.
If you are not using the Support Library, the ImageButton code is as follows:
<ImageButton
android:id="@+id/imageButton"
android:src="@drawable/ic_build_24dp"
android:tint="@color/colorAccent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/textView2"
android:layout_marginTop="168dp" />Using a vector drawable in
your code, you can call a vector resource in the code in a normal way. When you run an app, it will determine whether to display vector or rasterized images based on your API version.
In most cases, you can access vector resources through @drawable or Drawable. as follows:
<ImageView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="@drawable/myimage" />as follows:
Resources res = getResources();
Drawable drawable = res.getDrawable(R.drawable.myimage);as follows:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
VectorDrawable vectorDrawable = (VectorDrawable) drawable;
} else {
BitmapDrawable bitmapDrawable = (BitmapDrawable) drawable;
}Modify the XML code generated by Vector Asset Studio
You can modify the XML code of the vector resource, but not the PNG file and the XML code generated during construction. However, this method is not recommended.
Author: Song Zhihui
personal micro-blog: Click to enter