Search code examples
androidpainttouch-event

Dynamically generated line with glow effective


I want to draw line with glow effect like this
glow line
The problem - i must generate this line in program in dependence on user's interaction ( the form of line will be generated in onTouchEvent - ACTION_MOVE ).

Can i generate this effect without xml files or drawing premaid bitmap ?


Solution

  • I imitate this effect in this way :

    1. Draw line with BlurMaskFilter;
    2. Draw over it normal line.

    I use Path class to generate line and save coordinates of MOVE_ACTION event to generate only part of path what i need.

    Create 2 Paint()s:

    _paintSimple = new Paint();
    _paintSimple.setAntiAlias(true);
    _paintSimple.setDither(true);
    _paintSimple.setColor(Color.argb(248, 255, 255, 255));
    _paintSimple.setStrokeWidth(20f);
    _paintSimple.setStyle(Paint.Style.STROKE);
    _paintSimple.setStrokeJoin(Paint.Join.ROUND);
    _paintSimple.setStrokeCap(Paint.Cap.ROUND);
    
    _paintBlur = new Paint();
    _paintBlur.set(_paintSimple);
    _paintBlur.setColor(Color.argb(235, 74, 138, 255));
    _paintBlur.setStrokeWidth(30f);
    _paintBlur.setMaskFilter(new BlurMaskFilter(15, BlurMaskFilter.Blur.NORMAL)); 
    

    And draw twice my Path():

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawPath(mPath, _paintBlur);
        canvas.drawPath(mPath, _paintSimple);
    }