Любой Android разработчик работал с кнопками, поэтому видел ripple эффект и всю его красоту.

Иногда хочется реализовать что-нибудь кастомное нежели стандартные вещи, которые уже предоставляются компонентами Material Design.

Поэтому я решил написать наследник AppCompatImageView и сделать для него свой ripple эффект с минимальным количеством кода.

Здесь вы можете посмотреть как это выглядит.

Сразу выкладываю код:

private class RippleAnimator(private var radius: Float, private var delay: Long) {

    private val animators = mutableListOf<ValueAnimator>()
    private var isRunning: Boolean = false

    fun changeRippleRadius(radius: Float) {
        this.radius = radius
    }

    fun changeDelay(delay: Long) {
        this.delay = delay
    }

    fun start(updateListener: ValueAnimator.AnimatorUpdateListener) {
        val anim = ValueAnimator.ofFloat(0f, radius)
        anim.addUpdateListener(updateListener)

        anim.doOnStart { isRunning = true }
        anim.doOnEnd { isRunning = false }
        anim.duration = delay

        animators.firstOrNull()?.cancel()
        animators.clear()

        animators.add(anim)
        anim.start()
    }

    fun stop(after: () -> Unit) {
        if (isRunning) {
            animators.firstOrNull()?.doOnEnd {
                after()
            }
        } else {
            after()
        }
    }
}

class RippleImageButton @JvmOverloads constructor(
    ctx: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : AppCompatImageView(ctx, attrs, defStyleAttr) {

    private var radius: Float = 0f
    private var initial: Float = 0f

    private var pointX = 0f
    private var pointY = 0f


    private val paint = Paint(Paint.ANTI_ALIAS_FLAG)

    private val rippleAnimator = RippleAnimator(0f, 300L)

    init {
        isClickable = true
        changeRippleColor(Color.GREEN)
    }

    fun changeRippleDuration(duration: Long) {
        rippleAnimator.changeDelay(duration)
    }

    fun changeRippleColor(color: Int) {
        paint.color = Color.argb(90, Color.red(color), Color.green(color), Color.blue(color))
    }

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        super.onSizeChanged(w, h, oldw, oldh)
        rippleAnimator.changeRippleRadius(w * 2f)
        radius = w * 2f
    }

    override fun onTouchEvent(event: MotionEvent): Boolean {

        when (event.action) {
            MotionEvent.ACTION_DOWN -> {
                pointX = event.x
                pointY = event.y

                rippleAnimator.start {
                    initial = it.animatedValue as Float
                    invalidate()
                }
            }
            MotionEvent.ACTION_UP -> {
                rippleAnimator.stop {
                    initial = 0f
                    invalidate()
                }
            }
        }
        return true
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        canvas.drawCircle(pointX, pointY, initial, paint)

    }

}

Прошу прощения, что без пояснений, добавлю если кто-нибудь не разберется :)

Основная проблема заключается в создании маленькой длительности и возможности отменять предыдущий ripple эффект при повторном нажатии.

RippleImageButton далеко не является идеальным и не соотвествует Material Design стандартам, я лишь хотел показать возможность такого варианта.

Всем хорошего кода :)