I have the following class:
public class MainActivity extends Activity {
/** Called when the activity is first created. */
String value = "0";
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN);
setContentView(new GaugeAnimation(this));
}
}
My GuageAnimation class is as follows:
public class GaugeAnimation extends View{
private Path p;
private Paint cPaint = new Paint();
private int width = 200;
private int angleStart = 135;
private int sweep = 90;
private int value=0;
Bitmap bottom = BitmapFactory.decodeResource(getResources(), R.drawable.dashboard_rpm_bottom);
Bitmap top= BitmapFactory.decodeResource(getResources(), R.drawable.dashboard_rpm_active);
public GaugeAnimation(Context context){
super (context);
//Arc Equations & etc....
}
#Override
public void onDraw(Canvas c){
Paint paint = new Paint();
paint.setFilterBitmap(false);
paint.setColor(Color.BLUE);
c.translate(55,320);
//Draw bottom image on canvas
c.save();
p.addArc(new RectF(0,0,width,width), angleStart, sweep);
p.lineTo(width/2, width/2);
c.clipPath(p);
//draw Image on top
c.restore();
invalidate()
}
}
so basically this crops a circular image one piece at a time based on arc equations. I want to show an animation like the circle's pieces all being filled in (so showing each clipped path which demonstrates a circle being built). So i was thinking of doing a for loop like:
for (int i=0; i<100; i++) {
sweep=i;
p.addArc(new RectF(0,0,width,width), angleStart, sweep);
p.lineTo(width/2, width/2);
c.clipPath(p);
invalidate();
}
but this doesn't work it just draws the end result when i=100, anyone have an idea as to how i can do this?
Currently your loop is performed on the main thread and keeps it busy, so it will not actually update the UI until you finish.
You should do the loop in a background thread (using Timer or AsyncTask) and perform the paint on main thread. Note that without a short sleep, it will probably would look like an animation too much, it will be pretty fast.
Related
I'm trying to make a small pong game, using a custom view that draws the platforms on each side and the ball as a circle. However when i run the app to see if the drawing is done correctly, while the platforms are drawn correctly the circle wont appear. so my question is, why is the ball not drawn at all?
This is the custom view:
public class GameView extends SurfaceView implements Runnable {
private Context mContext; // a private instance of the context
Thread gameThread=null; //the thread on which the game will run
Ball ball; //a ball
Platform lPlat,rPlat; // a platform for the left side and the right
//tools that will draw the view and the objects
Canvas canvas;
Paint paint;
Color color;
SurfaceHolder mHolder;
//variable for frame management and objects movement
long lastFrame;
long fps;
volatile boolean playing;
public GameView(Context context){
super(context);
this.mContext=context;
mHolder=getHolder();
color=new Color();
paint=new Paint();
gameThread=new Thread(this);
lPlat=new Platform(2592,620,50,200);
rPlat=new Platform(120,620,50,200);
ball=new Ball(2400,620,20);
setWillNotDraw(false);
init();
}
public void init() {
render();
playing=true;
gameThread.start();
}
//the game Thread
#Override
public void run(){
while (playing){
long currentTime=System.currentTimeMillis();
render();
lastFrame=System.currentTimeMillis()-currentTime;
//dividing the time difference between the start of the count and the end of the render (which is a frame) by 1000 to get an approximation of the fps;
if (lastFrame>=1)
fps=1000/lastFrame;
}
}
//renders the view, calling update method, and draw method afterwards
public void render(){
update();
draw();
}
public void update(){
ball.updateBallPosition();
rPlat.updatePlatformPosition();
lPlat.updatePlatformPosition();
}
#Override
public void onDraw(Canvas canvas){
super.onDraw(canvas);
Log.i("#CanvasStatus","Canvas onDraw");
canvas.drawColor(Color.argb(255, 100, 120, 70));
//the drawRect methods work properly
canvas.drawRect(lPlat.shape,paint);
canvas.drawRect(rPlat.shape,paint);
canvas.drawCircle(ball.x,ball.y,ball.radius,paint); //this is where I try to draw the circle
}
public void draw(){
if (mHolder.getSurface().isValid()) {
Log.i("#CanvasStatus","valid");
canvas=mHolder.lockCanvas();
paint.setColor(Color.argb(255,10,200,157));
paint.setStyle(Paint.Style.FILL);
this.draw(canvas);
mHolder.unlockCanvasAndPost(canvas);
}
else Log.i("#CanvasStatus","invalid");
}
}
and this is the ball class:
public class Ball {
float x;
float y;
float radius;
double yspeed, xspeed;
public Ball(float x, float y, float radius) {
this.x = x;
this.y = y;
this.radius = radius;
yspeed = 200;
xspeed = 200;
}
public void updateBallPosition() {
x+=xspeed;
y+=yspeed;
//checks for wall collisions
if(x>=GameActivity.screenCoordinates.x) {
x = GameActivity.screenCoordinates.x;
xspeed=-xspeed;
}
else if (x<=0){
x=0;
xspeed=-xspeed;
}
}
}
Not everything is implemented in regards to the game, i'm just trying to get the canvas to draw the objects correctly at the moment.
Thanks in advance
You don't need to override onDraw method and call draw(canvas) in your draw method, all the work with canvas should be done there. Remove onDraw method and change draw method to look like this:
public void draw(){
if (mHolder.getSurface().isValid()) {
Log.i("#CanvasStatus","valid");
canvas=mHolder.lockCanvas();
paint.setColor(Color.argb(255,10,200,157));
paint.setStyle(Paint.Style.FILL);
canvas.drawColor(Color.argb(255, 100, 120, 70));
//the drawRect methods work properly
canvas.drawRect(lPlat.shape,paint);
canvas.drawRect(rPlat.shape,paint);
canvas.drawCircle(ball.x,ball.y,ball.radius,paint);
mHolder.unlockCanvasAndPost(canvas);
}
else Log.i("#CanvasStatus","invalid");
}
By the way, you've set up boundaries for x coordinate only, you should add it for y as well. Besides that, you will possibly need to add some delay to canvas drawing (with Thread.sleep in a simplest case) or else your view will re-draw too often.
I have a library that shows a camera preview. I want to add a rectangle overlay on top of the preview. I tried 2 different approaches. But both of them display the rectangle shortly then disappear.
approach (using view.getOverlay)
mPreview.setZOrderMediaOverlay(true);
mPreview.setZOrderOnTop(true);
ViewGroup rootView = (ViewGroup)mActivity.getWindow().getDecorView().findViewById(android.R.id.content);
rootView.addView(mPreview);
final ViewOverlay overlay = mPreview.getOverlay();
final Bracket bracket = new Bracket();
mPreview.post(new Runnable() {
#Override
public void run() {
bracket.setBounds(0, 0, mPreview.getWidth(), mPreview.getHeight());
overlay.add(bracket);
}
});
approach (overriding draw function in surfaceview)
#Override
public void draw(Canvas canvas) {
super.draw(canvas);
paint.setStyle(Paint.Style.STROKE);
paint.setColor(Color.GREEN);
paint.setStrokeWidth(10);
//center
int x0 = canvas.getWidth()/2;
int y0 = canvas.getHeight()/2;
int dx = canvas.getHeight()/3;
int dy = canvas.getHeight()/3;
//draw guide box
canvas.drawRect(x0-dx, y0-dy, x0+dx, y0+dy, paint);
}
mPreview extends SurfaceView
Bracket extends Drawable
UPDATE
If I use setContentView instead of rootView.addView it works as expected. But in this case I can not remove the view.
I used a new Activity and setContentView. That solved the problem.
To remove the view I finished the action.
In my application,I am setting an image in my imageview. I just need to place a marker on that imageview. I am doing it with onDraw function in my custom image view class.The problem is,for example if I take x position and y position as 40 respectively.The marker position shown above image in my mobile is different when compared with running same application on tablet.
I want a solution such that when I give coordinates then the position of marker on image in mobile and tablet appears same.
Here is the code my main activity:
public class PointOnImageActivity extends Activity
{
#Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_point_on_image);
CustomImag ev= new CustomImag(this);
ev.setBackgroundResource(R.drawable.stad);// set background
setContentView(ev);
}
}
Here is the code of my custom imageview class:
public class CustomImag extends ImageView
{
public CustomImag(Context context)
{
super(context);
}
#Override
public void onDraw(Canvas canvas)
{
super.onDraw(canvas);
Paint mPaint = new Paint();
mPaint.setColor(Color.RED);
canvas.drawCircle(40,40,10,mPaint);
}
}
that's because 40 is pixel value, you actually need 40dp instead. so you can convert 40dp to px value dynamically, like this:
int pxValue1 = (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 40, context.getResources()
.getDisplayMetrics());
int pxValue2 = (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 10, context.getResources()
.getDisplayMetrics());
canvas.drawCircle(pxValue,pxValue,pxValue2,mPaint);
You have to position your custom View according to the screen dimensions. This way, no matter what size screen displays your app, your positioning will be relative.
In your onDraw(Canvas) method, you can get the screen dimensions and draw the circle using them. In the following example(which is mostly your code), I place the red circle at screen_width / 4 and screen_height / 4:
public class MyCustomImageViewActivity extends Activity{
CustomImag ev;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
ev = new CustomImag(this);
ev.setBackgroundResource(R.drawable.stad);// set background
setContentView(ev);
}
public class CustomImag extends ImageView {
Paint mPaint;
public CustomImag(Context context) {
super(context);
mPaint = new Paint();
}
#Override
public void onDraw(Canvas canvas) {
super.onDraw(canvas);
Point point = new Point();
getWindowManager().getDefaultDisplay().getSize(point);
mPaint.setColor(Color.RED);
canvas.drawCircle(point.x / 4, point.y / 4, 10, mPaint);
}
}
}
I want to add text in a circle or half circle programmatically, in such a way that instead of having a circle with line edges, the edges are the words. See image for a better explanation.
How can I do this in Android, or what resources could I read in order to help me with this problem?
In order to do this, you will need to draw your text onto a Canvas. Any subclass of View is passed a Canvas in onDraw() that you can use to draw your custom text. The method drawTextOnPath() lets you put text on any Path object you choose. You can create a semi-circle path by creating a new instance and using addArc().
you can Use Below Code. and Make it as you Want your Textview.
Here if you want Something as Backgroung image then use setBackgroundResource(R.drawable.YOUR_IMAGE);
public class MainActivity extends Activity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(new GraphicsView(this));}
static public class GraphicsView extends View {
private static final String QUOTE = "text in a half-circle";
private Path circle;
private Paint cPaint;
private Paint tPaint;
public GraphicsView(Context context) {
super(context);
int color = Color.argb(127, 255, 0, 255);
circle = new Path();
circle.addCircle(230, 350, 150, Direction.CW);
cPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
cPaint.setStyle(Paint.Style.STROKE);
cPaint.setColor(Color.LTGRAY);
cPaint.setStrokeWidth(3);
// For Background Image
setBackgroundResource(R.drawable.YOUR_IMAGE);
tPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
tPaint.setStyle(Paint.Style.FILL_AND_STROKE);
//TextColor you want to set
tPaint.setColor(Color.BLACK);
//TextSize you want to set
tPaint.setTextSize(50);}
#Override
protected void onDraw(Canvas canvas) {
canvas.drawTextOnPath(QUOTE, circle, 485, 20, tPaint);}
}
}
try it out. hope it will help you.
I want to develop my application with a simple animation. I have used a lot of source from: http://developer.android.com/resources/samples/ApiDemos/src/com/example/android/apis/graphics/Arcs.html
My code:
public class Animation extends Activity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
private static class AnimView extends View {
private Paint myPaint;
private Paint myFramePaint;
private RectF bigOval;
private float myStart;
private float mySweep;
private static final float SWEEP_INC = 1;
public AnimView(Context context) {
super(context);
init();
}
public AnimView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
private void init() {
myPaint = new Paint();
myPaint.setAntiAlias(true);
myPaint.setStyle(Paint.Style.FILL);
myPaint.setColor(Color.RED);
bigOval = new RectF(40, 10, 280, 250);
myFramePaint = new Paint();
myFramePaint.setAntiAlias(true);
myFramePaint.setColor(Color.BLACK);
}
private void drawArcs(Canvas canvas, RectF oval, boolean useCenter, Paint paint) {
canvas.drawRect(oval, myFramePaint);
canvas.drawArc(oval, myStart, mySweep, useCenter, paint);
}
#Override
protected void onDraw(Canvas canvas) {
drawArcs(canvas, bigOval, true, myPaint);
myStart = -90;
mySweep -= SWEEP_INC;
invalidate();
}
}}
I'm using my view in this way in my xml file:
<view
class="go.android.Animation$AnimView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
It works properly. I know that it isn't custom animation. But is this possible to set speed of this animation (in ms or seconds)? Or to stop this animation (for example in the OnClick or OnTouch Listener), and get to know when this animation has finished?
I also want to get first whole circle, and on the end of animation - lack of circle. Simply to change direction of this animation. Is this possible?
I don't want to use frame-by-frame animation. I want to get continuous animation. Is there any possibilities to get similar animation (with setting speed, etc...)
I also want to animate not only a color but rather a round drawable.
Thank you in advance. Sorry for my English skill.
There might be better and more precise ways to control your animation than this (you could look into using OpenGL), but you can change the speed and direction of the animation relatively easily given your existing code.
The speed is controlled by the SWEEP_INC field (which stands for Sweep Increment I would guess). Every time the onDraw() method is called, it increases the size of the wedge by 1 degree. If you want the animation to go 5 times as fast, set SWEEP_INC to 5 instead of 1. If you want the animation to go half as fast, set SWEEP_INC to 0.5.
You can also just set a flag to reverse the animation each time it finishes. I've modified your code to reverse each time it reaches the end, using the addToCircle boolean.
public class Animation extends Activity
{
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
private static class AnimView extends View {
private Paint myPaint;
private Paint myFramePaint;
private RectF bigOval;
private float myStart;
private float mySweep;
private float SWEEP_INC = 1;
//Use this flag to control the direction of the arc's movement
private boolean addToCircle = true;
public AnimView(Context context) {
super(context);
init();
}
public AnimView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
private void init() {
myPaint = new Paint();
myPaint.setAntiAlias(true);
myPaint.setStyle(Paint.Style.FILL);
myPaint.setColor(Color.RED);
bigOval = new RectF(40, 10, 280, 250);
myFramePaint = new Paint();
myFramePaint.setAntiAlias(true);
myFramePaint.setColor(Color.BLACK);
}
private void drawArcs(Canvas canvas, RectF oval, boolean useCenter, Paint paint) {
canvas.drawRect(oval, myFramePaint);
canvas.drawArc(oval, myStart, mySweep, useCenter, paint);
}
public void setIncrement(float newIncrement)
{
SWEEP_INC = newIncrement;
}
#Override
protected void onDraw(Canvas canvas) {
drawArcs(canvas, bigOval, true, myPaint);
myStart = -90;
//If the arc is currently getting bigger, decrease the value of mySweep
if(addToCircle)
{
mySweep -= SWEEP_INC;
}
//If the arc is currently getting smaller, increase the value of mySweep
else
{
mySweep += SWEEP_INC;
}
//If the animation has reached the end, reverse it
if(mySweep%360 == 0)
{
addToCircle = !addToCircle;
}
invalidate();
}
}
}
EDIT
If you remove the final and static modifiers from SWEEP_INC you can change the speed of the animation at runtime using the setIncrement(float newIncrement) function I've added.
You can stop the animation by calling setIncrement(0).
However, I don't think there is a constant rate at which onDraw is called. So I don't know of any way to assign a duration in seconds to this animation. For that you may want to look into more sophisticated methods of animation.