Skip to content

Instantly share code, notes, and snippets.

@stealthcopter

stealthcopter/!Cross to Back Arrow and reverse Android Animated Vector Drawable.md

Last active February 18, 2022 16:21
Show Gist options
  • Save stealthcopter/bff831e2bd5e6d09e7ea78e10ade123b to your computer and use it in GitHub Desktop.
Save stealthcopter/bff831e2bd5e6d09e7ea78e10ade123b to your computer and use it in GitHub Desktop.
Download ZIP
Cross to Back Arrow Animated Vector Drawable
Raw
!Cross to Back Arrow and reverse Android Animated Vector Drawable.md

Cross to Back Arrow and reverse

An android animated vector drawable created using ShapeShifter

Raw
ExampleUsage.java
import android.support.graphics.drawable.AnimatedVectorDrawableCompat;
private boolean isCrossShowing = true;
private void toggleAnimation(){
AnimatedVectorDrawableCompat animDrawable = AnimatedVectorDrawableCompat.create(this, isCrossShowing ? R.drawable.avd_cross_to_back_arrow : R.drawable.avd_back_arrow_to_cross);
imageView.setImageDrawable(animDrawable);
currentDrawable.start();
isCrossShowing = !isCrossShowing;
}
Raw
vector_back_arrow_to_cross.xml
<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="28dp"
android:height="28dp"
android:viewportWidth="300"
android:viewportHeight="300">
<group
android:name="layer1_1"
android:translateX="-35"
android:translateY="50">
<path
android:name="path4261"
android:pathData="M 100.916 96.074 L 302.956 96.074"
android:strokeColor="#FFFFFF"
android:strokeWidth="26.881051706026614"/>
<group android:name="layer1_2">
<path
android:name="path4199_1"
android:pathData="M 11.087 10.624 L 187.017 186.555"
android:strokeColor="#FFFFFF"
android:strokeWidth="28.269961977186313"
android:trimPathStart="0.44"
android:trimPathEnd="0.9"/>
<path
android:name="path4199_6_1"
android:pathData="M 186.177 10.251 L 10.247 186.18"
android:strokeColor="#FFFFFF"
android:strokeWidth="28.269961977186313"
android:trimPathStart="0.1"
android:trimPathEnd="0.55"/>
</group>
</group>
</vector>
</aapt:attr>
<target android:name="path4199_1">
<aapt:attr name="android:animation">
<set xmlns:android="http://schemas.android.com/apk/res/android">
<objectAnimator
android:propertyName="trimPathStart"
android:startOffset="413"
android:duration="400"
android:valueFrom="0.44"
android:valueTo="0"
android:valueType="floatType"
android:interpolator="@android:interpolator/fast_out_slow_in"/>
<objectAnimator
android:propertyName="trimPathEnd"
android:startOffset="101"
android:duration="389"
android:valueFrom="0.9"
android:valueTo="1"
android:valueType="floatType"
android:interpolator="@android:interpolator/fast_out_slow_in"/>
</set>
</aapt:attr>
</target>
<target android:name="path4199_6_1">
<aapt:attr name="android:animation">
<set xmlns:android="http://schemas.android.com/apk/res/android">
<objectAnimator
android:propertyName="trimPathEnd"
android:startOffset="413"
android:duration="400"
android:valueFrom="0.55"
android:valueTo="1"
android:valueType="floatType"
android:interpolator="@android:interpolator/fast_out_slow_in"/>
<objectAnimator
android:propertyName="trimPathStart"
android:startOffset="101"
android:duration="389"
android:valueFrom="0.1"
android:valueTo="0"
android:valueType="floatType"
android:interpolator="@android:interpolator/fast_out_slow_in"/>
</set>
</aapt:attr>
</target>
<target android:name="layer1_1">
<aapt:attr name="android:animation">
<objectAnimator
xmlns:android="http://schemas.android.com/apk/res/android"
android:propertyName="translateX"
android:startOffset="364"
android:duration="416"
android:valueFrom="-35"
android:valueTo="50"
android:valueType="floatType"
android:interpolator="@android:interpolator/fast_out_slow_in"/>
</aapt:attr>
</target>
<target android:name="path4261">
<aapt:attr name="android:animation">
<objectAnimator
xmlns:android="http://schemas.android.com/apk/res/android"
android:propertyName="trimPathEnd"
android:startOffset="101"
android:duration="452"
android:valueFrom="1"
android:valueTo="0"
android:valueType="floatType"
android:interpolator="@android:interpolator/fast_out_slow_in"/>
</aapt:attr>
</target>
</animated-vector>
Raw
vector_cross_to_back_arrow.xml
<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="28dp"
android:height="28dp"
android:viewportWidth="300"
android:viewportHeight="300">
<group
android:name="layer1_1"
android:translateX="50"
android:translateY="50">
<path
android:name="path4261"
android:pathData="M 100.916 96.074 L 302.956 96.074"
android:strokeColor="#FFFFFF"
android:strokeWidth="26.881051706026614"
android:trimPathEnd="0"/>
<group android:name="layer1_2">
<path
android:name="path4199_1"
android:pathData="M 11.087 10.624 L 187.017 186.555"
android:strokeColor="#FFFFFF"
android:strokeWidth="28.269961977186313"/>
<path
android:name="path4199_6_1"
android:pathData="M 186.177 10.251 L 10.247 186.18"
android:strokeColor="#FFFFFF"
android:strokeWidth="28.269961977186313"/>
</group>
</group>
</vector>
</aapt:attr>
<target android:name="path4199_1">
<aapt:attr name="android:animation">
<set xmlns:android="http://schemas.android.com/apk/res/android">
<objectAnimator
android:propertyName="trimPathStart"
android:duration="400"
android:valueFrom="0"
android:valueTo="0.44"
android:valueType="floatType"
android:interpolator="@android:interpolator/fast_out_slow_in"/>
<objectAnimator
android:propertyName="trimPathEnd"
android:startOffset="486"
android:duration="389"
android:valueFrom="1"
android:valueTo="0.9"
android:valueType="floatType"
android:interpolator="@android:interpolator/fast_out_slow_in"/>
</set>
</aapt:attr>
</target>
<target android:name="path4199_6_1">
<aapt:attr name="android:animation">
<set xmlns:android="http://schemas.android.com/apk/res/android">
<objectAnimator
android:propertyName="trimPathEnd"
android:duration="400"
android:valueFrom="1"
android:valueTo="0.55"
android:valueType="floatType"
android:interpolator="@android:interpolator/fast_out_slow_in"/>
<objectAnimator
android:propertyName="trimPathStart"
android:startOffset="538"
android:duration="389"
android:valueFrom="0"
android:valueTo="0.1"
android:valueType="floatType"
android:interpolator="@android:interpolator/fast_out_slow_in"/>
</set>
</aapt:attr>
</target>
<target android:name="layer1_1">
<aapt:attr name="android:animation">
<objectAnimator
xmlns:android="http://schemas.android.com/apk/res/android"
android:propertyName="translateX"
android:startOffset="411"
android:duration="416"
android:valueFrom="50"
android:valueTo="-40"
android:valueType="floatType"
android:interpolator="@android:interpolator/fast_out_slow_in"/>
</aapt:attr>
</target>
<target android:name="path4261">
<aapt:attr name="android:animation">
<objectAnimator
xmlns:android="http://schemas.android.com/apk/res/android"
android:propertyName="trimPathEnd"
android:startOffset="438"
android:duration="389"
android:valueFrom="0"
android:valueTo="1"
android:valueType="floatType"
android:interpolator="@android:interpolator/fast_out_slow_in"/>
</aapt:attr>
</target>
</animated-vector>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment