drawing a triangle using Vector path and XML in android - android

I have found how to draw a triangle, but I need to rotate it now and I can't seem to make it..
My goal is to reach this:
So far I have found this code:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="40dp"
android:height="40dp"
android:viewportHeight="100"
android:viewportWidth="100">
<group android:name="triableGroup">
<path
android:name="triangle"
android:fillColor="#color/some_color"
android:pathData="m 50,0 l 50,50 -100,0 z" />
</group>
</vector>
but it appears like this :


One way is to add these attributes in group :
android:pivotX="50"
android:pivotY="50"
android:rotation="45"


I know this question has already been answered,
But follow this way to make your own custom vector drawable.
To make your own custom vector drawable convert your image to svg or psd format and upload your image to android studio as below.
Step 1: Right click on drawable folder, go to new and then select vector asset like this.
Step 2: Now check the Local File (SVG, PSD) radio button and upload your SVG or PSD file.
What else! Finally you will get your vector drawable file.
Happy Coding!!


<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="40dp"
android:height="40dp"
android:viewportHeight="100"
android:viewportWidth="100">
<group android:name="triableGroup">
<path
android:name="triangle"
android:fillColor="#color/some_color"
android:pathData="M 0,0 L50,0 50,50 z" />
</group>
</vector>

Related

how to add round border in vector drawable image?

I have one vector drawable image of EYE and i want round shape border around that but i cant found any solution.
My requirement for image is like:here is my requirement image!
i am using xml code for eye icon as below:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="26.012dp"
android:height="16dp"
android:viewportWidth="26.012"
android:viewportHeight="16">
<path
android:fillColor="#FF000000"
android:pathData="M13.012,5.518a3.606,3.606 0,0 1,1.312 0.246,2.168 2.168,0 0,0 2.293,3.671 3.617,3.617 0,1 1,-3.6 -3.917Z"
android:fillType="evenOdd"/>
<path
android:fillColor="#FF000000"
android:pathData="M13.006,16c4.959,0 10.714,-3.655 12.552,-7.074 -2.7,0.038 -4.571,-1.213 -6.415,-2.414a5.237,5.237 0,0 1,0.659 2.536c0,3.252 -3.034,5.889 -6.777,5.889s-6.777,-2.637 -6.777,-5.889a5.235,5.235 0,0 1,0.681 -2.574c-1.864,1.212 -3.744,2.491 -6.474,2.452 1.837,3.418 7.593,7.074 12.552,7.074ZM13.006,3.149c-4.309,0 -7.693,4 -10.737,5.023 -0.585,0.2 -1.7,0.4 -2.131,0.02 -0.316,-0.278 -0.1,-0.274 0.792,-1.1 3.467,-3.192 6.4,-7.08 12.016,-7.1 5.776,-0.017 8.581,3.823 12.137,7.1 0.893,0.822 1.108,0.817 0.792,1.1 -0.433,0.38 -1.546,0.177 -2.131,-0.02C20.699,7.147 17.315,3.149 13.006,3.149Z"
android:fillType="evenOdd"/>
</vector>
now I want to add border arround this image as per above image.
help me if any one is having understanding of this stuff.
Thank you in advance!!

You can modify your SVG
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="125dp"
android:height="125dp"
android:viewportWidth="125"
android:viewportHeight="125">
<path
android:pathData="M48.7,11.5c-12,3.3 -24.1,12.2 -30.8,22.6 -13.8,21.5 -10.9,49.1 7,66.9 21.7,21.6 54.5,21.6 76.2,-0 29,-28.8 15.4,-79 -24.2,-89.5 -6.6,-1.8 -21.7,-1.8 -28.2,-0zM73.2,13.1c8.9,1.8 19,7.3 25.5,13.8 10.1,10.1 15.3,22.5 15.3,36.6 0,14.7 -5.2,26.7 -15.9,36.8 -7.6,7.1 -15.3,11.2 -24.9,13.3 -8.4,1.7 -12,1.7 -20.4,-0 -9.6,-2.1 -17.3,-6.2 -24.9,-13.3 -10.7,-10.1 -15.9,-22.1 -15.9,-36.8 0,-32.4 29.8,-56.9 61.2,-50.4z"
android:fillColor="#000000"
android:strokeColor="#00000000"/>
<path
android:pathData="M51.8,41.5c-5.5,2.1 -11.6,6.5 -20.5,14.9l-7.8,7.5 3.3,0.1c3.7,-0 8.1,-2 18,-8.4 8.1,-5.2 12,-6.6 18.2,-6.6 6.2,-0 10.1,1.4 18.2,6.6 10,6.4 14.3,8.4 18,8.4 3.3,-0.1 3.3,-0.1 -6.2,-9.1 -12.4,-11.7 -17.6,-14.3 -29,-14.6 -5.4,-0.2 -9.8,0.3 -12.2,1.2z"
android:fillColor="#000000"
android:strokeColor="#00000000"/>
<path
android:pathData="M57.4,57.9c-6,3.7 -6.6,12.1 -1.2,16.6 4,3.4 9.6,3.4 13.6,-0 3.8,-3.2 4.8,-6.3 1.8,-5.8 -3.2,0.7 -7.6,-3.3 -7.6,-6.7 0,-1.6 0.5,-3.2 1,-3.5 1.9,-1.2 1,-2.5 -1.7,-2.5 -1.6,-0 -4.2,0.9 -5.9,1.9z"
android:fillColor="#000000"
android:strokeColor="#00000000"/>
<path
android:pathData="M37.5,63.1c-3.3,1.6 -7.2,2.9 -8.7,2.9 -1.6,-0 -2.8,0.4 -2.8,1 0,2.5 10.6,11.2 18.7,15.2 8.4,4.2 8.9,4.3 18.3,4.3 9.4,-0 9.9,-0.1 18.3,-4.3 8.1,-4 18.7,-12.6 18.7,-15.1 0,-0.6 -1.3,-1.1 -2.9,-1.1 -1.5,-0 -5.5,-1.3 -8.7,-3 -3.2,-1.6 -6,-3 -6.1,-3 -0.1,-0 0.2,1.2 0.8,2.7 2.4,6.5 -2.2,15.3 -10.2,19.4 -5.2,2.6 -14.6,2.6 -19.8,-0.1 -7.5,-3.8 -12.1,-12.2 -10.2,-18.8 0.5,-1.8 0.9,-3.2 0.8,-3.1 -0.1,-0 -2.9,1.4 -6.2,3z"
android:fillColor="#000000"
android:strokeColor="#00000000"/>
</vector>
Your OP will

You can take a circle as a background for image view and set its src as the vector
<ImageView
android:layout_width="48dp"
android:layout_height="48dp"
android:src="#drawable/eye"
android:tint="#747474"
android:background="#drawable/circle_gray"
android:padding="6dp"/>
circle_gray.xml in drawable folder
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<stroke android:width="2dp"
android:color="#747474"/>
</shape>
Change width and height as per requirement . also better take color in colors.xml
Result:-

You can use this way to make circular border,
vector for round border,
And finally use your eye image in second item in layerlist. Will work fine.
It looks like this,

Center path of android vector

This is my image width and height = 125x125 and the viewport is 62x62, my problem is it's not centered, I want some help to center the path.
Original SVG
<vector android:height="125dp" android:viewportHeight="62"
android:viewportWidth="62" android:width="125dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="#000000" android:pathData="M12,5.9c1.16,0 2.1,0.94 2.1,2.1s-0.94,2.1 -2.1,2.1S9.9,9.16 9.9,8s0.94,-2.1 2.1,-2.1m0,9c2.97,0 6.1,1.46 6.1,2.1v1.1L5.9,18.1L5.9,17c0,-0.64 3.13,-2.1 6.1,-2.1M12,4C9.79,4 8,5.79 8,8s1.79,4 4,4 4,-1.79 4,-4 -1.79,-4 -4,-4zM12,13c-2.67,0 -8,1.34 -8,4v3h16v-3c0,-2.66 -5.33,-4 -8,-4z"/>
</vector>

I did it with coding and online SVG editor's help sins no one helped me. I wish I had illustrator :(
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="125dp"
android:height="125dp"
android:viewportWidth="250"
android:viewportHeight="250"
android:tint="?attr/colorControlNormal">
<path
android:fillColor="#android:color/white"
android:pathData="M124.5,92.73C130.543,92.73 135.438,97.625 135.438,103.668C135.438,109.707 130.543,114.605 124.5,114.605C118.457,114.605 113.563,109.707 113.563,103.668C113.563,97.625 118.457,92.73 124.5,92.73M124.5,139.605C139.969,139.605 156.27,147.207 156.27,150.543L156.27,156.27L92.73,156.27L92.73,150.543C92.73,147.207 109.031,139.605 124.5,139.605M124.5,82.832C112.988,82.832 103.668,92.156 103.668,103.668C103.668,115.176 112.988,124.5 124.5,124.5C136.012,124.5 145.332,115.176 145.332,103.668C145.332,92.156 136.012,82.832 124.5,82.832ZM124.5,129.707C110.594,129.707 82.832,136.688 82.832,150.543L82.832,166.168L166.168,166.168L166.168,150.543C166.168,136.688 138.406,129.707 124.5,129.707ZM124.5,129.707"/>
</vector>

How to make the vector logo smaller and fit the icon

I have made a logo ic_launcher.xml for my android application using "New Vector Asset" and copying the vector paths from the asset into the ic_launcher_background.xml
The logo that resulted is too big and cropped. In android I see only the central part, with sides, top and bottom cut off.
I would like for the vector to be smaller so it would be visible whole in the logo.
I have tried changing these values:
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0"
This resulted in the logo either being even bigger with more cropped out, or smaller, but not centered.
These are the paths for the vector:
<path
android:name="light_triangle"
android:fillColor="#color/colorAccent"
android:pathData="M 0,0 L 100,0 0,100 z" />
<path
android:fillColor="#color/colorPrimary"
android:pathData="M5,13.18v4L12,21l7,-3.82v-4L12,17l-7,-3.82zM12,3L1,9l11,6 9,-4.91V17h2V9L12,3z"/>
I would like for the logo to be smaller and centered. Can I somehow move the vector after making it smaller by changing height and width, or do I have to make new vector asset that is somehow smaller and centered?
UPDATE:
I have found what has to be done. I put the vectors inside a group like this:
<group android:scaleY="0.7" android:scaleX="0.7" android:pivotY="10" android:pivotX="10">
<path
android:fillColor="#color/colorPrimary"
android:pathData="M5,13.18v4L12,21l7,-3.82v-4L12,17l-7,-3.82zM12,3L1,9l11,6 9,-4.91V17h2V9L12,3z"/>
</group>

Use vector image directly in AndroidManifest.xml file
android:icon="#drawable/work_mode"

Change the android:width and android:height values without changing the android:viewportWidth and android:viewportHeight. In this way :
android:width="16dp"
android:height="16dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0"

I have found what has to be done. I put the vectors inside a group like this:
<group android:scaleY="0.7" android:scaleX="0.7" android:pivotY="10" android:pivotX="10">
<path
android:fillColor="#color/colorPrimary"
android:pathData="M5,13.18v4L12,21l7,-3.82v-4L12,17l-7,-3.82zM12,3L1,9l11,6 9,-4.91V17h2V9L12,3z"/>
</group>

How to fit VectorDrawable to ImageView and remove unnecessary paddings

For my Android app I've created such layer list from two vector Drawable.
The xml-code
I want to put this image into ImageView, but I have a problem with paddings which I can't remove (marked in red).
To solve this issue I've already applied follow steps:
Explicitly set paddings to 0 value
Set "AdjustViewBound" to true
Played with "fitType" attributes.
None of this hadn't been worked for me. Please help me to resolve this problem.

You should get a whole drawable with the circle and person in one vector. But if you really need these two files to be separated, you must change the path in the XML code.
Accordingly to this
https://stackoverflow.com/a/50114171/3368784 you can resize your path by rewriting your primary_dark_color_circle.xml
as:
<?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.0"
android:viewportHeight="24.0">
<group
android:pivotX="12"
android:pivotY="12"
android:scaleX="1.2"
android:scaleY="1.2">
<path
android:fillColor="#0088CC"
android:pathData="M12,12m-10,0a10,10 0,1 1,20 0a10,10 0,1 1,-20 0" />
</group>
</vector>

Can GradientColor be defined in another file for a vector drawable? [duplicate]

I was looking at the documentation for GradientColor https://developer.android.com/reference/android/R.styleable.html#GradientColor . How can I define a gradient color in XML and apply it to an XML vector drawable?
I have tried in color.xml, styles.xml and within an XML vector drawable.
I get the error " Failed to convert #id/gradclor into a ColorStateList" with:
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="120dp"
android:height="120dp"
android:viewportWidth="120.0"
android:viewportHeight="120.0">
<path
android:name="play_triangle"
android:pathData="M 30 30 L 30 90 L 80 60 z"
android:strokeColor="#id/gradclor"
android:strokeWidth="5"/>
<color
android:name="#+id/gradclor"
android:startColor="#FFFFFF"
android:endColor="#00FFFF"
android:angle="145"/>
</vector>
or
"Failed to convert #FFFFFFFF #00FFFFFF 145 into a ColorStateList" when using:
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="120dp"
android:height="120dp"
android:viewportWidth="120.0"
android:viewportHeight="120.0">
<path
android:name="play_triangle"
android:pathData="M 30 30 L 30 90 L 80 60 z"
android:strokeColor="#color/GradientStrokeBorder"
android:strokeWidth="5"/>
</vector>
with the following in color.xml:
<color name="GradientStrokeBorder">
<item name="android:startColor">#FFFFFF</item>
<item name="android:endColor">#00FFFF</item>
<item name="android:angle">145</item>
</color>

I've finally made it work. Gradient color feature is not supported yet in Android Studio (current ver is 2.2) so it doesn't help you with autocomplete but marks gradient tag as error instead. Nevertheless, the feature does actually work, I've tested it successfully on Nexus 5X / API 24. Of course, you have to use an API 24+ device because otherwise this feature is not supported by OS.
First, you need to add color resource file like this:
<?xml version="1.0" encoding="utf-8"?>
<gradient xmlns:android="http://schemas.android.com/apk/res/android"
android:startColor="#FFFFFF"
android:centerColor="#0000FF"
android:endColor="#00FFFF"
android:angle="145"
android:startX="30"
android:endX="70"
android:startY="30"
android:endY="70"
android:type="linear"/>
Please pay attention to start/end parameters as I found they are essential for vector gradients.
Place this file into res/color folder under some name. I've named it gradient.xml so the full path is res/color/gradient.xml. After that you can refer to this resource in color attributes, including vector path colors:
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="120dp"
android:height="120dp"
android:viewportWidth="120.0"
android:viewportHeight="120.0">
<path
android:name="play_triangle"
android:pathData="M 30 30 L 30 90 L 80 60 z"
android:strokeWidth="10"
android:strokeColor="#color/gradient"/>
</vector>
Notice the reference to gradient color resource in strokeColor. Hope this helps!

The latest preview of Android (3.1 Canary 6) contains a sample using vector resource with a gradient.
<vector xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt"
android:width="108dp"
android:height="108dp"
android:viewportHeight="108"
android:viewportWidth="108">
<path
android:fillType="evenOdd"
android:pathData="M32,64C32,64 38.39,52.99 44.13,50.95C51.37,48.37 70.14,49.57 70.14,49.57L108.26,87.69L108,109.01L75.97,107.97L32,64Z"
android:strokeColor="#00000000"
android:strokeWidth="1">
<aapt:attr name="android:fillColor">
<gradient
android:endX="78.5885"
android:endY="90.9159"
android:startX="48.7653"
android:startY="61.0927"
android:type="linear">
<item
android:color="#44000000"
android:offset="0.0" />
<item
android:color="#00000000"
android:offset="1.0" />
</gradient>
</aapt:attr>
</path>
<path
android:fillColor="#FFFFFF"
android:fillType="nonZero"
android:pathData="M66.94,46.02L66.94,46.02C72.44,50.07 76,56.61 76,64L32,64C32,56.61 35.56,50.11 40.98,46.06L36.18,41.19C35.45,40.45 35.45,39.3 36.18,38.56C36.91,37.81 38.05,37.81 38.78,38.56L44.25,44.05C47.18,42.57 50.48,41.71 54,41.71C57.48,41.71 60.78,42.57 63.68,44.05L69.11,38.56C69.84,37.81 70.98,37.81 71.71,38.56C72.44,39.3 72.44,40.45 71.71,41.19L66.94,46.02ZM62.94,56.92C64.08,56.92 65,56.01 65,54.88C65,53.76 64.08,52.85 62.94,52.85C61.8,52.85 60.88,53.76 60.88,54.88C60.88,56.01 61.8,56.92 62.94,56.92ZM45.06,56.92C46.2,56.92 47.13,56.01 47.13,54.88C47.13,53.76 46.2,52.85 45.06,52.85C43.92,52.85 43,53.76 43,54.88C43,56.01 43.92,56.92 45.06,56.92Z"
android:strokeColor="#00000000"
android:strokeWidth="1" />
</vector>

I'm not sure about this, but according to this document:
android:strokeColor
Specifies the color used to draw the path outline. May be a color or, for SDK 24+, a color state list or a gradient color (See GradientColor and GradientColorItem). If this property is animated, any value set by the animation will override the original value. No path outline is drawn if this property is not specified.
if your sdk is <24 it should just be one color.
on the other hand if your sdk is greater than 24, i think that it would be beter to use <gradient/> to fill your path instead of <color/>

Categories

Resources