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,
Related
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>
I am trying to find a way to make
type of vector but I have no idea how to make it I have seen in many splash screen of the app any hint will be helpful .
You could create a <vector> drawable and paint a bunch of semi-transparent shapes. Here's an example:
<vector
xmlns:android="http://schemas.android.com/apk/res/android"
android:width="360dp"
android:height="160dp"
android:viewportWidth="360.0"
android:viewportHeight="160.0">
<path
android:fillColor="#3000"
android:pathData="M0 0h360v160h-360z"/>
<path
android:fillColor="#3000"
android:pathData="M0 0h48L0 60z"/>
<path
android:fillColor="#3000"
android:pathData="M0 160V40L100 50L140 160z"/>
<path
android:fillColor="#3000"
android:pathData="M70 0L80 140L300 0z"/>
<path
android:fillColor="#3000"
android:pathData="M300 0L280 160H360V0z"/>
<path
android:fillColor="#3000"
android:pathData="M320 0L340 160H360V0z"/>
<path
android:fillColor="#3000"
android:pathData="M100 0L100 50L260 160H360V0"/>
<path
android:fillColor="#3000"
android:pathData="M0 160L80 140LL120 160"/>
</vector>
This is obviously not as beautiful as your attached image, but it shows that the general technique works to create an image like the one you posted.
I want to create the shape rectangle as shown below the Image.
what am I supposed to do?
with best regards.
Using <vector>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="8dp"
android:viewportWidth="24.0"
android:viewportHeight="50.0">
<path
android:fillColor="#8CCC13"
android:pathData="M24 24v-24h-24v24a20 36 0 0 1 24 0z" />
</vector>
see below Output :
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:
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>