Button on a canvas - android

I'm trying to make a simple game which uses Canvas and I want to put there something like a button into the right upper corner which allows you to pause the game.
What would be the best way to do that?
I was thinking about drawing those two lines that symbolize pausing on the canvas and pausing the game after the player clicks its locations but isn't there a better way?
I put here also a picture to show you how I want it to look like:

I use relative layout to manage all of the things.
1) find the relative layout
2) add something in your RelativeLayout
3) add the canvas to your RelativeLayout
My example below draws four buttons by simple for loop and add the canvas.
Example:
RelativeLayout layout = (RelativeLayout)findViewById(R.id.bb);
for (int i=0; i<4; i++) {
Button btn = new Button(this);
btn.setId(i);
btn.setText("some_text");
btn.setHeight(i*100);
btn.setX(100*i);
btn.setY(100*i);
layout.addView(btn);
}
YourDesign abc=new YourDesign(this);
layout.addView(abc);
You could consider "YourDesign" is the class of your canvas.
Canvas example:
public class YourDesign extends View{
Bitmap picture;
int x=0;
public YourDesign(Context context) {
super(context);
picture=BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher);
}
#Override
protected void onDraw(Canvas canvas) {
// TODO Auto-generated method stub
super.onDraw(canvas);
canvas.drawBitmap(picture, x, 100, new Paint());
x++;
if(x>canvas.getWidth())
x=0;
invalidate();
}

Related

Can you draw multiple Bitmaps on a single View Method?

currently I am trying to make an animation where some fish move around. I have successfully add one fish and made it animate using canvas and Bitmap. But currently I am trying to add a background that I made in Photoshop and whenever I add it in as a bitmap and draw it to the canvas no background shows up and the fish starts to lag across the screen. I was wondering if I needed to make a new View class and draw on a different canvas or if I could use the same one? Thank you for the help!
Here is the code in case you guys are interested:
public class Fish extends View {
Bitmap bitmap;
float x, y;
public Fish(Context context) {
super(context);
bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.fish1);
x = 0;
y = 0;
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawBitmap(bitmap, x, y, null);
if (x < canvas.getWidth())
{
x += 7;
}else{
x = 0;
}
invalidate();
}
}
You can draw as many bitmaps as you like. Each will overlay the prior. Thus, draw your background first, then draw your other images. Be sure that in your main images, you use transparent pixels where you want the background to show through.
In your code, don't call Invalidate() - that's what causes Android to call onDraw() and should only be called from somewhere else when some data has changed and needs to be redrawn.
You can do something like this, where theView is the view containing your animation:
In your activity, put this code in onCreate()
myAnimation();
Then
private void myAnimation()
{
int millis = 50; // milliseconds between displaying frames
theView.postDelayed (new Runnable ()
{
#Override public void run()
{
theView.invalidate();
myAnimation(); // you can add a conditional here to stop the animation
}
}, millis);
}

How to understand where you put your widgets in android layouts programmatically?

I'm currently making a simple game with the surfaceview but I find it hard to position the buttons or texts within the Relative layout programmatically in android. For example, in the sample below Im setting the relativelayouts with texts in a relative layout, and I want to set it to the right side of the screen with few margins to the right. How should I understand where I'm positioning the contents ? And are there some tips on positioning contents programmatically?
RelativeLayout Rs = new RelativeLayout(this);
Rs.setBackgroundResource(R.drawable.btn);
Rs.setGravity(Gravity.CENTER);
Regame.addView(RR,400,150);
Rs.setX(0);
txt= new TextView(this);
I guess it would be sufficient if you accessed the canvas from within the surfaceView.Probably would be more efficient if you used onSizeChange
for the width and height but i guess the canvas getWidth and getHeight would suffice.Also my example is just drawing once the surface is created, you'll have to make your own update logic.Also i am ditching the relative layout but i think this could suffice your needs:
public class GameView extends SurfaceView {
protected SurfaceHolder holder;
public GameView(Context context) {
super(context);
holder = getHolder();
holder.addCallback(new SurfaceHolder.Callback() {
public void surfaceCreated(SurfaceHolder holder) {
Canvas c = holder.lockCanvas(null);
onDraw(c);
holder.unlockCanvasAndPost(c);
}
});
}
protected void onDraw(Canvas canvas) {
Paint paint = new Paint();
paint.setColor(Color.BLACK);
paint.setTextSize(20);
int width=canvas.getWidth();
int height=canvas.getHeight();
//Just for example
int desiredHeight=height/2;
int desiredMargin=10;
String desiredText="Some text";
int textWidth=Math.round(paint.measureText(desiredText));
int desiredWidth=width-textWidth-desiredMargin;
canvas.drawText(desiredText, desiredWidth,desiredHeight, paint);
}
}

controll bitmap image manually

I,m taking my first step into movement of bitmaps. From bits on the internet i,ve created this simple code. The bitmap moves across the screen from top left to top right it goes off the screen and back on at 0,0. What i want to do is add a button or method to manually move the image. I,m only using this single class and have noticed it does not use the main_activity xml Or does it?? If someone could show me on this 1 direction i can duplicate for the other directions. If youd like to add code so doesnt go off screen would be a bonus
public class MainActivity extends Activity {
int x=0;
int y=0;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(new myView(this)); }
private class myView extends View{
public myView(Context context) {
super(context); }
#Override
protected void onDraw(Canvas canvas) {
Bitmap myBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.richinch);
if (x < canvas.getWidth()){x +=10;}
else {x=0;}
canvas.drawBitmap(myBitmap, x, y, null);
invalidate();
}}}
Ive added this to the code and read a little on OnTouch listener. How would i add that to the region or Rectangle this would be very helpfull so effectively i,m using the Bitmap as a button if was button id know with onclick, Basicall im trying to make 2 Bitmap buttons to move the image Left Right for now.Eventually all directions. Please use names im using unless creating summit eg int etc
Paint green = new Paint();
green.setColor(Color.RED);
green.setStyle(Paint.Style.FILL);
////creating the shape////
Rect rect= new Rect();
rect.set(0, 0,x+50, x+50);
canvas.drawRect(rect,green);
Region region = new Region(0, 950, 100, 1030);
I am not exactly sure what you want to achieve, but if you would like to make an animation, avoid using onDraw() and just let ObjectAnimator do the "moving" for you. Here's a detailed tutorial on it.
The minimum code you need:
ObjectAnimator animation = ObjectAnimator.ofFloat(yourObject, "x", xDest);
animation.setDuration(500); // milliseconds
animation.start();
You are not using any xml
this part here:
setContentView(new myView(this)); is where you would add your xml file setContentView(R.layout.mainxml)
If you want to move around a bitmap with the touch of your finger check out these tutorials. They do exactly this and you will learn to use a SurfaceView
http://www.eis4u.com/2012/02/13/playing-with-graphics-in-android-part-i/
http://www.eis4u.com/2012/02/13/playing-with-graphics-in-android-part-ii/
http://www.eis4u.com/2012/02/13/playing-with-graphics-in-android-part-iii/

Android drawing button to canvas with custom view?

How can I draw a button on top of the canvas in a custom view? (Preferably on the mid-right side) Is there something I have to call before doing the button.draw(canvas)?
public class MyClass extends View {
public Simulation(Context context) {
super(context);
pauseButton.setText("TestButton");
pauseButton.setClickable(true);
pauseButton.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
Log.i(TAG, "Button Pressed!");
}
});
public onDraw(Canvas canvas) {
super.onDraw(canvas);
pauseButton.draw(canvas);
}
}
Thanks for your time
You cannot insert a button into canvas. Canvas is an interface for bitmap or a bitmap buffer for a view. You can only draw other bitmap or pixels in it, not insert an object or a widget.
There are some solutions:
as Nikolay suggested, use a FrameLayout and create two layers (views), first your custom view and the second LinerView or RelativeView, which will come on top, where you can have buttons etc
draw an image of a buttun on Canvas then use onTouchEvent in your custom view and test for the coordinates of the touch, then do something... an example for onTouchEvent here: Make certain area of bitmap transparent on touch
Why do you need to draw the button yourself? Use a FrameLayout and simply have the button overlayed on your custom view.
Try this
public onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.save();
pauseButton.draw(canvas);
canvas.restore();
}

Animation in android(make a man run)

I am relatively new to animation in android and just getting the feel of a couple of things.I want to know how i can make a "man"(image) run on android.The man is an icon.IF i use animation through the following code the icon just moves across the screen.How do i get the running motion.
public anima1(Context context)
{
super(context);
cloud=BitmapFactory.decodeResource(getResources(),R.drawable.androidicon);
// TODO Auto-generated constructor stub
}
protected void onDraw(Canvas canvas)
{
super.onDraw(canvas);
Rect re=new Rect();
re.set(0,0,canvas.getWidth(),canvas.getHeight());
Paint c=new Paint();
c.setColor(Color.WHITE);
c.setStyle(Paint.Style.FILL);
canvas.drawRect(re,c);
x=x+10;
if(x==canvas.getWidth())
{
y=y+10;
x=0;
}
if(y==canvas.getHeight())
{
x=0;
y=0;
}
canvas.drawBitmap(cloud, x, y,p);
invalidate();
}
To make the man appear to run, you should have several different images of the man with his feet in different positions and swap out the image on every loop. Alternatively, you could use an animated GIF, but I am not sure whether Android will actually play the animation.

Categories

Resources