Androidで円形のリアルタイムBlur効果を付ける(RealtimeBlurView)

概要

リアルタイムに円形のViewでBlur効果を実現したので、備忘録としてまとめておきます。

完成イメージ

速度・回転数メータの背景が、黒い円形でBlur効果が付いている事が分かります。

ベースとなるライブラリ

mmin18氏の「RealtimeBlurView」を改造します。
※jcenterがEOLとなり、READMEの通りに導入しようとするとインポート出来ないのでjitpackから取ります。

    dependencies {
            implementation 'com.github.mmin18:RealtimeBlurView:-SNAPSHOT'
    }

コード

BlurCircleView.java

import android.graphics.Canvas;
import android.graphics.Path;
import android.util.AttributeSet;

import androidx.annotation.NonNull;

import com.github.mmin18.widget.RealtimeBlurView;

public class BlurCircleView extends RealtimeBlurView {

    private Path clipPath;

    public BlurCircleView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        clipPath = new Path();
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        updateClipPath(w, h);
    }

    private void updateClipPath(int width, int height) {
        // Calculate radius
        float radius = Math.min(width, height) / 2f;
        // Create a circular path
        clipPath.reset();
        clipPath.addCircle(width / 2f, height / 2f, radius, Path.Direction.CW);
        clipPath.close();
    }

    @Override
    protected void onDraw(@NonNull Canvas canvas) {
        // Clip the canvas to the circular path
        canvas.clipPath(clipPath);
        super.onDraw(canvas);
    }
}

解説

円形のPathを作成して、描画時に切り抜くだけの簡単な処理で出来ます。

    private void updateClipPath(int width, int height) {
        // Calculate radius
        float radius = Math.min(width, height) / 2f;
        // Create a circular path
        clipPath.reset();
        clipPath.addCircle(width / 2f, height / 2f, radius, Path.Direction.CW);
        clipPath.close();
    }

updateClipPathメソッド内でPathの形状を変えると、三角や星などの複雑な形状でも描画出来ます。