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>
Related
For example, I have ic_chat_black_24dp.xml vector asset from Android Studio,
<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="M20,2L4,2c-1.1,0 -1.99,0.9 -1.99,2L2,22l4,-4h14c1.1,0 2,-0.9 2,-2L22,4c0,-1.1 -0.9,-2 -2,-2zM6,9h12v2L6,11L6,9zM14,14L6,14v-2h8v2zM18,8L6,8L6,6h12v2z"/>
What I want is to have the start point M20,7 i.e. start the image 5dp down; all lines, everything. I can change the ViewportHeight to 29.0 to enhance the canvass but how do I use it?
Do I have to change each Y axis value individually or there's a faster way?
You can move the entire path by wrapping it in a <group> tag, which would look something like:
<group
android:translateY="5">
<path
...your stuff.../>
</group>
The group also allows you to change 'scale' and 'rotation' properties as listed in the documentation.
I know that the foreground and background layers should both be 108dp by 108dp. But as you can see in the image its not displayed correctly (icon next to the YouTube icon)
I'm not sure what I'm doing wrong.
Here is the forground layer
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="108dp"
android:height="108dp"
android:viewportHeight="512"
android:viewportWidth="512">
<path android:fillColor="#515262" android:pathData="M265.3,2.6c-5.7,-3.5 -12.8,-3.5 -18.6,0C202.7,29.5 17.7,150.6 17.7,289.7c0,72.3 58.5,130.9 130.7,130.9c23.6,0 45.8,-6.3 64.9,-17.3c5.5,-3.2 11.9,2.4 9.7,8.4c-10.2,28.4 -24.6,54.8 -42.6,78.2c-6.8,9 -0.3,22 10.9,22h130.7c11.2,0 17.8,-13 10.9,-22c-17.7,-23.2 -32,-49.2 -42.2,-77.3c-2.2,-6 4.2,-11.5 9.7,-8.5c18.7,10.4 40.3,16.4 63.2,16.4c72.2,0 130.7,-58.6 130.7,-130.9C494.3,150.6 309.3,29.5 265.3,2.6z"/>
<path android:fillColor="#464655" android:pathData="M202,409c-146.8,-81.3 -8.9,-325.2 55.3,-408.9c-3.6,-0.3 -7.3,0.5 -10.6,2.5C202.7,29.5 17.7,150.6 17.7,289.7c0,72.3 58.5,130.9 130.7,130.9C167.5,420.6 185.6,416.5 202,409z"/>
<path android:fillColor="#464655" android:pathData="M231.4,492.9c8.5,-70.3 8.1,-90.3 -13.5,-90.3c3.8,0.8 6.7,4.8 5.2,9.1c-10.2,28.4 -24.6,54.8 -42.6,78.2c-6.8,9 -0.3,22 10.9,22h49.4C230.9,512 230.5,499.9 231.4,492.9z"/>
</vector>
and the background layer which is a white square
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="108dp"
android:height="108dp"
android:viewportHeight="108"
android:viewportWidth="108">
<path
android:fillColor="#FFF"
android:pathData="M0,0h108v108h-108z" />
</vector>
Per the Designing Adaptive Icons blog post:
Adaptive icons are 108dp*108dp in size but are masked to a maximum of 72dp*72dp. Different devices can supply different masks which must be convex in shape and may reach a minimum of 33dp from the center in places.
Because of the minimum reach of the mask, you can consider a centered 66dp diameter circle as a safe zone, guaranteed not to be clipped.
Your vector icon is using the entire 108x108dp size, rather than only the safe 66x66dp zone in the middle. Therefore what you are seeing is just the center of your icon (those two little white spots are actually the background peeking through).
You should resize your vector asset to fit into the safe zone. One way to do this is to increase the viewportHeight and viewportWidth, then put your paths into a <group> that uses android:translateX and android:translateY to recenter the vector in the larger viewport:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="108dp"
android:height="108dp"
android:viewportHeight="1024"
android:viewportWidth="1024">
<group
android:translateX="256"
android:translateY="256">
<path android:fillColor="#515262" android:pathData="M265.3,2.6c-5.7,-3.5 -12.8,-3.5 -18.6,0C202.7,29.5 17.7,150.6 17.7,289.7c0,72.3 58.5,130.9 130.7,130.9c23.6,0 45.8,-6.3 64.9,-17.3c5.5,-3.2 11.9,2.4 9.7,8.4c-10.2,28.4 -24.6,54.8 -42.6,78.2c-6.8,9 -0.3,22 10.9,22h130.7c11.2,0 17.8,-13 10.9,-22c-17.7,-23.2 -32,-49.2 -42.2,-77.3c-2.2,-6 4.2,-11.5 9.7,-8.5c18.7,10.4 40.3,16.4 63.2,16.4c72.2,0 130.7,-58.6 130.7,-130.9C494.3,150.6 309.3,29.5 265.3,2.6z"/>
<path android:fillColor="#464655" android:pathData="M202,409c-146.8,-81.3 -8.9,-325.2 55.3,-408.9c-3.6,-0.3 -7.3,0.5 -10.6,2.5C202.7,29.5 17.7,150.6 17.7,289.7c0,72.3 58.5,130.9 130.7,130.9C167.5,420.6 185.6,416.5 202,409z"/>
<path android:fillColor="#464655" android:pathData="M231.4,492.9c8.5,-70.3 8.1,-90.3 -13.5,-90.3c3.8,0.8 6.7,4.8 5.2,9.1c-10.2,28.4 -24.6,54.8 -42.6,78.2c-6.8,9 -0.3,22 10.9,22h49.4C230.9,512 230.5,499.9 231.4,492.9z"/>
</group>
</vector>
Or you can rewrite your paths manually.
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.
I need right to left check arrow like the second arrow in picture for my background drawable in android
check arrow image
I need to rotate left to right check arrow vector 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="#FFFFFFFF"
android:pathData="M9,16.2L4.8,12l-1.4,1.4L9,19 21,7l- 1.4,-1.4L9,16.2z"/>
</vector>
A simple way to flip an existing VectorDrawable like this is to scale it using a negative number.
The <group> tag of a VectorDrawable is where we can play with the scaleX and scaleY properties. Using these properties, a value of 1 is full size and a value of 0 is scaled down to nothing; 2 would be double the size, 0.5 would be half size etc.
If we use a negative number it shrinks all the way down to zero, then starts increasing in size in the opposite direction. So in your example, to flip the check-mark horizontally we can use:
<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="12"
android:scaleX="-1">
<path
android:fillColor="#FFFFFFFF"
android:pathData="M9,16.2L4.8,12l-1.4,1.4L9,19 21,7l-1.4,-1.4L9,16.2z" />
</group>
</vector>
We wrapped the path in a <group> tag and gave it a scaleX value of -1, meaning the normal size but in the opposite direction. Also the pivotX value is 12, this is because the full width of your viewport is 24, and we want to flip the icon right around the centre line.
Which transforms this:
Into this:
Edit to add:
I see that your question is tagged with right-to-left, as in for languages which are read from right to left. The answer above may not be what you wanted in this case, so here's an alternative:
If you want the VectorDrawable to appear the original way when being used on a left-to-right device, but the opposite way on a right-to-left device then there is a specific property to enable this: autoMirrored.
By setting autoMirrored to true the drawable will show the default way in left-to-right mode but will be horizontally flipped when in right-to-left mode(but note this is only supported on API 19 and up):
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportHeight="24.0"
android:viewportWidth="24.0"
android:autoMirrored="true">
<path
android:fillColor="#000000"
android:pathData="M9,16.2L4.8,12l-1.4,1.4L9,19 21,7l-1.4,-1.4L9,16.2z" />
</vector>
I'm trying to import some icons from Material Vector package in Vector Asset Studio.
But they come with padding.
Why does this happen and how can I remove it?
This is inconvenient because this means if I want my icon to be 17dp x 17dp in XML, then I need to set it more than 17x17 to make up for the padding.
Android Vector Asset
You are able to scale a vector that will remove additional space. This is possible using group tag. Just modify your vector xml file.
From
<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="M12,4l-1.41,1.41L16.17,11H4v2h12.17l-5.58,5.59L12,20l8,-8z" />
</vector>
to
<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="12"
android:pivotY="12"
android:scaleX="1.5"
android:scaleY="1.5">
<path
android:fillColor="#FF000000"
android:pathData="M12,4l-1.41,1.41L16.17,11H4v2h12.17l-5.58,5.59L12,20l8,-8z" />
</group>
</vector>
As result
You can adjust for any "implicit" padding that may be contained within a VectorDrawables source image (.SVG, .PSD) by setting your ImageViews android:scaleType to the appropriate value so it can handle the padding that is secretly contained in the VectorDrawables source image. You will also need to set android:adjustViewBounds="true".
For example, lets say your VectorDrawable has some really annoying padding at the start of the image when you display it. You have no idea why it's there because you aren't setting any android:paddingStart on the ImageView... what you need to do is set the ImageViews android:scaleType to fitStart and android:adjustViewBounds to true.
tl;dr
Adjust your ImageViews android:scaleType to handle any "implicit" padding that is contained in your VectorDrawables source file (.SVG, .PSD). Also set android:adjustViewBounds="true".
Quick Example:
<ImageView android:id="#+id/vectorDrawable_imageView"
<!--Other ImageView settings-->
android:adjustViewBounds="true"
android:scaleType="fitStart"
app:srcCompat="#drawable/vector_with_implicit_padding_at_start"
/>
This will remove that annoying "implicit" padding that was at the start of your VectorDrawable.
Note: Adjust the android:scaleType according to your rendering needs.
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="28"
android:viewportHeight="28">
<group
android:translateX="2"
android:translateY="2">
<path
android:fillColor="#8A333333"
android:pathData="M13.12,2.06L7.58,7.6c-0.37,0.37 -0.58,0.88 -0.58,1.41V19c0,1.1 0.9,2 2,2h9c0.8,0 1.52,-0.48 1.84,-1.21l3.26,-7.61C23.94,10.2 22.49,8 20.34,8h-5.65l0.95,-4.58c0.1,-0.5 -0.05,-1.01 -0.41,-1.37 -0.59,-0.58 -1.53,-0.58 -2.11,0.01zM3,21c1.1,0 2,-0.9 2,-2v-8c0,-1.1 -0.9,-2 -2,-2s-2,0.9 -2,2v8c0,1.1 0.9,2 2,2z" />
</group>
</vector>
android:viewportWidth += android:translateX * 2 (padding start / end)
android:viewportHeight += android:translateY * 2 (padding top / bottom)
This padding is on some icons so that all of the icons can align properly. For example, if in that dialog, you pick ic_3d_rotation_24dp, you'll see the icon goes all the way to the edge of the bounds.
PS if you aim to have all your sizes be a multiple of 8dp, things will line up nicely and look great.