Android studio vector asset svg

Android working with SVG / vector drawables

While developing Android Applications, supporting multiple resolutions are sometime nightmare to developers. Including multiple images for different resolutions also increases the project size. The solution is to use Vector Graphics such as SVG images. While Android does not support SVGs (Scalable Vector Graphics) directly, with the launch of Lollipop a new class was introduced called VectorDrawable, which allows designers and developers to draw assets in a similar fashion using only code.

Simply explained, vector graphics are a way of describing graphical elements using geometric shapes. They are particularly well suited to graphical elements created in packages such as Adobe Illustrator or Inkscape where simple geometric shapes may be combined in to much more complex elements.

1. What is VectorDrawable?

As the name implies, vector drawables are based on vector graphics, as opposed to raster graphics, vector graphics are a way of describing graphical elements using geometric shapes. It is similar to a SVG file. In Android Vector Drawable are created as XML files. Now there is no need to create different size image for mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi etc. We need only one vector file for multiple screen size devices. Also for older versions of Android that don’t support vector drawables, Vector Asset Studio can turn your vector drawables into different bitmap sizes for each screen density at runtime.

Here is the detailed information Vector Asset Studio.

Note: For this project I’m using gradle version 2.2, my suggession is to use 2.0+. However if you’re using gradle version below 2.0 then you’ll need to add some more code to the app level build.gradle file which I’ve mentioned below.

2. Creating Android Project

1. Create a new project in Android Studio from File ⇒ New Project and fill the project details.

2. Open build.gradle in app module, add the below line inside defaultConfig block.

So the complete build.gradle looks like

If you are using gradle version below 2.0 then use following

2.1 Creating VectorDrawable from Material Icons.

So let us start by creating VectorDrawables from Material Icons (Material Icons are the official icon set from Google that are designed under the material design guidelines, these icons are open source and are beautifully crafted, delightful, and easy to use in your web, Android, and iOS projects).

3. In the project Right click on the drawable directory

4. Go to New ⇒ Vector Asset

5. Click on the launcher icon to browse Material Icons

6. Select an icon and click on ok

7. Review the name of the file then click on next.

8. Now Vector Asset Studio will show the location about where the file is being saved, review it and click on finish.

9. The drawable folder will now consist of a newly created file (In my case ic_flight_takeoff)

below is the file code –

You can modify the width and height of the vector as per your requirement (by default it stays as 24dp), a vector may consist of one or more paths. A path may have many attributes among which fillColor and pathData are the most important. fillColor attribute defines the color of the path, it must be a color attribute (hash code in #aarrggbb, or may also point to a color resource). pathData defines the path shape. In this case I’ve modified the vector width, height and path fillColor.

2.2 Creating VectorDrawable from SVG or PSD

Now we have created vectorDrawable from Material Icon, what if we want a separate icon? We can create it from SVG or PSD, below are the procedure, but it also has some restrictions you can check out here – https://developer.android.com/studio/write/vector-asset-studio.html#PSD (though the restriction listed here for PSD, it applies to SVG also).

10. In the project Right click on the drawable directory

11. Go to New ⇒ Vector Asset

12. Click on the radio button saying “Local File (SVG, PSD)”

13. Click on the browse icon and navigate to your SVG or PSD file to select it

14. After selecting click ok

15. Verify the image in preview and click Next ⇒ Finish.

below is the file code generated from svg

3. Using VectorDrawable

We have successfully added VectorDrawables to the project, now it’s time to use them.

16. Open the layout file of main activity (activity_main.xml) and add the below xml. This layout contains shows how to use VectorDrawable with ImageView and other Views (as background) which is explained later in this tutorial.

The above layout generates a screen something like this.

3.1 Using VectorDrawable with ImageView from xml

So let us start with a simple ImageView, and even simpler by assigning the VectorDrawable to the ImageView through xml layout.

As you can see, we used app:srcCompat instead of android:src, so that the support library can do the rest to display the image seamlessly on all versions of android. (The support library converts VectorDrawables to raster graphics automatically on android versions below 5.0 – API 21, details are here). So it was that easy.

3.2 Using VectorDrawable with ImageView from Java

Now Let us do the same thing with Java code, i.e. assigning VectorDrawable to ImageView through Java Code.

17. Add another Vector Drawable (name it ic_android.xml) with the steps mention in section 2.1 or 2.2, you can also create a file with that name and paste the below code.

18. Open MainActivity.java and paste the below code.

Now, let me explain the code line by line.

19. For using VectorDrawable from java or to use it as background (in xml also) you need to intimate AppCompatDelegate to enable compat vector from resource. Below is the code for that.

20. Whenever you are going to use VectorDrawable from java or to use it as background (in xml also) remember to use AppCompatView instead of normal view, here I have used AppCompatImageView, please also refer to the layout we created before.

21. Now assign the VectorDrawable as src or background as you do it normally, AppCompat will take care of the rest.

22. We have added some flavors to it, We implemented OnClickListener on the ImageView to set random color filter on it, upon click.

3.3 Using VectorDrawable as Drawable with TextView

You may want to use VectorDrawable as background or as compound drawable with TextView, so below is an example.

As you can see from above code we have used a VectorDrawable in the drawableLeft attribute of android.support.v7.widget.AppCompatTextView, we can also do it from the java code using AppCompatTextView#setCompoundDrawables .

3.4 Using VectorDrawable to Customise RadioButton

So far the use was straightforward, what if you want to customise a RadioButton or CheckBox while using VectorDrawable? Now lets see that. If you go through the layout we created, once again then you can find that a RadioGroup which contains a series of AppCompatRadioButton, all the AppCompatRadioButtons there uses @drawable/radio_selector as background, below is the code for that.

As you can see this is a selector drawable as usual, the only difference is that it refers to VectorDrawables (vector image resources) instead of raster image resources. The remaining is taken care by android.support.v7.widget.AppCompatRadioButton itself as mentioned earlier (remember to use AppCompatDelegate.setCompatVectorFromResourcesEnabled(true) for that also, even if you don’t consider backward compatibility).

The final output looks something like this.

I hope this article gave you a very good overview about Using Vector Drawables in Android. Feel free to ask any queries / doubts in comments section below.

Rivu Chakraborty is a Sr. Tech. Member of Institution of Engineers(India), Diploma holder Engineer in Computer Science. He is presently at MaxMobility Pvt. Ltd. as a Sr. Software Engineer (Android)

Источник

Using SVG Vector Drawables in Android

Icons are awesome. It conveys the message in a very simple and fast way. It is a good practice to have icons in your application because just by looking at the icons the user gets a rough idea about its purpose. More the pictorial representation, more efficiently you can convey your message.

You can use images also. But the main problem with images is the size. You need to have copies of the same image for different mobile sizes i.e. for mdpi, hdpi, xhdpi, xxhdi, and so on. This will increase your app size.

So, in order to avoid this situation, we can use vector drawables in our app. Vector Drawables are nothing but an XML file where we write the code for our icons and this is the reason why we don’t need to put different icons for different mobiles sizes while using vector drawables.

In order to add this functionality in a mobile application, Android Studio includes a tool called the Vector Asset Studio that is used to add some predefined material icons along with your own Scalable Vector Graphic (SVG) and Adobe Photoshop Document (PSD) as vector files in your android application. But this is not supported in Android 4.4 (API level 20) and lower.

So, in this blog, we will learn how to use SVG Vector Drawables in Android. So, let’s get started.

Adding Support Library

In order to use Vector Drawable in your application, you must add the below line to support vectorDrawables. Add the below code in your app-level build.gradle file:

Playing with Vector Asset Studio

To start Vector Asset Studio in your application, follow the below steps:

Step 1: In your android studio project, locate your res directory

Step 2: Then move to drawable folder.

Step 3: After that right-click on the drawable folder and then click on New > Vector Asset. Below screen will be shown:

In the window available to us, there are two options to include vector files in our app:

1. Select Asset type as Clip Art — to use Material icons in our project
2. Select Asset type as Local file(SVG, PSD) — to use your own SVG and PSD file stored in your local system

Apart from choosing Asset type, other options that are present in the Asset Studio window are:

• Name: Here you can type the name of the vector file and by this name, you will access the vector file in the project. The file name can contain lowercase characters, underscores, and digits only.
• Clip Art: You can select any of the vector assets from the available choices by clicking on the Clip Art.

Note: The Clip Art option is available only when your Asset Type is Clip Art, otherwise instead of Clip Art, an option for Path will be there.

• Path: This option is present when your Asset Type is Local File(SVG, PSD). Here you can choose the path to your SVG and PSD file.
• Size: This option tells you about the current size of your asset file. By default, it is 24dp * 24dp.
• Override: If you don’t want the default size of the asset file, then you can select this option to have your own dimensions for the file.
• Color: This option is only available when your Asset Type is Clip Art. Here you can select the color that you want to fill in the vector asset.
• Opacity: You can set the opacity of your Vector Asset by sliding the opacity bar.
• Enable auto mirroring for RTL layout: In general, the layout that we make are from Left to Right (LTR) but there are certain cases where you have to make an application using the Right to Left(RTL) layout. For example, in many countries, people write from Right to Left(RTL). So, in those situations, you have to mirror your image. In order to do so, you can check this option i.e. the “Enable auto mirroring for RTL layout” option.

So, these were the options that were available in the Asset Studio. Now, let’s use the Asset Type feature to import the material icon and our local SVG and PSD icon.

Using Material Icon

There are a number of predefined material icons present in the Asset Studio. You can use them in your application. To do so, just click on the Clip Art option and select the icon that you want to use.

After selecting the icon, click on Ok > Next > Finish.

Now your icon will be added to your res/drawable folder.

Using SVG/PSD Icon

If you want to use some icons that are not present in the list of predefined icons, then you can add your own icon by selecting the Asset Type as Local File(SVG, PSD) and then select the path of your file by clicking on Path.

After that click on Next > Finish.

Now your icon will be added to your res/drawable folder.

Using Vector Drawable in your project

After adding the Vector Drawable in your project, you can use the Vector Drawable in any of the icon-related widgets such as ImageView or ImageButton.

For example, you can add a layout of your choice and add an ImageView like this:

Here, ic_tick is the name of the file of Vector Asset present in the res/drawable folder. This is as simple as adding an image file in the ImageView.

The best part about Vector Asset is that you can change it’s color in the XML also, by adding the below line:

This will change the color to the primary color.

If you want to refer to some vector drawable in your code i.e. in you Kotlin code, then you can do this in the same manner as used to access the files present in the res/drawable folder:

Editing XML code of Vector Asset

Whenever you add some Vector Asset in your project then a corresponding XML file is created in the res/drawable folder and this file contains all the properties of the asset file that you have created i.e. all the XML code for your vector image will be present in this file and you can modify this file according to your need.

Following is an example of XML code of Vector Asset created by Asset Studio:

You can change the width, height, viewportWidth, viewportHeight, fillColor, etc in the XML file. In-fact, for Android 5.0 and higher, Vector Asset Studio supports all the elements of the Drawable and VectorDrawable. So, you can use all those elements in your XML file that was generated by the Asset Studio.

Conclusion

In this blog, we learned how to use the same image or icon with different sizes of devices without losing the quality of the image. We can do so by using the SVG Vector Drawable in our project. We saw how to add the Vector Assets in our application. In the last, we saw how to change the properties of Vector Asset by altering the XML file generated by the Vector Asset Studio. That’s it for this blog.

Источник