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>
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 can't figure out why my Animated Vector is not working. I can see the first path but the second path that I want to animate as an addition to the first path is not showing. This is how my code looks like:
<?xml version="1.0" encoding="utf-8"?>
<animated-vector
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt">
<aapt:attr name="android:drawable">
<vector
android:height="24dp"
android:width="24dp"
android:viewportHeight="24.0"
android:viewportWidth="24.0" >
<path
android:name="v"
android:strokeColor="#000000"
android:strokeWidth="3"
android:pathData="M6,11 l3.5, 4 l0, 0" />
</vector>
</aapt:attr>
<target android:name="v" >
<aapt:attr name="android:animation">
<set>
<objectAnimator
android:duration="1000"
android:propertyName="pathData"
android:valueFrom="M6,11 l3.5, 4 l0, 0"
android:valueTo="M6,11 l3.5, 4 l8, -7"
android:valueType="pathType"/>
</set>
</aapt:attr>
</target>
</animated-vector>
So, M6,11 l3.5, 4 l0, 0 is showing on the screen but not M6,11 l3.5, 4 l8, -7
I tried copy the example from the bottom of the google docs here and that did work. My file animated correctly if I use their code which tells me I do start the animation correctly. Is this a typo or something wrong with my path data?
I tested my drawable in a new project and to my surprise it was working fine.
I was using com.android.support:design:25.1.0 in my first project and it turns out degrading to com.android.support:design:24.2.0 made it work.
After testing a bit more I found that changing from app:srcCompat="#drawable/animated_vector" to android:src="#drawable/animated_vector" on my ImageView made it work for com.android.support:design:25.1.0 as well.
Im not sure whats going on but now it works at least. If someone has more details on this please let me know. I thought we where supposed use srcCompat for vector drawables.
I'm using <animated-vector> to rotate an arrow:
<target
android:name="rotationGroup"
android:animation="#animator/animator" />
and the animator:
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="#android:integer/config_shortAnimTime"
android:propertyName="rotation"
android:valueFrom="180"
android:valueTo="0"/>
And the vector that I'm transforming.
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportHeight="24"
android:viewportWidth="24">
<group
android:name="rotationGroup"
android:pivotX="12"
android:pivotY="12"
android:rotation="0.0">
<group
android:translateX="7.0"
android:translateY="9.0">
<path
android:fillColor="#color/sc_item_filter_list_chevron"
android:pathData="M 1,-4 L 1,4 L -1,4 L -1,-4 Z" />
</group>
</group>
</vector>
What is my problem:
When I click the button - I use the resource with an arrow pointing up. Then I animate it 180.0 degrees down.
When I click again - I switch to arrow pointing down and re-animate it back up to 0.0.
The bug I've encountered: When I tap the button between the animations (so for example when the arrow is at 90.0 degrees) the animations jumps to the beginning.
I tried using the <animated-selector> but I guess it didn't fix my problem. (or maybe it was me implementing it wrong)
I may switch to Property Animation, but it sounds like a lot of work. So before I do that - is there a better solution for this, using stuff I've showed you?
I'm trying to make an Android vector animation, which contains a rotation on a vectorial group. Basically, if the degree transition would be constant, I would use those resources:
My VectorDrawable:
<vector
xmlns:android="http://schemas.android.com/apk/res/android"
android:width="64dp"
android:height="64dp"
android:viewportHeight="600"
android:viewportWidth="600">
<group
android:name="myRotationGroup"
android:pivotX="300.0"
android:pivotY="300.0"
android:rotation="0">
<path
android:name="myName"
android:fillColor="#000000"
android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z"/>
</group>
</vector>
My AnimatedVectorDrawable:
<animated-vector
xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="#drawable/my_vector_drawable" >
<target
android:name="myRotationGroup"
android:animation="#animator/my_rotation" />
</animated-vector>
And my ObjectAnimator:
<objectAnimator
android:duration="500"
android:propertyName="rotation"
android:valueFrom="0"
android:valueTo="360" />
However, as you can see above, the final degree of rotation is set in the ObjectAnimator resource, as 360° for instance.
For my animation, how can I change programmatically this final value? The rotation degree need to be computed with some other data, so I don't know the target value before the animation starts.
Thank you for your help!
I think the solution is to create an object of ObjectAnimator in the class like this
ObjectAnimator myRotation = ObjectAnimator.ofFloat(target,"rotation",360f);
myRotation.setDuration(500);
myRotation.start(); // this will start the animation
// here target is the object of the view on which you want to apply this animation
// and you can change this 360f to any number at which degree you want to rotate
for more information check this out