Develop Reference

Drawing background color between limit lines

Im trying to draw colors between limit lines in a LineChart, by extending the LineChart class and overriding the onDraw method. Im doing it as seen in https://github.com/PhilJay/MPAndroidChart/issues/485 where colored rectangles are simply drawn on the canvas:
public class CustomLineChart extends LineChart {
protected Paint mYAxisZonePaint;
protected String[] arrayColors = {"#FFFFFF","#F4D03F","#F5B041","#EB984E","#DC7633"};
#Override
protected void init() {
super.init();
mYAxisZonePaint = new Paint();
mYAxisZonePaint.setStyle(Paint.Style.FILL);
}
#Override
protected void onDraw(Canvas canvas) {
List<LimitLine> limitLines = mAxisLeft.getLimitLines();
if (limitLines == null || limitLines.size() < 4){
super.onDraw(canvas);
return;
}
float[] pts = new float[2];
float startPts = 0;
for (int i = 0; i < limitLines.size(); i++) {
pts[0] = limitLines.get(i).getLimit();
pts[1] = startPts;
mLeftAxisTransformer.pointValuesToPixel(pts);
mYAxisZonePaint.setColor(Color.parseColor(arrayColors[i]));
canvas.drawRect(mViewPortHandler.contentLeft(), pts[1], mViewPortHandler.contentRight(), pts[0], mYAxisZonePaint);
startPts = limitLines.get(i).getLimit();
}
super.onDraw(canvas);
}
}
With the code above im able to draw the colored rectangles as a background behind the data on the line chart as seen here
However when I scroll on the Y-axis, the rectangles will "overflow" into the area where X-axis labels are drawn as demonstrated in this image
How should i draw the colored background so it doesn't color the area where X-axis labels are drawn, similar to how the line data and limit lines are cut off just above the X-axis?

It seems like i have found a solution to my issue. Inside the onDraw method i should restrict the area that the following draw operations can write to. I added the following to my onDraw method:
#Override
protected void onDraw(Canvas canvas) {
List<LimitLine> limitLines = mAxisLeft.getLimitLines();
// Saves current canvas
int clipRestoreCount = canvas.save();
// Makes sure that the colored background cannot be drawn outside the content-rect. Otherwise the colored background would be drawn above and beneath the graph "borders".
canvas.clipRect(mViewPortHandler.getContentRect());
if (limitLines == null || limitLines.size() < 4){
super.onDraw(canvas);
return;
}
float[] pts = new float[2];
float startPts = 0;
for (int i = 0; i < limitLines.size(); i++) {
pts[0] = limitLines.get(i).getLimit();
pts[1] = startPts;
mLeftAxisTransformer.pointValuesToPixel(pts);
mYAxisZonePaint.setColor(Color.parseColor(arrayColors[i]));
canvas.drawRect(mViewPortHandler.contentLeft(), pts[1], mViewPortHandler.contentRight(), pts[0], mYAxisZonePaint);
startPts = limitLines.get(i).getLimit();
}
// Removes the clipping rectangles so rest of graph elements can be drawn (like x-axis/y-axis labels)
canvas.restoreToCount(clipRestoreCount);
super.onDraw(canvas);
}
Result:

Android Wear: animation in WatchFace

I would to create an animated WatchFace for Android Wear.
I've 20 images to add (or to change completely) every X ms to the background.
Now: i've followed this tutorial but the animation doesn't start. I see only one of the twenty bitmap over my background:
if (isInAmbientMode()) {
canvas.drawBitmap(mBackgroundAmbient, SRC, DEST, null);
} else {
canvas.drawBitmap(mBackground, SRC, DEST, null);
for (int i = 0; i < LoopBMP.length; i++) {
canvas.save();
Bitmap cloud = LoopBMP[i];
canvas.drawBitmap(cloud,centerX, centerY,null);
canvas.restore();
}
}
Any suggestion?

You're misunderstanding how the CanvasWatchFaceService.Engine does its drawing. I'm guessing that the code snippet you posted is in your onDraw method; this method is called once for each frame of your animation.
Meaning that you need to move your animation "loop" outside of the onDraw method. There are several ways to accomplish this, but I've dummied up one below based on your code.
private int i;
#Override
public void onDraw(Canvas canvas, Rect bounds) {
super.onDraw(canvas, bounds);
// probably other code here
if (isInAmbientMode()) {
canvas.drawBitmap(mBackgroundAmbient, SRC, DEST, null);
} else {
canvas.drawBitmap(mBackground, SRC, DEST, null);
if (i < LoopBMP.length) {
canvas.save();
Bitmap cloud = LoopBMP[i];
canvas.drawBitmap(cloud,centerX, centerY,null);
canvas.restore();
i++;
// probably want an X-ms delay here to time the animation
invalidate();
} else {
i = 0;
}
}
// probably other code here
}
Note that this is a snippet I just threw together to demonstrate what I'm talking about; it's by no means ready-to-run. In particular, you will want a delay between frames of your animation; you can implement that with a Handler like the one used for the second hand in this sample: http://developer.android.com/samples/WatchFace/Wearable/src/com.example.android.wearable.watchface/AnalogWatchFaceService.html#l117

How to draw a function curve in android?

I have a function, y = 50sin(x/50) + 100.
Now what i want to do is to draw a curve for this function, but without any additional info from the graph plotters, I just need a wave on the screen. The X should correspond to my X parameter of the screen and Y to the Y parameter of the screen.
Here is the code of my current view.
public class Sinusoid extends View {
Paint paint = new Paint();
public Sinusoid(Context context) {
super(context);
paint.setColor(Color.RED);
}
#Override
public void onDraw(Canvas canvas) {
//todo draw the line using myFunction
}
private double myFunction(double x){
return 50 * Math.sin(x / 50) + 100;
}
}
Now the question is, what should i fill in my TODO?
Please help, any documentation or example will be very useful.
Thanks in advance.

The idea is to have something like this:
#Override
public void onDraw(Canvas canvas) {
for (int x=0; x<canvas.getWidth();x++) {
canvas.drawPoint(x,(float) myFunction(x),mPaint);
}
}
But you'll eventually need to adjust the value of your function given the canvas height.

Try something like this:
float xv=x0,yv= yo,x,y;
for (int i = 0; i < maxPoints; i++) {
x=i * scalex;
y=function(i)*scaley;
canvas.drawLine(xv, yv, x, y, paint);
xv=x;
yv=y;
}
The graphic will appears continuous.

How to add a .png inside a canvas?

I have a game where a ball is bounced.. I would like to replace the drawen ball with a soccer-ball in a png format.
I've tried lot of things but nothing worked.
Here is my code for drawing the ball :
public ball() {
position = new Vector(0.0f, 0.0f);
paused_velocity = velocity = new Vector(0.0f, 0.0f);
paused_acceleration = acceleration = new Vector(0.0f, gravity);
radius = 0.0f;
delta = 0;
ball_paint = PaintList.getRandPaint();
start_time = SystemClock.uptimeMillis();
}
public void draw(Canvas canvas) {
canvas.drawCircle(position.X(), position.Y(), radius, ball_paint);
}
thanks a lot

If you png is present a ball.png in your drawable directory..
public Bitmap getBallBitmap()
{
return BitmapFactory.decodeResource(getResources(),
R.drawable.ball);
}
#Override
protected void draw(Canvas canvas)
{
//ideally you should cache the value returned by getBallBitmap()
canvas.drawBitmap(getBallBitmap(),position.X(), position.Y(), null);
}
Note that you should use onDraw() method instead of draw() method as much as possible.

Android Multiple Canvas.Drawline

Hello All first post on Stack overflow!!
I am attempting to draw multiple lines on a canvas but using different colours. My problem is that the line colours are always the same as the last line in the array. I am drawing vertical lines progressively across the screen at 30Hz, similar to a bar chart without any spacing. I am calling view. Invalidate() for the view onDraw() to run and draw the lines.
#Override
protected void onDraw(Canvas canvas) {
// TODO Auto-generated method stub
super.onDraw(canvas);
if (plotInfo == null)
return;
for (int i = 0; i < plotInfo.length; i++) {
//paintlineinfo = String.valueOf( plotInfo[i].paintOfLine.getColor());
canvas.drawLine(i, mDisplay.getHeight(), i, mDisplay.getHeight()-plotInfo[i].linePositionY, plotInfo[i].paintOfLine);
}
}
I believe I may to use Open GL but I am trying to avoid it for the moment unless anyone can point me in the right direction for a good article that may help me.
At some point i would like to make the lines multiple colours.
Any help would be greatly appreciated...

I don't know from there you ge the colour, try:
#Override
protected void onDraw(Canvas canvas)
{
// TODO Auto-generated method stub
super.onDraw(canvas);
if (plotInfo == null)
return;
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
for (int i = 0; i < plotInfo.length; i++) {
paint.setColor( yourArrayOfColours.get(i) );
canvas.drawLine(i, mDisplay.getHeight(), i, mDisplay.getHeight()-plotInfo[i].linePositionY, paint);
}
}