Android - Implementing Glow Effects

Some of you might remember vector monitors as used in the original Asteroids and Star Wars arcade games. These displays could only draw images composed of lines but didn't suffer form aliasing or pixelation. On the other hand, one interesting artefact was that each line drawn had a soft glow around it. A similar effect is relatively easy to achieve when drawing to a Canvas in Android. The trick is to set a BlurMaskFilter on all the relevant Paint objects.

The following code does just that, and draws some text and graphics to demonstrate the effect (see Screen Shot 1 below). You'll notice that the effect does look a bit odd on exactly horizontal and vertical lines. In this case I'm referring to the sides of the green rectangle. I've also included a screen shot (see Screen Shot 2) taken from one of my applications. Here I have applied the effect on the red and green gauge "bars".

Screen Shot 1

Screen Shot 2

Code-wise there isn't much to discuss. The main Activity does nothing more than to instantiate a custom view called GlowView. The custom view consists of just a constructor and the onDraw function. The constructor creates five paint objects and sets the appropriate blur mask on lines 15, 21, 29, 37, and 44. Two things need to be kept in mind. First, the BlurMaskFilter style must be set to SOLID. Second, the view's layer type will probably have to be set to LAYER_TYPE_SOFTWARE (see line 10) due to issues with newer versions of Android. More details here. This might render the technique unusable for complex animations.

Main Activity
01: public class GlowActivity  
02: extends android.app.Activity  
03: {  
04:   @Override  
05:   public void onCreate(android.os.Bundle savedInstanceState)  
06:   {  
07:     super.onCreate(savedInstanceState);  
08:     this.setContentView(new GlowView(this));  
09:   }  
10: }  

Custom View
01: public class GlowView  
02: extends android.view.View  
03: {  
04:   public android.graphics.Paint red, blue, green, cyan, yellow;  
05:     
06:   public GlowView(android.content.Context ctx)  
07:   {  
08:     super(ctx);  
09:      
10:     this.setLayerType(android.view.View.LAYER_TYPE_SOFTWARE, null);  
11:      
12:     red=new android.graphics.Paint(  
13:       android.graphics.Paint.ANTI_ALIAS_FLAG|android.graphics.Paint.DITHER_FLAG);  
14:     red.setColor(0xffff0000);  
15:     red.setMaskFilter(new android.graphics.BlurMaskFilter(20,   
16:       android.graphics.BlurMaskFilter.Blur.SOLID));  
17:      
18:     blue=new android.graphics.Paint(  
19:       android.graphics.Paint.ANTI_ALIAS_FLAG|android.graphics.Paint.DITHER_FLAG);  
20:     blue.setColor(0xff0000ff);  
21:     blue.setMaskFilter(new android.graphics.BlurMaskFilter(20,   
22:       android.graphics.BlurMaskFilter.Blur.SOLID));  
23:    
24:     green=new android.graphics.Paint(  
25:       android.graphics.Paint.ANTI_ALIAS_FLAG|android.graphics.Paint.DITHER_FLAG);  
26:     green.setColor(0xff00ff00);  
27:     green.setStyle(android.graphics.Paint.Style.STROKE);  
28:     green.setStrokeWidth(5);  
29:     green.setMaskFilter(new android.graphics.BlurMaskFilter(20,   
30:       android.graphics.BlurMaskFilter.Blur.SOLID));  
31:       
32:     cyan=new android.graphics.Paint(  
33:       android.graphics.Paint.ANTI_ALIAS_FLAG|android.graphics.Paint.DITHER_FLAG);  
34:     cyan.setColor(0xff00ffff);  
35:     cyan.setStrokeWidth(5);  
36:     cyan.setStyle(android.graphics.Paint.Style.STROKE);  
37:     cyan.setMaskFilter(new android.graphics.BlurMaskFilter(20,   
38:       android.graphics.BlurMaskFilter.Blur.SOLID));  
39:       
40:     yellow=new android.graphics.Paint(  
41:       android.graphics.Paint.ANTI_ALIAS_FLAG|android.graphics.Paint.DITHER_FLAG);  
42:     yellow.setColor(0xffffff00);  
43:     yellow.setTextSize(50);  
44:     yellow.setMaskFilter(new android.graphics.BlurMaskFilter(20,   
45:       android.graphics.BlurMaskFilter.Blur.SOLID));  
46:   }  
47:     
48:   @Override  
49:   protected void onDraw (android.graphics.Canvas c)  
50:   {  
51:     float xs, ys;  
52:      
53:     xs=c.getWidth()/100;  
54:     ys=c.getHeight()/100;  
55:      
56:     c.drawColor(0xff000000);  
57:     c.drawText("this is some glowing text", 10*xs, 10*ys, yellow);  
58:     c.drawRect(10*xs, 20*ys, 90*xs, 90*ys, green);  
59:     c.drawRect(5*xs, 15*ys, 80*xs, 80*ys, blue);  
60:     c.drawOval(15*xs, 25*ys, 70*xs, 85*ys, red);  
61:     c.drawLine(50*xs, 5*ys, 95*xs, 50*ys, cyan);  
62:     c.drawLine(95*xs, 50*ys, 50*xs, 95*ys, cyan);  
63:     c.drawLine(50*xs, 95*ys, 5*xs, 50*ys, cyan);  
64:     c.drawLine(5*xs, 50*ys, 50*xs, 5*ys, cyan);  
65:   }  
66: }