Skip to content

Instantly share code, notes, and snippets.

@ozgurg

ozgurg/PlayPauseView.java

Last active June 4, 2024 04:12
Show Gist options
  • Save ozgurg/0ff8e1e315b1cb5c385bda1c25da80e6 to your computer and use it in GitHub Desktop.
Save ozgurg/0ff8e1e315b1cb5c385bda1c25da80e6 to your computer and use it in GitHub Desktop.
Download ZIP
Android Animated Play Pause Button by using AnimatedVectorDrawable
Raw
README.md

Preview: (Please wait a bit)

Preview

Usage

...
if(videoView.isPlaying()) {
	playPause.setState(PlayPauseView.STATE_PAUSE);
	videoView.pause();
	playPause.fadeIn();
} else {
	playPause.setState(PlayPauseView.STATE_PLAY);
	videoView.start();
	playPause.fadeOut();
}
...
...
<PlayPauseView
	android:id="@+id/playPause"
	android:layout_width="24dp"
	android:layout_height="24dp"
	app:srcCompat="@drawable/play_to_pause" />
...
Raw
pause_to_play.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
android:name="playtopause"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<group
android:name="group"
android:pivotX="12"
android:pivotY="12">
<path
android:name="path"
android:pathData="M 8.016 18.984 Q 7.172 18.984 6.586 18.398 Q 6 17.812 6 17.015 L 6 6.984 Q 6 6.187 6.586 5.601 Q 7.172 5.015 8.016 5.015 Q 8.813 5.015 9.399 5.601 Q 9.985 6.187 9.985 6.984 L 9.985 17.015 Q 9.985 17.812 9.399 18.398 Q 8.813 18.984 8.016 18.984 Z M 14.016 6.984 Q 14.016 6.187 14.602 5.601 Q 15.188 5.015 15.985 5.015 Q 16.829 5.015 17.415 5.601 Q 18.001 6.187 18.001 6.984 L 18.001 17.015 Q 18.001 17.812 17.415 18.398 Q 16.829 18.984 15.985 18.984 Q 15.188 18.984 14.602 18.398 Q 14.016 17.812 14.016 17.015 L 14.016 6.984 Z"
android:fillColor="#000"
android:strokeWidth="1"/>
</group>
</vector>
</aapt:attr>
<target android:name="path">
<aapt:attr name="android:animation">
<objectAnimator
android:propertyName="pathData"
android:duration="300"
android:valueFrom="M 6 6.984 Q 6 6.187 6.586 5.601 Q 7.172 5.015 8.016 5.015 Q 8.813 5.015 9.399 5.601 Q 9.985 6.187 9.985 6.984 Q 9.985 9.492 9.985 11.999 Q 9.985 14.507 9.985 17.015 Q 9.985 17.812 9.399 18.398 Q 8.813 18.984 8.016 18.984 Q 8.016 18.984 8.016 18.984 Q 7.172 18.984 6.586 18.398 Q 6 17.812 6 17.015 L 6 6.984 M 14.016 6.984 Q 14.016 6.187 14.602 5.601 Q 15.188 5.015 15.985 5.015 Q 16.829 5.015 17.415 5.601 Q 18.001 6.187 18.001 6.984 L 18.001 17.015 Q 18.001 17.812 17.415 18.398 Q 16.829 18.984 15.985 18.984 Q 15.188 18.984 14.602 18.398 Q 14.016 17.812 14.016 17.015 L 14.016 6.984 L 14.016 6.984"
android:valueTo="M 8.016 6.797 Q 8.016 6.797 8.016 6.797 Q 8.016 6.234 8.532 5.953 Q 9.048 5.672 9.563 6 Q 13.617 8.578 17.672 11.156 Q 18.141 11.437 18.141 12 Q 18.141 12.563 17.672 12.844 Q 13.617 15.422 9.563 18 Q 9.047 18.328 8.532 18.047 Q 8.017 17.766 8.016 17.203 Q 8.016 15.469 8.016 13.734 Q 8.016 12 8.016 10.266 L 8.016 6.797 M 16.009 11.999 Q 16.009 11.999 16.009 11.999 Q 16.009 11.999 16.009 11.999 Q 16.009 11.999 16.009 11.999 Q 16.009 11.999 16.009 11.999 L 16.009 11.999 Q 16.009 11.999 16.009 11.999 Q 16.009 11.999 16.009 11.999 Q 16.009 11.999 16.009 11.999 Q 16.009 11.999 16.009 11.999 L 16.009 11.999 L 16.009 11.999"
android:valueType="pathType"
android:interpolator="@android:interpolator/fast_out_slow_in"/>
</aapt:attr>
</target>
<target android:name="group">
<aapt:attr name="android:animation">
<objectAnimator
android:propertyName="rotation"
android:duration="300"
android:valueFrom="0"
android:valueTo="0"
android:valueType="floatType"
android:interpolator="@android:interpolator/fast_out_slow_in"/>
</aapt:attr>
</target>
</animated-vector>
Raw
play_to_pause.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
android:name="playtopause"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<group
android:name="group"
android:pivotX="12"
android:pivotY="12">
<path
android:name="path"
android:pathData="M 8.016 6.797 Q 8.016 6.234 8.532 5.953 Q 9.048 5.672 9.563 6 L 17.672 11.156 Q 18.141 11.437 18.141 12 Q 18.141 12.563 17.672 12.844 L 9.563 18 Q 9.047 18.328 8.532 18.047 Q 8.017 17.766 8.016 17.203 L 8.016 6.797 Z"
android:fillColor="#000"
android:strokeWidth="1"/>
</group>
</vector>
</aapt:attr>
<target android:name="path">
<aapt:attr name="android:animation">
<objectAnimator
android:propertyName="pathData"
android:duration="300"
android:valueFrom="M 8.016 6.797 Q 8.016 6.797 8.016 6.797 Q 8.016 6.234 8.532 5.953 Q 9.048 5.672 9.563 6 Q 13.617 8.578 17.672 11.156 Q 18.141 11.437 18.141 12 Q 18.141 12.563 17.672 12.844 Q 13.617 15.422 9.563 18 Q 9.047 18.328 8.532 18.047 Q 8.017 17.766 8.016 17.203 Q 8.016 15.469 8.016 13.734 Q 8.016 12 8.016 10.266 L 8.016 6.797 M 16.009 11.999 Q 16.009 11.999 16.009 11.999 Q 16.009 11.999 16.009 11.999 Q 16.009 11.999 16.009 11.999 Q 16.009 11.999 16.009 11.999 L 16.009 11.999 Q 16.009 11.999 16.009 11.999 Q 16.009 11.999 16.009 11.999 Q 16.009 11.999 16.009 11.999 Q 16.009 11.999 16.009 11.999 L 16.009 11.999 L 16.009 11.999"
android:valueTo="M 6 6.984 Q 6 6.187 6.586 5.601 Q 7.172 5.015 8.016 5.015 Q 8.813 5.015 9.399 5.601 Q 9.985 6.187 9.985 6.984 Q 9.985 9.492 9.985 11.999 Q 9.985 14.507 9.985 17.015 Q 9.985 17.812 9.399 18.398 Q 8.813 18.984 8.016 18.984 Q 8.016 18.984 8.016 18.984 Q 7.172 18.984 6.586 18.398 Q 6 17.812 6 17.015 L 6 6.984 M 14.016 6.984 Q 14.016 6.187 14.602 5.601 Q 15.188 5.015 15.985 5.015 Q 16.829 5.015 17.415 5.601 Q 18.001 6.187 18.001 6.984 L 18.001 17.015 Q 18.001 17.812 17.415 18.398 Q 16.829 18.984 15.985 18.984 Q 15.188 18.984 14.602 18.398 Q 14.016 17.812 14.016 17.015 L 14.016 6.984 L 14.016 6.984"
android:valueType="pathType"
android:interpolator="@android:interpolator/fast_out_slow_in"/>
</aapt:attr>
</target>
<target android:name="group">
<aapt:attr name="android:animation">
<objectAnimator
android:propertyName="rotation"
android:duration="300"
android:valueFrom="0"
android:valueTo="0"
android:valueType="floatType"
android:interpolator="@android:interpolator/fast_out_slow_in"/>
</aapt:attr>
</target>
</animated-vector>
Raw
PlayPauseView.java
public class PlayPauseView extends AppCompatImageView {
public static final int STATE_PLAY = 1;
public static final int STATE_PAUSE = 2;
private AnimatedVectorDrawableCompat mPlayToPauseAnim, mPauseToPlay;
private Animation mFadeOutAnim, mFadeInAnim;
public PlayPauseView(Context context) {
super(context);
Init(context);
}
public PlayPauseView(Context context, AttributeSet attrs) {
super(context, attrs);
Init(context);
}
public PlayPauseView(@NonNull Context context, @Nullable AttributeSet attrs, @AttrRes int defStyleAttr) {
super(context, attrs, defStyleAttr);
Init(context);
}
private void Init(Context context) {
mPlayToPauseAnim = AnimatedVectorDrawableCompat.create(context, R.drawable.play_to_pause);
mPauseToPlay = AnimatedVectorDrawableCompat.create(context, R.drawable.pause_to_play);
mFadeOutAnim = AnimationUtils.loadAnimation(context, android.R.anim.fade_out);
mFadeInAnim = AnimationUtils.loadAnimation(context, android.R.anim.fade_in);
}
public void setState(int state) {
switch (state) {
case STATE_PLAY:
this.setImageDrawable(mPlayToPauseAnim);
mPlayToPauseAnim.start();
break;
case STATE_PAUSE:
this.setImageDrawable(mPauseToPlay);
mPauseToPlay.start();
break;
}
}
public void fadeOut() {
this.startAnimation(mFadeOutAnim);
mFadeOutAnim.setFillAfter(true);
}
public void fadeIn() {
this.startAnimation(mFadeInAnim);
mFadeInAnim.setFillAfter(true);
}
}
@ThreeMinutesFix
Copy link

thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment