We Keep Coding

How to draw line path on top of arc using Canvas paint in Android

I am working in an android application where i need to draw a graph like this.
I have drawn the arc using paint and canvas but i didn't know how to draw the line path along with the text as mentioned in below picture!
Any heads up on this would be really helpful for me. Thanks in advance.

In order to keep direction of the line truly, you have to use many trigonometric functions and calculus. However, for such cases you can use canvas.rotate() for tricky solution. For the solution, first you calculate angle of line according to a value. For example, assume your arc represents total value of 200. The left side is 0 and the right side is 200, then you get the value of 80. With these values, you can calculate the angle like that 180degree * (80f)/(200 - 0) it gives 72 degree. Then you can rotate the canvas for drawing canvas.rotate(70f,centerX,centerY). CenterX and CenterY are values of the center point of the arc. After that, you can draw your line as you draw to line at the left-bottom corner of the canvas canvas.drawLine(0,100,20,100,paint).
canvas.save()
canvas.rotate(70f,centerX,centerY)
canvas.drawLine(0,100,20,100,paint)
canvas.restore()

Get radius from a circle to screen corners

I followed an online tutorial, I did not understand how the professor managed to get the distance of a circle from the top left corner of the screen:
//calculate the distance from epicenter (of a circle) to the top left corner of the screen
double theta = atan(epicenter.dy/epicenter.dx);
double distanceToCorner = epicenter.dy / sin(theta);
I would like to know how to get the distance from all the other screen corners (and possibly have an explanation of what has been done).
Thank you

Assuming, that in android you can get screen width and height, you can simply count the distance at horizontal and vertical axis separately.
Getting the distances at those axes, you can use Pythagoras equation, like
dist = sqrt( dx^2 * dy^2 )
To make it more felxible, just make a function, that takes corner position as a parameter and make the dx and dy as a absolute difference of corner and epicenter location.
Going back to your question and atan(...), I don't quite understand the need of using this here, except if that's a project for the math class :)

I know this is not the answer but if i understand what you mean, then this image might be helpful.

libGDX - TextureRegion drawing weird when scaled

Having a weird issue.
I have a Texture with four frames of a sprite Animation. Each frame is loaded as a TextureRegion.
Most of the time the Animation play without any issues, but occasionally it will draw too much of the Texture in one frame.
Here's an example of what I mean:
As you can see the UFO has a red bar on the left side of it. That red bar is part of a frame on the outside of the TextureRegion bounds stated in my code. (The red frame is just there to make it easier for me to measure, since there is transparency on all the corners)
Here's the Texture:
In the above sprite sheet the red frame for the slide at the top has the bounds 0, 0, 202, 71. The TextureRegion for the frame of the anim is 1, 1, 200, 69 -- at no point should any of the red frame be displayed, as far as I can tell.
I realise as a workaround I could just set the frame as transparent now that I have the measurements I need, but I'd like to keep the red frame in case I need to take the measurements again later, or replace the sprite images, etc, and really a workaround is just a band-aid whereas I'm hoping to find a proper solution to address the root of the issue -- the fact that it's drawing wrong seems to indicate a larger problem than what exists just in this particular case (eg, in a densely-packed Texture it might draw pixels from a different sprite frame or even a different sprite or a menu image or something like that).
Oh and one last note, in case it's helpful: when the SpriteBatch displays the image it applies a rotation based on the movement of the UFO (tilts to the left when moving left, etc). The glitchy red bars sometimes show up on the top, right, bottom, or left randomly (though most of the time they don't show up at all) however they only seem to show up when the UFO has a rotation of zero. (Again, I realise I could just include a check to see if rotation is 0 and then call the SpriteBatch.draw() method without the rotation figure, but that too would be treating the symptom rather than addressing the root of the problem).
Any thoughts from the learned masters?

Your frames of animation need padding around them to account for rounding error. Put two pixels of clear pixels all around each image. If you use TexturePacker to combine the images into your file, it will automatically add the two pixels of padding by default.
If you name your four images with an underscore-frame number suffix, like myAnimation_0.png, myAnimation_1.png, myAnimation_2.png, and myAnimation_3.png, then when you load your TextureAtlas, it allows you get the animation very easily.
Array<TextureRegion> myAnimationFrames = textureAtlas.findRegions("myAnimation");

OpenGL not rendering as expected

If I have the screen setup with the following
gl.glViewport(0,0,width,height); //Reset the current viewport
gl.glMatrixMode(GL10.GL_PROJECTION); //select the projection matrix
gl.glLoadIdentity(); //Reset the Projection Matrix
gl.glOrthof(0f,1f,0f,1f,-1f,1f);
and the vertices set up as follows
this._vertices=new float[]{
0.0f,0.5f,0.0f, //V1 bottom left
0.0f,1.0f,0.0f, //V2 top left
0.5f,0.5f,0.0f, //V3 Bottom right
0.5f,1.0f,0.0f //V4 top right
};
then when drawing I do
gl.glTranslatef(0.0f,0.0f,0.0f);
it places the square in the top left (i thought 0,0 was bottom left?)
and then
gl.glTranslatef(0.5f,-0.5f,0.0f);
places the square in the middle of the screen (suggesting the bottom is actually -1.0f rather than 0.0f)
How do I make the bottom left of my screen start from 0,0?
Update------
I have found that if I change the line
gl.glOrthof(0f,1f,0f,1f,-1f,1f);
to
gl.glOrthof(0f,1f,1f,0f,-1f,1f);
then nothing changes (ie the top left is still 0,0 and bottom left is 0,-1)
however if I leave the line out completely then the origin is in the centre of the screen (ie top left is -1,-1)

The glOrthof is used to create your screen coordinate system, since its input parameters are left, right, top and bottom I can not understand where the confusion lies. If you wish your top left corner is the (0,0) point then just set the top and left parameters to zero and bottom and right to some positive values so that positive X is to the right and positive Y is downwards.
Some very common cases of usage of glOrthof are:
View coordinate system where you insert (0,0) as top-left and (screenHeight , screenWidth) as bottom-right. In quite a few cases the bottom-left is at (0,0) though.
Graph like coordinate system where screen centre is at (0,0) and then top-left is at (1,-1) and bottom-right at (-1,1)
Normalized view system which has the screen centre at (0,0) but height is relative to width depending on the screen ratio. So top-left is at (-1,-(screenHeight/screenWidth)) and bottom-right at (1, screenHeight/screenWidth).
You should note that only in 1st and 3rd cases your square will always be drawn as a square and not as a rectangle (where a/b = screenWidth/screenHeight). So choose which suits your application best.
You should know that glOrthof is also very useful for panning and zooming. Instead of doing some strange translations and scales you can simply change glOrthof parameters so that you display a certain part of your scene.

Changing image node to another corner

So basically i decided to start a small project but i noticed the node of the image is at the upper left corner. So for example, the x and y values are from that corner. I'd like them to be starting at the bottom left corner. How can i change that?
Sorry if node isn't the right name.

Java Component uses the top left as the origin of the axis. So if you it to be at the bottom left, you need to add the height of the component to the y coordonate.
You should set the location to x, y+ component.getHeight()