Getting Start Using Graphics of Android

Introduce

In android’s view, bitmap,graphics, opengl and animation are included in graphics. The classes about shape will be introduced in this article. The other content will be introduced later.

Getting Started

Shape, Shader, ColorFilter and MaskFilter

Shape

Drawing a shape is very simplely. Here list codes drawing some simple shapes.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
// create Paint
Paint p = new Paint();  
p.setColor(Color.RED);// set color as red

canvas.drawText("Draw circle", 10, 20, p);// draw text
canvas.drawCircle(60, 20, 10, p);// small circle
p.setAntiAlias(true);// set Jagged effect
canvas.drawCircle(120, 20, 20, p);// big circle  

canvas.drawText("Line and Arc：", 10, 60, p);
p.setColor(Color.GREEN);// set green 
canvas.drawLine(60, 40, 100, 40, p);// line
canvas.drawLine(110, 40, 190, 80, p);  

p.setStyle(Paint.Style.STROKE);//only path draw
RectF oval1=new RectF(150,20,180,40);  
canvas.drawArc(oval1, 180, 180, false, p);//small arc
oval1.set(190, 20, 220, 40);  
canvas.drawArc(oval1, 180, 180, false, p);//small arc
oval1.set(160, 30, 210, 60);  
canvas.drawArc(oval1, 0, 180, false, p);//small arc

canvas.drawText("draw Rect: ", 10, 80, p);  
p.setColor(Color.GRAY);
p.setStyle(Paint.Style.FILL);
canvas.drawRect(60, 60, 80, 80, p);// rect
canvas.drawRect(60, 90, 160, 100, p);//rect

canvas.drawText("Arc and Oval:", 10, 120, p);  
 
Shader mShader = new LinearGradient(0, 0, 100, 100,  
        new int[] { Color.RED, Color.GREEN, Color.BLUE, Color.YELLOW,  
                Color.LTGRAY }, null, Shader.TileMode.REPEAT); // draw a shader
p.setShader(mShader);  
// p.setColor(Color.BLUE);  
RectF oval2 = new RectF(60, 100, 200, 240);
canvas.drawArc(oval2, 200, 130, true, p);  
// draw arc when true, otherwise draw curve  
//draw oval
oval2.set(210,100,250,130);  
canvas.drawOval(oval2, p);  

canvas.drawText("triangle：", 10, 200, p);  

Path path = new Path();  
path.moveTo(80, 200);// draw start point
path.lineTo(120, 250);  
path.lineTo(80, 250);  
path.close(); // let these pointer construct a shape
canvas.drawPath(path, p);  

// draw hexagon, six edges
p.reset();//reset p
p.setColor(Color.LTGRAY);  
p.setStyle(Paint.Style.STROKE);
Path path1=new Path();  
path1.moveTo(180, 200);  
path1.lineTo(200, 200);  
path1.lineTo(210, 210);  
path1.lineTo(200, 220);  
path1.lineTo(180, 220);  
path1.lineTo(170, 210);  
path1.close();
canvas.drawPath(path1, p);  
 
  
//Rounded Rectangle
p.setStyle(Paint.Style.FILL);
p.setColor(Color.LTGRAY);  
p.setAntiAlias(true);
canvas.drawText("Rounded Rectangle:", 10, 260, p);  
RectF oval3 = new RectF(80, 260, 200, 300)
canvas.drawRoundRect(oval3, 20, 15, p);
  
//Bezier curve
canvas.drawText("Bezier curve:", 10, 310, p);  
p.reset();  
p.setStyle(Paint.Style.STROKE);  
p.setColor(Color.GREEN);  
Path path2=new Path();  
path2.moveTo(100, 320);//path start point 
path2.quadTo(150, 310, 170, 400); //path end point
canvas.drawPath(path2, p);//draw 
  
//Point
p.setStyle(Paint.Style.FILL);  
canvas.drawText("画点：", 10, 390, p);  
canvas.drawPoint(60, 390, p);//Point  
canvas.drawPoints(new float[]{60,400,65,400,70,400}, p);//multi Points
  
//draw bitmap or Textures
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher);  
canvas.drawBitmap(bitmap, 250,360, p);

Shader

Xml and java code can draw shader

1
2
3
4
5
6
7
8
9
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    type="rectangle">
  <gradient
    android:startColor="@color/blue"
    android:centerColor="@color/white"
    android:endColor="@color/red"
    android:angle="45"/>
</shape>

1
2
3
4
5
6
7
8
9
10
int[] rainbow = getRainbowColors();
Shader shader = new LinearGradient(0, 0, 0, w, rainbow, 
    null, Shader.TileMode.MIRROR);

Matrix matrix = new Matrix();
matrix.setRotate(90);
shader.setLocalMatrix(matrix);

getPaint().setShader(shader);
}

Bitmap Shader

1
2
3
4
5
Bitmap bitmap = BitmapFactory.decodeResource(
    getResources(), R.drawable.cheetah_tile);
Shader shader = new BitmapShader(bitmap, 
    Shader.TileMode.REPEAT, Shader.TileMode.REPEAT);
textView.getPaint().setShader(shader);

ColorFilter

ColorMatrix: Grayscale

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Bitmap bitmap = Bitmap.createBitmap(original.getWidth(), 
    original.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);

Paint paint = new Paint();
paint.setColorFilter(new ColorMatrixColorFilter(
    getColorMatrix()));
canvas.drawBitmap(original, 0, 0, paint);

return bitmap;

private ColorMatrix getColorMatrix() {
  ColorMatrix colorMatrix = new ColorMatrix();
  colorMatrix.setSaturation(0);
  return colorMatrix;
}

ColorMatrix: Sepia

1
2
3
4
5
6
7
8
9
10
11
12
private ColorMatrix getColorMatrix() {
  ColorMatrix colorMatrix = new ColorMatrix();
  colorMatrix.setSaturation(0);

  ColorMatrix colorScale = new ColorMatrix();
  colorScale.setScale(1, 1, 0.8f, 1);

  // Convert to grayscale, then apply brown color
  colorMatrix.postConcat(colorScale);

  return colorMatrix;
}

ColorMatrix: Binary

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
private ColorMatrix getColorMatrix() {
  ColorMatrix colorMatrix = new ColorMatrix();
  colorMatrix.setSaturation(0);

  float m = 255f;
  float t = -255*128f;
  ColorMatrix threshold = new ColorMatrix(new float[] {
      m, 0, 0, 1, t,
      0, m, 0, 1, t,
      0, 0, m, 1, t,
      0, 0, 0, 1, 0
  });

  // Convert to grayscale, then scale and clamp
  colorMatrix.postConcat(threshold);

  return colorMatrix;
}

you also implement ColorMatrix: Invert, ColorMatrix: Alpha blue effect

LightingColorFilter

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/** Create a colorfilter that multiplies the RGB channels by one color, 
    and then adds a second color. */
LightingColorFilter(int mul, int add)
R' = R * mul.R + add.R
G' = G * mul.G + add.G
B' = B * mul.B + add.B
//Little brother of ColorMatrixColorFilter
[ mul.R,     0,     0, 0, add.R
      0, mul.G,     0, 0, add.G,
      0,     0, mul.B, 0, add.B,
      0,     0,     0, 1,     0 ]
/*
mul.R = Color.red(mul) / 255f
e.g. #ff0000 → 0xff / 255 = 255 / 255 = 1
*/

Porter-Duff Modes

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Bitmap bitmap = Bitmap.createBitmap(
    original.getWidth(), original.getHeight(), 
    Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);

// Draw the original bitmap (DST during Porter-Duff transfer)
canvas.drawBitmap(original, 0, 0, null);

// DST_IN = Whatever was there, keep the part that overlaps 
// with what I'm drawing now
Paint maskPaint = new Paint();
maskPaint.setXfermode(
    new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
canvas.drawBitmap(mask, 0, 0, maskPaint);

Path effects and other effect all can be implemented with Porter-Duff

MaskFilter

EmbossMaskFilter

1
2
3
4
5
6
7
8
9
10
private void applyFilter(
    TextView textView, float[] direction, float ambient, 
    float specular, float blurRadius) {
  if (Build.VERSION.SDK_INT >= 11) {
    textView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
  }
  EmbossMaskFilter filter = new EmbossMaskFilter(
    direction, ambient, specular, blurRadius);
  textView.getPaint().setMaskFilter(filter);
}

ref:

android-shaders-filters

Animation and Graphics