AnimationDrawingPad FULL CODE

JavaScript

import android.animation.Animator;
import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

import java.util.ArrayList;
import java.util.List;

public class AnimationDrawingPad extends View {

  private Paint paint;
  private List < Path > strokes;
  private boolean isPlaying;
  private AnimatorSet playbackAnimator;

  public AnimationDrawingPad(Context context, AttributeSet attrs) {
    super(context, attrs);
    paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    paint.setColor(Color.BLACK);
    paint.setStrokeWidth(5 f);
    strokes = new ArrayList < > ();
    isPlaying = false;
  }

  @Override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    for (Path stroke: strokes) {
      canvas.drawPath(stroke, paint);
    }
  }

  @Override
  public boolean onTouchEvent(MotionEvent event) {
    if (!isPlaying) {
      float x = event.getX();
      float y = event.getY();
      switch (event.getAction()) {
      case MotionEvent.ACTION_DOWN:
        Path newStroke = new Path();
        newStroke.moveTo(x, y);
        strokes.add(newStroke);
        break;
      case MotionEvent.ACTION_MOVE:
        strokes.get(strokes.size() - 1).lineTo(x, y);
        invalidate();
        break;
      }
    }
    return true;
  }

  public void startPlayback(long durationMillis) {
    if (!isPlaying) {
      isPlaying = true;

      // Create animation objects for each stroke
      List < Animator > strokeAnimators = new ArrayList < > ();
      for (Path stroke: strokes) {
        ObjectAnimator animator = ObjectAnimator.ofFloat(new StrokeAnimatorHelper(stroke), "progress", 0 f, 1 f);
        animator.setDuration(durationMillis);
        strokeAnimators.add(animator);
      }

      // Combine animations into a set and start playback
      playbackAnimator = new AnimatorSet();
      playbackAnimator.playTogether(strokeAnimators);
      playbackAnimator.addListener(new Animator.AnimatorListener() {
        @Override
        public void onAnimationStart(Animator animation) {}

        @Override
        public void onAnimationEnd(Animator animation) {
          isPlaying = false;
        }

        @Override
        public void onAnimationCancel(Animator animation) {}

        @Override
        public void onAnimationRepeat(Animator animation) {}
      });
      playbackAnimator.start();
    }
  }

  public void stopPlayback() {
    if (isPlaying) {
      isPlaying = false;
      playbackAnimator.cancel();
    }
  }

  private static class StrokeAnimatorHelper {
    private final Path stroke;

    public StrokeAnimatorHelper(Path stroke) {
      this.stroke = stroke;
    }

    public void setProgress(float progress) {
      // Animate drawing of the stroke based on progress
      // (Replace with your specific drawing logic)
      Canvas canvas = new Canvas(); // Create a temporary canvas for animation
      float pathLength = stroke.getLength();
      float drawnLength = progress * pathLength;
      Path.FloatSegment segment = new Path.FloatSegment();
      stroke.getFillPath(0, drawnLength, segment);
      canvas.drawPath(segment.getPath(), paint);
      invalidate(); // Trigger redraw to update the view
    }
  }
}

Step 1: Create a new Android Project

Create a new Android project in Android Studio. You can choose an empty activity template or any other template based on your project requirements.

Step 2: Copy the AnimationDrawingPad code

Copy the provided AnimationDrawingPad code into a new Java file in your Android project. Ensure that the file name matches the class name (e.g., AnimationDrawingPad.java).

Step 3: Include the custom view in your XML layout

Open the XML layout file of the activity where you want to use the AnimationDrawingPad and include it in your layout. For example:

xmlCopy code<!-- activity_main.xml -->
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.yourpackage.AnimationDrawingPad
        android:id="@+id/animationDrawingPad"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <!-- Add other UI elements or controls as needed -->

</RelativeLayout>

Make sure to replace "com.yourpackage" with the actual package name of your app.

Step 4: Initialize and use the custom view in your activity

In your MainActivity.java (or any other activity), initialize and use the AnimationDrawingPad:

javaCopy codeimport android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    private AnimationDrawingPad animationDrawingPad;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        animationDrawingPad = findViewById(R.id.animationDrawingPad);

        // Add other initialization or UI setup as needed
    }

    // Add methods for handling user interactions or other functionality

}

Step 5: Implement Playback

You can use the startPlayback and stopPlayback methods to start and stop the playback animation. For example, you can add buttons or other UI elements to trigger the playback:

javaCopy code// Inside your MainActivity.java

public void onStartPlayback(View view) {
    // Start playback with a duration of 2000 milliseconds (2 seconds)
    animationDrawingPad.startPlayback(2000);
}

public void onStopPlayback(View view) {
    // Stop the playback
    animationDrawingPad.stopPlayback();
}

Step 6: Run your application

Run your Android application on an emulator or a physical device. You should see the AnimationDrawingPad in your layout, and you can draw on it. Additionally, you can trigger the playback animation using the implemented buttons.

Feel free to customize the code and UI according to your application's requirements. This example provides a basic setup for integrating the AnimationDrawingPad into an Android project.

import android.animation.Animator;
import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

import java.util.ArrayList;
import java.util.List;

public class AnimationDrawingPad extends View {

  private Paint paint;
  private List < Path > strokes;
  private boolean isPlaying;
  private AnimatorSet playbackAnimator;

  public AnimationDrawingPad(Context context, AttributeSet attrs) {
    super(context, attrs);
    paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    paint.setColor(Color.BLACK);
    paint.setStrokeWidth(5 f);
    strokes = new ArrayList < > ();
    isPlaying = false;
  }

  @Override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    for (Path stroke: strokes) {
      canvas.drawPath(stroke, paint);
    }
  }

  @Override
  public boolean onTouchEvent(MotionEvent event) {
    if (!isPlaying) {
      float x = event.getX();
      float y = event.getY();
      switch (event.getAction()) {
      case MotionEvent.ACTION_DOWN:
        Path newStroke = new Path();
        newStroke.moveTo(x, y);
        strokes.add(newStroke);
        break;
      case MotionEvent.ACTION_MOVE:
        strokes.get(strokes.size() - 1).lineTo(x, y);
        invalidate();
        break;
      }
    }
    return true;
  }

  public void startPlayback(long durationMillis) {
    if (!isPlaying) {
      isPlaying = true;

      // Create animation objects for each stroke
      List < Animator > strokeAnimators = new ArrayList < > ();
      for (Path stroke: strokes) {
        ObjectAnimator animator = ObjectAnimator.ofFloat(new StrokeAnimatorHelper(stroke), "progress", 0 f, 1 f);
        animator.setDuration(durationMillis);
        strokeAnimators.add(animator);
      }

      // Combine animations into a set and start playback
      playbackAnimator = new AnimatorSet();
      playbackAnimator.playTogether(strokeAnimators);
      playbackAnimator.addListener(new Animator.AnimatorListener() {
        @Override
        public void onAnimationStart(Animator animation) {}

        @Override
        public void onAnimationEnd(Animator animation) {
          isPlaying = false;
        }

        @Override
        public void onAnimationCancel(Animator animation) {}

        @Override
        public void onAnimationRepeat(Animator animation) {}
      });
      playbackAnimator.start();
    }
  }

  public void stopPlayback() {
    if (isPlaying) {
      isPlaying = false;
      playbackAnimator.cancel();
    }
  }

  public void pausePlayback() {
    if (isPlaying) {
      isPlaying = false;
      playbackAnimator.pause();
    }
  }

  public void resumePlayback() {
    if (!isPlaying && playbackAnimator != null) {
      isPlaying = true;
      playbackAnimator.resume();
    }
  }

  public void rewindPlayback(long rewindInMillis) {
    if (isPlaying) {
      stopPlayback();
      long newStartTime = Math.max(playbackAnimator.getStartDelay() + playbackAnimator.getTotalDuration() - rewindInMillis, 0);
      startPlayback(playbackAnimator.getTotalDuration() - rewindInMillis);
    }
  }

  public void fastForwardPlayback(long forwardInMillis) {
    if (isPlaying) {
      stopPlayback();
      long newStartTime = Math.min(playbackAnimator.getStartDelay() + forwardInMillis, playbackAnimator.getTotalDuration());
      startPlayback(playbackAnimator.getTotalDuration() - forwardInMillis);
    }
  }

  public void setPlaybackSpeed(float speed) {
    if (isPlaying && playbackAnimator != null) {
      playbackAnimator.setDuration((long)(playbackAnimator.getTotalDuration() / speed));
    }
  }

  private static class StrokeAnimatorHelper {
    private final Path stroke;

    public StrokeAnimatorHelper(Path stroke) {
      this.stroke = stroke;
    }

    public void setProgress(float progress) {
      // Animate drawing of the stroke based on progress
      // (Replace with your specific drawing logic)
      Canvas canvas = new Canvas(); // Create a temporary canvas for animation
      float pathLength = stroke.getLength();
      float drawnLength = progress * pathLength;
      Path.FloatSegment segment = new Path.FloatSegment();
      stroke.getFillPath(0, drawnLength, segment);
      canvas.drawPath(segment.getPath(), paint);
      invalidate(); // Trigger redraw to update the view
    }
  }
}

Step 1: Create a new Android Project

Start by creating a new Android Studio project. Make sure you have the necessary SDK and tools installed.

Step 2: Copy AnimationDrawingPad Class

Copy the entire AnimationDrawingPad class into your project. You can create a new Java file with the name AnimationDrawingPad.java and paste the code into it.

Step 3: Add AnimationDrawingPad to XML Layout

Open the XML layout file where you want to include the drawing pad. Add the following XML snippet to include the AnimationDrawingPad:

<com.yourpackage.AnimationDrawingPad
    android:id="@+id/animationDrawingPad"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Replace com.yourpackage with the actual package name of your project.

Step 4: Initialize AnimationDrawingPad in Activity/Fragment

In your activity or fragment, find the AnimationDrawingPad view and initialize it:

AnimationDrawingPad drawingPad = findViewById(R.id.animationDrawingPad);

Step 5: Handle Touch Events

By default, the drawing pad will capture touch events and allow users to draw strokes. You don't need to do anything for basic drawing functionality.

Step 6: Start Playback

To play back the drawing, call the startPlayback method with the desired duration:

drawingPad.startPlayback(3000); // Play for 3 seconds

Step 7: Stop, Pause, and Resume Playback

You can stop, pause, and resume the playback using the following methods:

drawingPad.stopPlayback();   // Stop playback
drawingPad.pausePlayback();  // Pause playback
drawingPad.resumePlayback(); // Resume playback

Step 8: Rewind and Fast Forward Playback

You can rewind and fast forward the playback by specifying the time to rewind or fast forward in milliseconds:

drawingPad.rewindPlayback(1000);        // Rewind by 1 second
drawingPad.fastForwardPlayback(2000);   // Fast forward by 2 seconds

Step 9: Set Playback Speed

Adjust the playback speed using the setPlaybackSpeed method. A speed of 1.0 is normal speed:

drawingPad.setPlaybackSpeed(2.0f); // Double the playback speed

Step 10: Customize Drawing Logic (Optional)

If you want to customize the drawing logic, you can modify the setProgress method inside the StrokeAnimatorHelper class.

Step 11: Run Your Application

Build and run your application on an emulator or a physical device. You should now be able to draw on the canvas and play back the drawing animation.