Andorid - Graphics & Animation Tutorial 1 -Circular Gauge

This sample demonstrates usage of Android Graphics & Animation APIs to create animated Graphic Controls like Gauge, Thermometer. In this series, Part 1 discusses about to create animated circular Gauge, which can be used to show Speed, Pressure in Graphics gauge format

instead of showing in simple text format.

Figure 1: shows the screen shot of circular gauge application, it can show value from the range 0-100, currently the pointer is pointing to set value of 45. Range can be customized and Any unit

can be associated with the Gauge.

1.CricularGauge Screen

This is the background screen consists of Circular Gauge Image, It draws the Image bitmap during OnDraw() method call.

public class CircularGaugeScreen extends View
{
private final int RADIUS_O = 100;
private final int RADIUS_I = 95;
private final int POINTER_BASE = 8;
private int endAngle = 0;
private Bitmap gaugeBitmap = null;
private Bitmap gaugeBitmap2 = null;
　
　
public CircularGaugeScreen(Context context) {
super(context);
// TODO Auto-generated constructor stub
// decode an image with transparency
InputStream is = context.getResources().openRawResource(R.drawable.circulargauge);
gaugeBitmap = BitmapFactory.decodeStream(is);
// create a deep copy of it using getPixels() into different configs
int w = gaugeBitmap.getWidth();
int h = gaugeBitmap.getHeight();
int[] pixels = new int[w*h];
gaugeBitmap.getPixels(pixels, 0, w, 0, 0, w, h);
gaugeBitmap2 = Bitmap.createBitmap(pixels, 0, w, w, h,
Bitmap.Config.ARGB_8888);
}
　
@Override
protected void onDraw(Canvas canvas) {
canvas.drawBitmap(gaugeBitmap2, 100, 100, null);
}
}

2. Circular Gauge Pointer.

This is the front screen which draws the pointer and uses Animation for the automatic rotation of the pointer. If user sets any set value then Animation stops and shows set value.

RotateAnimation class is used for the Animation and rotation angle changes from 0 to 360 degree.

private void CreateAnimation(int startAngle, int endAngle,Canvas canvas)
{
rotateAnimation = new RotateAnimation(startAngle, endAngle,centerX, centerY);
rotateAnimation.setRepeatCount(Animation.INFINITE);
rotateAnimation.setRepeatMode(Animation.RESTART);
rotateAnimation.setDuration(50000);
rotateAnimation.setInterpolator(new AccelerateDecelerateInterpolator());
rotateAnimation.setAnimationListener(this);
startAnimation(rotateAnimation);
}

getArrowPath() is called during OnDraw() method call, which draws the pointer based on the current angle.

private Path getArrowPath(int centerX, int centerY,int width, int angle, int radius)
{

Path path = new Path();
path.setFillType(FillType.EVEN_ODD);
int x, y, sx,sy;
double rdeg1 = (Math.PI * (90 - angle)) / 180;
//fill the base line first
int iradius = width/2;
sx = (int) (centerX + (iradius * Math.cos(rdeg1)));
sy = (int) (centerY + (iradius * Math.sin(rdeg1)));
path.moveTo(sx, sy);
double rdeg2 = (Math.PI * (270-angle)) / 180;
x = (int) (centerX + (iradius * Math.cos(rdeg2)));
y = (int) (centerY + (iradius * Math.sin(rdeg2)));
path.lineTo(x, y);
double rdeg = (Math.PI * angle) / 180;
//fill the arrow line 1
x = (int) (centerX + (radius * Math.cos(rdeg)));
y = (int) (centerY + (radius * Math.sin(rdeg)));
path.lineTo(x, y);
//fill the arrow line 2
path.moveTo(sx, sy);
path.close();
return path;
}

3.CircularGuageLayout

Main screen which combines both the background screen (CircularGaugeScreen) and foreground screen ( CircularGaugePointer) and adds UI controls for setting the value.

public class CircularGaugeLayout extends RelativeLayout {
private final CircularGaugeScreen speedoMeterScreen;
private final CircularGaugePointer speedoMeterPointer;
　
public CircularGaugeLayout(Context context) {
super(context);
// TODO Auto-generated constructor stub
speedoMeterScreen = new CircularGaugeScreen(context);
speedoMeterPointer = new CircularGaugePointer(context);
addView(speedoMeterScreen);
addView(speedoMeterPointer);
TableLayout layout = new TableLayout(context);
addView(layout);
}

}

Summary:
In this article, you have learnt to use Android Graphics & Animation APIs. Post here if you have any queries.Have Learning!!!