Develop Reference

How to draw outline stroke on imported drawable vector?

I have imported vector asset to my project from standart assets. It's code here:
<vector android:height="24dp" android:tint="#FFFFFF"
android:viewportHeight="24" android:viewportWidth="24"
android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path
android:fillColor="#android:color/white" android:pathData="M19.14,12.94c0.04,-0.3 0.06,-0.61 0.06,-0.94c0,-0.32 -0.02,-0.64 -0.07,-0.94l2.03,-1.58c0.18,-0.14 0.23,-0.41 0.12,-0.61l-1.92,-3.32c-0.12,-0.22 -0.37,-0.29 -0.59,-0.22l-2.39,0.96c-0.5,-0.38 -1.03,-0.7 -1.62,-0.94L14.4,2.81c-0.04,-0.24 -0.24,-0.41 -0.48,-0.41h-3.84c-0.24,0 -0.43,0.17 -0.47,0.41L9.25,5.35C8.66,5.59 8.12,5.92 7.63,6.29L5.24,5.33c-0.22,-0.08 -0.47,0 -0.59,0.22L2.74,8.87C2.62,9.08 2.66,9.34 2.86,9.48l2.03,1.58C4.84,11.36 4.8,11.69 4.8,12s0.02,0.64 0.07,0.94l-2.03,1.58c-0.18,0.14 -0.23,0.41 -0.12,0.61l1.92,3.32c0.12,0.22 0.37,0.29 0.59,0.22l2.39,-0.96c0.5,0.38 1.03,0.7 1.62,0.94l0.36,2.54c0.05,0.24 0.24,0.41 0.48,0.41h3.84c0.24,0 0.44,-0.17 0.47,-0.41l0.36,-2.54c0.59,-0.24 1.13,-0.56 1.62,-0.94l2.39,0.96c0.22,0.08 0.47,0 0.59,-0.22l1.92,-3.32c0.12,-0.22 0.07,-0.47 -0.12,-0.61L19.14,12.94zM12,15.6c-1.98,0 -3.6,-1.62 -3.6,-3.6s1.62,-3.6 3.6,-3.6s3.6,1.62 3.6,3.6S13.98,15.6 12,15.6z" />
</vector>
Simply i just want to add black stroke to it. Can i do it somehow through this xml file or i can do it only programmatically?

Use strokeWidth and strokeColor in path to add stroke to vector drawable.
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:fillColor="#android:color/white"
android:strokeWidth="1"
android:strokeColor="#color/black"
android:pathData="M19.14,12.94c0.04,-0.3 0.06,-0.61 0.06,-0.94c0,-0.32 -0.02,-0.64 -0.07,-0.94l2.03,-1.58c0.18,-0.14 0.23,-0.41 0.12,-0.61l-1.92,-3.32c-0.12,-0.22 -0.37,-0.29 -0.59,-0.22l-2.39,0.96c-0.5,-0.38 -1.03,-0.7 -1.62,-0.94L14.4,2.81c-0.04,-0.24 -0.24,-0.41 -0.48,-0.41h-3.84c-0.24,0 -0.43,0.17 -0.47,0.41L9.25,5.35C8.66,5.59 8.12,5.92 7.63,6.29L5.24,5.33c-0.22,-0.08 -0.47,0 -0.59,0.22L2.74,8.87C2.62,9.08 2.66,9.34 2.86,9.48l2.03,1.58C4.84,11.36 4.8,11.69 4.8,12s0.02,0.64 0.07,0.94l-2.03,1.58c-0.18,0.14 -0.23,0.41 -0.12,0.61l1.92,3.32c0.12,0.22 0.37,0.29 0.59,0.22l2.39,-0.96c0.5,0.38 1.03,0.7 1.62,0.94l0.36,2.54c0.05,0.24 0.24,0.41 0.48,0.41h3.84c0.24,0 0.44,-0.17 0.47,-0.41l0.36,-2.54c0.59,-0.24 1.13,-0.56 1.62,-0.94l2.39,0.96c0.22,0.08 0.47,0 0.59,-0.22l1.92,-3.32c0.12,-0.22 0.07,-0.47 -0.12,-0.61L19.14,12.94zM12,15.6c-1.98,0 -3.6,-1.62 -3.6,-3.6s1.62,-3.6 3.6,-3.6s3.6,1.62 3.6,3.6S13.98,15.6 12,15.6z" />
</vector>
Also remove android:tint as it will also change stroke color to white.

How to create a pencil icon using xml definition?

I am trying to create pencil icon using lines (xml definition). But not getting exact shape. Whether it is possible or not?

You can use the pencil icon from Android Studio itself from File->New->Vector Asset and then click on clip art icon and search for your specific image. You can also change its color through its XML.
Or you can download the SVG image from https://www.flaticon.com/ and choose the image which you want. You can also change its color from XML after using in the Android Studio.
A sample XML for vector drawable pencil icon.
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:fillColor="#FF000000"
android:pathData="M3,17.25V21h3.75L17.81,9.94l-3.75,-3.75L3,17.25zM20.71,7.04c0.39,-0.39 0.39,-1.02 0,-1.41l-2.34,-2.34c-0.39,-0.39 -1.02,-0.39 -1.41,0l-1.83,1.83 3.75,3.75 1.83,-1.83z"/>

If you want to use Vector Drawable try using below code for drawable.xml
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:fillColor="#color/colorPrimary"
android:pathData="M3,17.25V21h3.75L17.81,9.94l-3.75,-3.75L3,17.25zM20.71,7.04c0.39,-0.39 0.39,-1.02 0,-1.41l-2.34,-2.34c-0.39,-0.39 -1.02,-0.39 -1.41,0l-1.83,1.83 3.75,3.75 1.83,-1.83z"/>
</vector>

Vector Drawable in the circle

is there an easy way to generate Vector Drawable that is a circle with the icon inside from the existing vector drawable?
Example:

I would suggest something like this:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:gravity="fill"
android:drawable="#drawable/ic_brightness_1_black_24dp"
/>
<item
android:gravity="center"
android:drawable="#drawable/ic_call_black_24dp"
android:top="20dp"
android:bottom="20dp"
android:left="20dp"
android:right="20dp"
/>
</layer-list>
The resources with ids ic_brightness_1_black_24dp and ic_call_black_24dp are imported vector drawables.
ic_brightness_1_black_24dp:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:fillColor="#303F9F"
android:pathData="M12,12m-10,0a10,10 0,1 1,20 0a10,10 0,1 1,-20 0"/>
</vector>
and ic_call_black_24dp:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:fillColor="#FFFFFF"
android:pathData="M6.62,10.79c1.44,2.83 3.76,5.14 6.59,6.59l2.2,-2.2c0.27,-0.27 0.67,-0.36 1.02,-0.24 1.12,0.37 2.33,0.57 3.57,0.57 0.55,0 1,0.45 1,1V20c0,0.55 -0.45,1 -1,1 -9.39,0 -17,-7.61 -17,-17 0,-0.55 0.45,-1 1,-1h3.5c0.55,0 1,0.45 1,1 0,1.25 0.2,2.45 0.57,3.57 0.11,0.35 0.03,0.74 -0.25,1.02l-2.2,2.2z"/>
</vector>

Actually it's quite simple, you just need to include both paths in a single vector, so with your paths it will look like the following:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:fillColor="#303F9F"
android:pathData="M12,12m-10,0a10,10 0,1 1,20 0a10,10 0,1 1,-20 0"/>
<path
android:fillColor="#FFFFFF"
android:pathData="M6.62,10.79c1.44,2.83 3.76,5.14 6.59,6.59l2.2,-2.2c0.27,-0.27 0.67,-0.36 1.02,-0.24 1.12,0.37 2.33,0.57 3.57,0.57 0.55,0 1,0.45 1,1V20c0,0.55 -0.45,1 -1,1 -9.39,0 -17,-7.61 -17,-17 0,-0.55 0.45,-1 1,-1h3.5c0.55,0 1,0.45 1,1 0,1.25 0.2,2.45 0.57,3.57 0.11,0.35 0.03,0.74 -0.25,1.02l-2.2,2.2z"/>
</vector>
The result will obviously depend on sizes of paths in relation to each other, and since scaling them without a graphical tool is a pain, DimDim's solution with a layer-list is easier to implement.

Since nobody has mentioned how to do this using vector drawing as the question says here is the way to do it.
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="144dp"
android:height="144dp"
android:viewportWidth="144"
android:viewportHeight="144">
<path
android:pathData="M72,72m-50,0a50,50 0,1 1,100 0a50,50 0,1 1,-100 0"
android:strokeWidth="9"
android:fillColor="#00000000"
android:strokeColor="#fff"/>
</vector>
M72,72m -> circle's center coordinates
50` -> the circle's radius
100` -> circle's diameter
strokeWidth -> the ring's thickness
To make it into a disc instead of a ring change the fillColor
To make your circle half the size change all occurrences of 50 to 25 and all occurrences of 100 to 50. Change accordingly for other sizes.
To move the circle around inside the viewport change the circle's coordinates (the 72 numbers)
These numbers obviously are related to the viewport size. 72 is the center for 144 which is the defined viewport size in this case. To center it in a 200 viewport size you would need to use 100

Use this way,
I tried in my own and it's working fine. It looks like this.
for button_round:

Edited Vector Drawable not showing in the app

I've taken out this icon SVG and I've edited it in Inkscape to make the double tick icon look like the WhatsApp one.
So, later in Android Studio I put the original vector drawable icon:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:height="24dp"
android:width="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path android:fillColor="#000" android:pathData="M0.41,13.41L6,19L7.41,17.58L1.83,12M22.24,5.58L11.66,16.17L7.5,12L6.07,13.41L11.66,19L23.66,7M18,7L16.59,5.58L10.24,11.93L11.66,13.34L18,7Z" />
</vector>
And then I've replaced the pathData with the SVG path edited in Inkscape:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:fillColor="#000"
android:pathData="M 0.41,13.41 6,19 7.41,17.58 1.83,12 M 22.24,5.58 11.66,16.2 11,15.5 9.5,17 11.66,19 23.66,7 M 18,7 16.5,5.5 4.5, 17.5 6,19 Z"/>
</vector>
I can see the new icon in Android Studio preview, but when I run the app it doesn't show. Normal icons does show normally, but this one doesn't.
It's a weird behavior that I cannot understand, I'm pretty new into vector graphics.
Why is that?

I've found the answer by myself. Looking at the original icon syntax it appears that spaces should be given with an L letter.
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path android:fillColor="#8A000000" android:pathData="M0.41,13.41L6,19L7.41,17.58L1.83,12M22.24,5.58L11.66,16.2L11,15.5L9.5,17L11.66,19L23.66,7M18,7L16.5,5.5L4.5,17.5L6,19Z"/>
</vector>
Now it works. Funny how I didn't know anything about vector drawable, and still found a solution.

Vector Drawable not showing vertical line

I am creating drawable in xml using the vector. I am able to draw a rectangle using the path but when I am trying to draw a completely vertical or horizontal line its not showing.
Here is my code
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:strokeWidth="1"
android:strokeColor="#c1ae1e"
android:pathData="M0 0,H24,V24,H0,V0"/>
<path
android:strokeWidth="3"
android:strokeColor="#4c4c4c"
android:fillColor="#36352c"
android:pathData="M12 0,L12 24"/>
<path
android:strokeWidth="3"
android:strokeColor="#4c4c4c"
android:fillColor="#36352c"
android:pathData="M0 12,L24 12"/>
</vector>
And here is the preview output-

Try combining it into one path. I'm not sure why, but having a completely horizontal or vertical line with only two points will not render. Since I had to make a cross shape, I was able to get away with combining both the vertical or horizontal lines like so:
<path
android:strokeColor="#FF000000"
android:strokeWidth="0.5"
android:pathData="M14,0 l0,28 M0,14 l28,0"/>
This will also happen if you make an arc that calculates to be a straight like (not something most people would do, but I've seen it while changing arc values, and might be related as to why the lines do not show)
Give this a try:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:strokeWidth="1"
android:strokeColor="#c1ae1e"
android:pathData="M0 0,H24,V24,H0,V0"/>
<path
android:strokeWidth="3"
android:strokeColor="#4c4c4c"
android:fillColor="#36352c"
android:pathData="M12 0,L12 24 M0 12,L24 12"/>
</vector>