Search code examples
androidbuttonandroid-animationandroid-imageviewscaletransform

Pulsating button animation in Android


I'm working with a Voice recognition application and I want to make my play/stop button "pulse" when it's recording. Something like this:

enter image description here

I have tried to make a ScaleAnimation, doing the button grow, but of course, it makes grow all the button.

   public static ObjectAnimator pulseAnimation(ImageView target){

    ObjectAnimator scaleDown = ObjectAnimator.ofPropertyValuesHolder(target,
            PropertyValuesHolder.ofFloat("scaleX", 1.1f),
            PropertyValuesHolder.ofFloat("scaleY", 1.1f));
    scaleDown.setDuration(310);
    scaleDown.setRepeatCount(ObjectAnimator.INFINITE);
    scaleDown.setRepeatMode(ObjectAnimator.REVERSE);

    return scaleDown;
}

So the idea is achieve something like that but just with a alpha behind the actual button. I want to know if it's possible to do this with an alpha animation or something before add a second "Alpha Button" behind my button to make it grow and achieve this effect.


Solution

  • Finally I found the solution! I overrided the onDraw method and draw a first circle for my button and, when my boolean is true. I draw a second circle with an alpha as a background. Making a pulsating effect:

     @Override
    protected void onDraw(Canvas canvas) {
    
        int w = getMeasuredWidth();
        int h = getMeasuredHeight();
        mCirclePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mCirclePaint.setColor(mColor);
        mBackgroundPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mBackgroundPaint.setColor(Util.adjustAlpha(mColor, 0.4f));
        //Draw circle
        canvas.drawCircle(w/2, h/2, MIN_RADIUS_VALUE , mCirclePaint);        
        if (mAnimationOn) {
            if (mRadius >= MAX_RADIUS_VALUE)
                mPaintGoBack = true;
            else if(mRadius <= MIN_RADIUS_VALUE)
                mPaintGoBack = false;
            //Draw pulsating shadow
            canvas.drawCircle(w / 2, h / 2, mRadius, mBackgroundPaint);
            mRadius = mPaintGoBack ? (mRadius - 0.5f) : (mRadius + 0.5f);
            invalidate();
        }
    
        super.onDraw(canvas);
    }
     public void animateButton(boolean animate){
        if (!animate)
            mRadius = MIN_RADIUS_VALUE;
        mAnimationOn = animate;
        invalidate();
    }