How to create this layout while fetching data ?
You could have used the Facebook shimmer library for this which is very straightforward.
Facebook Shimmer Library
But for more fine-tuned control you might have to write an animated vector like this.
Source for code Snippet
<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:name="vector"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<clip-path
android:name="heart"
android:pathData="M 7 3 C 5.465 3 3.922 3.5 2.75 4.7 C 0.407 7.1 0.471 10.8 2.75 13.2 L 12 23 L 21.25 13.2 C 23.529 10.8 23.593 7.1 21.25 4.7 C 18.907 2.4 15.093 2.4 12.75 4.7 L 12 5.5 L 11.25 4.7 C 10.078 3.5 8.536 3 7 3 Z"/>
<path
android:name="path"
android:pathData="M 7 3 C 5.465 3 3.922 3.5 2.75 4.7 C 0.407 7.1 0.471 10.8 2.75 13.2 L 12 23 L 21.25 13.2 C 23.529 10.8 23.593 7.1 21.25 4.7 C 18.907 2.4 15.093 2.4 12.75 4.7 L 12 5.5 L 11.25 4.7 C 10.078 3.5 8.536 3 7 3 Z"
android:fillColor="#ff0000"/>
<group android:name="group">
<path
android:name="shimmer"
android:pathData="M 4 0 L 24 19 L 22 22 L 0 3 Z">
<aapt:attr name="android:fillColor">
<gradient
android:endColor="#FFC500"
android:endX="24"
android:endY="24"
android:startColor="#ED613A"
android:startX="0"
android:startY="0"
android:type="linear" />
</aapt:attr>
</path>
</group>
</vector>
</aapt:attr>
<target android:name="group">
<aapt:attr name="android:animation">
<set>
<objectAnimator
android:propertyName="translateX"
android:duration="700"
android:valueFrom="10"
android:valueTo="-10"
android:valueType="floatType"
android:interpolator="#android:anim/linear_interpolator"/>
<objectAnimator
android:propertyName="translateY"
android:duration="700"
android:valueFrom="-10"
android:valueTo="10"
android:valueType="floatType"
android:interpolator="#android:anim/linear_interpolator"/>
</set>
</aapt:attr>
</target>
</animated-vector>
How can i convert this SVG file into a Animated vector drawable for android to show on the activity image.
SVG file
<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#E31F64">
<g fill="none" fill-rule="evenodd">
<g transform="translate(1 1)" stroke-width="2">
<circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
<path d="M36 18c0-9.94-8.06-18-18-18">
<animateTransform
attributeName="transform"
type="rotate"
from="0 18 18"
to="360 18 18"
dur="1s"
repeatCount="indefinite"/>
</path>
</g>
</g>
</svg>
I used some online tools to convert it but they simply creates a vector not the animated vector
Here is the vector
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="38dp"
android:height="38dp"
android:viewportWidth="38"
android:viewportHeight="38">
<group
android:translateX="1"
android:translateY="1">
<path
android:fillType="evenOdd"
android:strokeAlpha=".5"
android:strokeWidth="2"
android:pathData="M 18 0 C 27.941125497 0 36 8.05887450305 36 18 C 36 27.941125497 27.941125497 36 18 36 C 8.05887450305 36 0 27.941125497 0 18 C 0 8.05887450305 8.05887450305 0 18 0 Z" />
<path
android:fillType="evenOdd"
android:strokeWidth="2"
android:pathData="M36 18c0-9.94-8.06-18-18-18" />
</group>
</vector>
How can i create animated out of this to show spinning oval.
Thanks
Use ShapeShifter tool to create Animated Vector Drawable. It is a very basic tool yet fulfills the need.
I have the ff. vector drawable that I want to repeat based on the progress
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:height="6dp"
android:viewportHeight="6"
android:viewportWidth="10"
android:width="10dp">
<clip-path android:pathData="M 0 6 L 2.3 0 L 5 0 L 2.7 6 Z" />
<path
android:fillColor="#E60000"
android:pathData="M -5 -5 H 10 V 11 H -5 V -5 Z" />
<clip-path android:pathData="M 4.9 6 L 7.2 0 L 9.9 0 L 7.6 6 Z" />
<path
android:fillColor="#E60000"
android:pathData="M -0.1 -5 H 14.9 V 11 H -0.1 V -5 Z" />
</vector>
However setProgressDrawable stretches the entire drawable.
progressBar.setProgressDrawable(ContextCompat.getDrawable(context, getVectorDrawableRes()));
How do I repeat the above vector drawable instead of stretching it?
I am getting an error but it is only on Android Nougat.
This is my fragment_main.xml that contains FloatingActionButton:
<android.support.design.widget.FloatingActionButton
android:id="#+id/btnShowHomeMenu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:scaleType="fitCenter"
app:backgroundTint="#color/theme_yellow"
android:layout_marginBottom="20dp"
app:fabSize="normal"
app:borderWidth="0dp"
app:srcCompat="#drawable/ic_menu_main" />
This is my ic_menu_main.xml
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="141dp"
android:height="128dp"
android:viewportWidth="141.4"
android:viewportHeight="128.6">
<path
android:fillColor="#20000000"
android:pathData="M141.4,68.32l-53.03,53.03a25,25 88.59,0 1,-35.36 0l-53.03,-53.03aNaN,NaN NaN,0 1,0 0l42.43,-42.43a40,40 0,0 1,56.57 -0l42.43,42.43ANaN,NaN NaN,0 1,141.4 68.32Z"/>
<path
android:fillColor="#FFF"
android:pathData="M141.38,58.29l-53.03,53.03a25,25 88.59,0 1,-35.36 0l-53.03,-53.03aNaN,NaN NaN,0 1,0 0l42.43,-42.43a40,40 0,0 1,56.57 -0l42.43,42.43ANaN,NaN NaN,0 1,141.38 58.29Z"/>
<path
android:fillColor="#FFffee61"
android:pathData="M0,58.3l49.5,-49.5a30,30 0,0 1,42.4 0l49.5,49.5 -42.4,42.4a40,40 0,0 0,-56.6 0Z"/>
<path
android:fillColor="#FF515151"
android:pathData="M84.89,75.27l-10.61,10.61a5,5 91.17,0 1,-7.07 0l-10.61,-10.61aNaN,NaN NaN,0 1,0 0l10.61,-10.61a5,5 91.17,0 1,7.07 -0l10.61,10.61ANaN,NaN NaN,0 1,84.89 75.27Z"/>
<path
android:fillColor="#FF515151"
android:pathData="M84.82,42.3l-10.61,10.61a5,5 0,0 1,-7.07 0l-10.61,-10.61aNaN,NaN NaN,0 1,0 0l10.61,-10.61a5,5 0,0 1,7.07 -0l10.61,10.61ANaN,NaN NaN,0 1,84.82 42.3Z"/>
<path
android:fillColor="#FF515151"
android:pathData="M67.83,58.27l-10.61,10.61a5,5 90.52,0 1,-7.07 0l-10.61,-10.61aNaN,NaN NaN,0 1,0 0l10.61,-10.61a5,5 0,0 1,7.07 -0l10.61,10.61ANaN,NaN NaN,0 1,67.83 58.27Z"/>
<path
android:fillColor="#FF515151"
android:pathData="M100.89,59.29l-10.61,10.61a5,5 91.17,0 1,-7.07 0l-10.61,-10.61aNaN,NaN NaN,0 1,0 0l10.61,-10.61a5,5 0,0 1,7.07 -0l10.61,10.61aNaN,NaN NaN,0 1,0 0Z"/>
</vector>
I am not sure why it give invalid path data. Anyone knows why?
Nan causes an error which is produced by the converter.
Just replace NaN with some random numbers and it works (try to make sure the number does not cause the vector to change)
I've used ShapeShifter to create an animation vector drawable which perform some trim path and some path data change.
Here's the result:
<animated-vector
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt">
<aapt:attr name="android:drawable">
<vector
xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:name="omino"
android:pathData="M 9 10 C 7 10 7 10 7 8 C 7 6 7 6 9 6 C 11 6 11 6 11 8 C 11 10 11 10 9 10 L 9 16"
android:strokeColor="#000000"
android:strokeAlpha="0.7"
android:strokeWidth="0.3"
android:strokeLineCap="round"
android:strokeLineJoin="round"/>
<path
android:name="bilancia"
android:pathData="M 3 16 L 20 16 M 12 16 L 12 14 L 22 14"
android:strokeColor="#000000"
android:strokeAlpha="0.7"
android:strokeWidth="0.3"
android:strokeLineCap="round"
android:strokeLineJoin="round"/>
<path
android:name="abox"
android:pathData="M 13 14 L 13 12 L 19 12 L 19 14 L 13 14"
android:strokeColor="#000000"
android:strokeAlpha="0.7"
android:strokeWidth="0.3"
android:strokeLineCap="round"
android:strokeLineJoin="round"/>
<path
android:name="braccia"
android:pathData="M 14 14 L 9 11 L 13 12.5"
android:strokeColor="#000000"
android:strokeAlpha="0.7"
android:strokeWidth="0.3"
android:strokeLineCap="round"
android:strokeLineJoin="round"/>
</vector>
</aapt:attr>
<target android:name="omino">
<aapt:attr name="android:animation">
<objectAnimator
xmlns:android="http://schemas.android.com/apk/res/android"
android:propertyName="trimPathEnd"
android:duration="1000"
android:valueFrom="0"
android:valueTo="1"
android:valueType="floatType"
android:interpolator="#android:interpolator/fast_out_slow_in"/>
</aapt:attr>
</target>
<target android:name="bilancia">
<aapt:attr name="android:animation">
<objectAnimator
xmlns:android="http://schemas.android.com/apk/res/android"
android:propertyName="trimPathStart"
android:duration="1000"
android:valueFrom="1"
android:valueTo="0"
android:valueType="floatType"
android:interpolator="#android:interpolator/fast_out_slow_in"/>
</aapt:attr>
</target>
<target android:name="abox">
<aapt:attr name="android:animation">
<set xmlns:android="http://schemas.android.com/apk/res/android">
<objectAnimator
android:propertyName="trimPathEnd"
android:duration="1000"
android:valueFrom="0"
android:valueTo="1"
android:valueType="floatType"
android:interpolator="#android:interpolator/fast_out_slow_in"/>
<objectAnimator
android:propertyName="pathData"
android:startOffset="2000"
android:duration="1000"
android:valueFrom="M 13 12 L 13 10 L 19 10 L 19 12 L 13 12"
android:valueTo="M 13 14 L 13 12 L 19 12 L 19 14 L 13 14"
android:valueType="pathType"
android:interpolator="#android:interpolator/fast_out_slow_in"/>
<objectAnimator
android:propertyName="pathData"
android:startOffset="500"
android:duration="1000"
android:valueFrom="M 13 14 L 13 12 L 19 12 L 19 14 L 13 14"
android:valueTo="M 13 12 L 13 10 L 19 10 L 19 12 L 13 12"
android:valueType="pathType"
android:interpolator="#android:interpolator/fast_out_slow_in"/>
</set>
</aapt:attr>
</target>
<target android:name="braccia">
<aapt:attr name="android:animation">
<set xmlns:android="http://schemas.android.com/apk/res/android">
<objectAnimator
android:propertyName="trimPathStart"
android:duration="1000"
android:valueFrom="1"
android:valueTo="0"
android:valueType="floatType"
android:interpolator="#android:interpolator/fast_out_slow_in"/>
<objectAnimator
android:propertyName="pathData"
android:startOffset="500"
android:duration="1000"
android:valueFrom="M 14 14 L 9 11 L 13 12.5"
android:valueTo="M 14 12 L 9 11 L 13 10.5"
android:valueType="pathType"
android:interpolator="#android:interpolator/fast_out_slow_in"/>
<objectAnimator
android:propertyName="pathData"
android:startOffset="2000"
android:duration="1000"
android:valueFrom="M 14 12 L 9 11 L 13 10.5"
android:valueTo="M 14 14 L 9 11 L 13 12.5"
android:valueType="pathType"
android:interpolator="#android:interpolator/fast_out_slow_in"/>
</set>
</aapt:attr>
</target>
Android studio keeps enlighting animated-vector and target as errors. But in compilation all works fine.
I imported this file as a drawable inside my project. Then in the layout I added an ImageView without any src.
With this code I set the animated vector drawable to the imageview and i start the animation:
AnimazioneVettore = (ImageView)view.findViewById(R.id.ImgVectorAnim);
animatedVector = AnimatedVectorDrawableCompat.create(getContext(), R.drawable.no_abox_animated);
AnimazioneVettore.setImageDrawable(animatedVector);
animatedVector.start();
no_abox_animated is the vector file.
When I start the app no error is fired, the vector is loaded inside the imageview and the animation starts.
The first animation "Trim path end/start". It works fine except for "bilancia". Here the animation perform an orrible "jump" insted of animate the last 2 Lines.
At 500 ms the path animation should start. but nothing happens.
At 200 the last path animiation should start but it does not work either.
I'm using 'com.android.support:appcompat-v7:25.3.1'
First the easy part. Path morphing for AnimatedVectorDrawables was only added to the support library in version 25.4.0 (release notes). So for your pathData animations where nothing is happening you just need to updated the support library version you are using.
As for your "bilancia" problem, this is an issue to do with the way AnimatedVectorDrawables handle trimPath when there is more than one moveTo command (M). You can find an issue filed here. Basically your path is drawing two lines and when combining this with trimPath it doesn't work very well. I'd suggest splitting the two lines in "bilancia" into two separate paths and animating those instead.