Center path of android vector - android

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>

Related

How to remove shapes from a vector path?

I was looking for an torch on and torch off icon in Android Studio's vector asset search for a camera app. I couldn't find either, but I found a similar icon (vector xml) called as highlight.
I have used it as a placeholder for torch on. I wanted to remove the three rectangles and increase the height of the torch holder to cover the remaining height for torch off icon. Is it possible to achieve this? If yes...then how could one achieve it...if not, then what alternative could I go with?
Code:
<?xml version="1.0" encoding="utf-8"?>
<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="M6,14l3,3v5h6v-5l3,-3V9H6V14zM11,2h2v3h-2V2zM3.5,5.88l1.41,-1.41l2.12,2.12L5.62,8L3.5,5.88zM16.96,6.59l2.12,-2.12l1.41,1.41L18.38,8L16.96,6.59z"/>
</vector>

here is the vector you asked for
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:tint="#FFFFFF"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:fillColor="#android:color/white"
android:pathData="M6,14l3,3v7h6v-7l3,-3V9H6V14zM11,1" />

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,

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>

Is it possible to change icon's position on FAB?

I want to move the arrow a little to the right.

You can edit your icon to move it a little to the right.
If you use Raster image, just use image editor, which you like and move it.
If you use Vector image, you can wrap your path data with group and add scale and pivot to the image:
Initial vector file:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportHeight="24.0"
android:viewportWidth="24.0">
<path
android:fillColor="#FF000000"
android:pathData="M8,5v14l11,-7z" />
</vector>
Image moved to the right:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportHeight="24.0"
android:viewportWidth="24.0">
<group
android:pivotX="-30"
android:scaleX="0.95"
android:scaleY="0.95">
<path
android:fillColor="#FF000000"
android:pathData="M8,5v14l11,-7z" />
</group>
</vector>
FAB now looks in a next way:
You can move your image to any side using pivotX and pivotY.

No corresponding attribute.
Only possible via editing drawables.
Way to alter vectors on Android ref.

drawing a triangle using Vector path and XML in 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>

Categories

Resources