Any idea how to create an elegant ripple effect for audio recording button - as in Google Keep

Question

Google Keep's audio recording dialog, as a nice ripple effect around the recording button, when you perform voice recording.

I was wondering, what is the right way to implement such elegant ripple effect.

The closest info I can found is : https://github.com/wotomas/VoiceRipple

However, when I test run the demo, I found it isn't as smooth, and as elegant as Google Keep's

The technique, which the library is using, is doing a 50ms delayed busy looping call - https://github.com/wotomas/VoiceRipple/blob/master/ripplelibrary/src/main/java/info/kimjihyok/ripplelibrary/VoiceRippleView.java#L334

private Runnable updateRipple = new Runnable() {
    @Override
    public void run() {
        if (isRecording) {
            drop(recorder.getMaxAmplitude());
            currentRecordedTime = currentRecordedTime + 50;
            if (currentRenderer instanceof TimerCircleRippleRenderer) {
                ((TimerCircleRippleRenderer)currentRenderer).setCurrentTimeMilliseconds(currentRecordedTime);
            }
            handler.postDelayed(this, 50);  // updates the visualizer every 50 milliseconds
        }
    }
};

That doesn't sound like an optimal solution to me. Not only the effect is not elegant, it consumes a lot of battery/cpu resource.

Do you have any idea, what is a proper way, to achieve such elegant ripple effect?

Answer 1

The following implementation is using scale Animator. It was able to achieve a smooth animation, with having a busy looping.

https://github.com/skyfishjy/android-ripple-background/blob/master/library/src/main/java/com/skyfishjy/library/RippleBackground.java