I'm trying to create an app that has a fairly complex UI.
I'm trying to understand what is the best practice to render irregular button shapes to the screen.
I'm adding this image as an example. Each one of these wooden boards is a button.
I obviously can't use Android's Button or ImageButton because the shape is not a rectangle.
I assume I need to draw this directly onto a canvas or use onDraw or Draw to make this happen.
Is this the correct way I should use to render these as buttons?
Any good reading material on these is HIGHLY appreciated..
Thank you
You can create a customized View working in following way:
in onDraw() paint 3 bitmaps each representing single button (where 2 other buttons are transparent),
in onTouch() check the touched pixel against those bitmaps to see which bitmap was clicked
Code snippet:
public class DrawingBoard extends View {
Bitmap mBitmap1 = BitmapFactory.decodeResource(getResources(), R.drawable.button1);
Bitmap mBitmap2 = BitmapFactory.decodeResource(getResources(), R.drawable.button2);
Bitmap mBitmap3 = BitmapFactory.decodeResource(getResources(), R.drawable.button3);
public DrawingBoard (Context context) {
// TODO Auto-generated constructor stub
super (context);
}
#Override
protected void onDraw (Canvas canvas) {
canvas.drawBitmap(mBitmap1, 0, 0, null);
canvas.drawBitmap(mBitmap2, 0, 0, null);
canvas.drawBitmap(mBitmap3, 0, 0, null);
}
#Override
public boolean onTouchEvent (MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN :
int xx = (int)event.getX();
int yy = (int)event.getY();
if(Color.alpha(mBitmap1.getPixel(xx,yy)) != 0) {
// button1 pressed
}
else if(Color.alpha(mBitmap2.getPixel(xx,yy)) != 0) {
// button2 pressed
}
else if(Color.alpha(mBitmap3.getPixel(xx,yy)) != 0) {
// button3 pressed
}
break;
}
return true;
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
{
// bitmaps are assumed to be of the same size
setMeasuredDimension(mBitmap1.getWidth(),mBitmap1.getHeight());
}
}
I didn't test the code, it it may have errors.
A variant - you can create a virtual bitmap storing 'hit codes' for pixels on whole image. You can create it from original picture but replace pixels with ids to detect which area was touched, all other pixels make 'empty' (0x0). So getPixel() will return id of a button.
Related
I'm trying to develop a game using a transparent canvas and a surfaceView, I use the canvas to paint and it works fine.
Now I want to add objects that will move on the screen, for example bouncing balls.
I want to use a new thread for the balls, (because otherwise if it's the same thread of the surfaceView it doesn't move smoothly ).
So I'm having trouble of doing this.
Can you please advise me how and when should I send the same canvas to a new ball object and then return it back to the surfaceview.
I'm not sure what the best way to handle this is,
I tried using a ball as a view in the xml layout, and it worked perfect on another thread but it doesn't make sense to create 1000 views when I can just draw them on a canvas.
Any insight will be helpful!
This is my code:
public class SurfaceMyPaint extends SurfaceView implements Runnable
{
Thread t;
SurfaceHolder holder;
Bitmap brush;
boolean isItOk = false;
public SurfaceMyPaint(Context context)
{
super(context);
holder = getHolder();
initial();
}
public void initial()
{
brush= BitmapFactory.decodeResource(getResources(), R.drawable.brush2);
}
public boolean onTouchEvent(MotionEvent event)
{
if(event.getAction()== MotionEvent.ACTION_DOWN)
{
x= event.getX();
y= event.getY();
}
if(event.getAction()== MotionEvent.ACTION_MOVE)
{
x = event.getX();
y= event.getY();
}
return true;
}
public void run()
{
while (isItOk == true)
{
if (!holder.getSurface().isValid())
continue;
myCanvas_w = getWidth();
myCanvas_h = getHeight();
if (result == null)
result = Bitmap.createBitmap(myCanvas_w, myCanvas_h, Bitmap.Config.ARGB_8888);
Canvas c = new Canvas(result);
canvas = holder.lockCanvas(null);
c.drawBitmap(brush, x - (brush.getWidth() / 2), y - (brush.getWidth() / 2), null);
canvas.drawBitmap(result, 0, 0, null);
// How can I add this here: Ball ball = new Ball (canvas)????
holder.unlockCanvasAndPost(canvas);
}
}
public void pause(){
isItOk = false;
while (true){
try {
t.join();
} catch (InterruptedException e) {
e.printStackTrace();
}
break;
}
t=null;
}
public void resume()
{
isItOk = true;
t = new Thread(this);
t.start();
}
}
Summarizing your rendering code:
Create a screen-sized off-screen bitmap, which you hold in a variable called "result" that isn't declared in the code you show. I assume this is a field, and the allocation only happens once?
Each time, you create a new Canvas for that Bitmap.
You draw on the Bitmap, with drawBitmap().
You copy the Bitmap to the Surface, with drawBitmap().
You want to add a step #5, "draw Ball".
The obvious place to do the ball drawing is in step #3, but I'm going to assume you're not doing it there because that has some relatively static content that you update infrequently but want to blend in every frame.
That being the case, you should just draw the balls onto the Canvas you got back from SurfaceHolder. What you must not do is store a reference to the Surface's Canvas in the Ball object itself, which it appears you want to do (based on new Ball(canvas)). Once you call unlockCanvasAndPost() you must not use that Canvas anymore.
I don't really see an advantage to using multiple threads with your current code. If the "background" Bitmap were also changing you could render that with a different thread, and merge in the current version when you draw, but I suspect that will be more trouble than it's worth -- you will have to deal with the synchronization issues, and I don't think it'll solve your non-smoothness.
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);
}
I want to generate Rectangle on same size but at random positions on an ImageView. When I click the button the position of the rectangle must change
I have attached the entire Activity. First, I open an image from the gallery and draw a rectangle on it. When the shuffle button is clicked, it has to move
public class Register extends Activity {
ImageView img;
String picpath;
Bitmap bmp;
Canvas cnvs;
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.register);
img=(ImageView)findViewById(R.id.imageView1);
//Open Button
Button open=(Button)findViewById(R.id.button3);
open.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
// TODO Auto-generated method stub
Intent gal_open=new Intent(Intent.ACTION_PICK,android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI);
startActivityForResult(gal_open,1);
}
});
Button shuffle=(Button)findViewById(R.id.button2);
shuffle.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
// TODO Auto-generated method stub
int height=img.getHeight();
int width=img.getWidth();
int x;
int y;
Random r=new Random();
x=r.nextInt(width)*width;
y=r.nextInt(height)*height;
Paint paint=new Paint();
cnvs.drawBitmap(BitmapFactory.decodeFile(picpath), 0, 0, null);
cnvs.drawRect(x, y,x+50,y+50 , paint);
img.setImageBitmap(bmp);
}
});
}
public void onActivityResult(int requestCode,int resultCode,Intent intentData)
{
super.onActivityResult(requestCode, resultCode, intentData);
if(requestCode==1 && resultCode==RESULT_OK && intentData!=null)
{
//ImageView img=(ImageView)findViewById(R.id.imageView1 );
Bitmap bmp=Bitmap.createBitmap(img.getHeight(),img.getWidth(),Bitmap.Config.RGB_565);
Canvas cnvs=new Canvas(bmp);
Paint paint=new Paint();
paint.setColor(Color.RED);
Uri data=intentData.getData();
String[] filePath={MediaStore.Images.Media.DATA};
Cursor cur=getContentResolver().query(data,filePath,null,null,null );
cur.moveToFirst();
int colIndex=cur.getColumnIndex(filePath[0]);
picpath=cur.getString(colIndex);
cur.close();
cnvs.drawBitmap(BitmapFactory.decodeFile(picpath), 0, 0, null);
cnvs.drawRect(20, 20,50,50 , paint);
img.setImageBitmap(bmp);
//cnvs.drawRect(20, 20,50,50 , paint);
}
}
}
Please consider this:
//drawRect (float left, float top, float right, float bottom, Paint paint)
in your case it would never change the position as its starting point would always be same you need to change that also. I think this is the case you are getting wrong values in X,and Y . Also try to give the range to the Random generator like 1 to 60
You can simply change the values of X and Y like
x=r.nextInt(width);
y=r.nextInt(height);
but make it sure it should not go beyond the bounds of bitmap
x=r.nextInt(width) will already give you 0 <= x < width, so you shouldn't multiply it again by width.
Same for y and height.
Also, where is your cnvs coming from ? I'm not sure you can just draw on your ImageView in the onClick. I would have made a custom ImageView which remembers where the rectangle is supposed to be and draw it in its onDraw method, then during the onClick, method I would change the variables that store the rectangle position and force a redraw (so onDraw will draw the rectangle at the new position).
Create Random r as a class member and initialize it in the onCreate() method and not as Random r=new Random() inside the onClick()
I want to develop a game that shoots bullets on every touch of the canvas.
It works but when I touch the canvas after shooting, he takes the bullet and restarts the shooting.
I just want the bitmap to create new bullet at every touch. Here is my code:
public class MainActivity extends Activity implements OnTouchListener {
DrawBall d;
int x ;
int y;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
d = new DrawBall(this);
d.setOnTouchListener(this);
setContentView(d);
}
public class DrawBall extends View {
Bitmap alien;
public DrawBall(Context context) {
super(context);
alien = BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
startDraw(canvas);
}
public void startDraw(Canvas canvas){
Rect ourRect = new Rect();
ourRect.set(0,0, canvas.getWidth(), canvas.getHeight());
Paint blue = new Paint();
blue.setColor(Color.BLACK);
blue.setStyle(Paint.Style.FILL);
canvas.drawRect(ourRect, blue);
if(y < canvas.getHeight()){
y-=5;
}
canvas.drawBitmap(alien, x, y,new Paint());
invalidate();
}
}
public boolean onTouch(View v, MotionEvent event) {
x = (int) event.getX();
y = (int) event.getY();
return false;
}
}
I only superficially read the code. It seems that you are only keeping track of one bullet using the x y coordinates.The coordinates are resetting at every touch event, and thus you lose the previous bullet.
Use a dynamic array, or a linked list to keep track of all the bullets on the screen.
When there's a new touch, add the x,y to the array.
When drawing the bullet, iterate through your array to draw and update every bullet.
If the y-coordinate of any bullet goes out of the screen, delete the bullet from the array.
Each draw starts with a blank canvas. So to draw multiple bitmaps you need to keep track of where to draw each bullet and call drawBitmap multiple times.
Also, calling invalidate in onDraw is a bad idea- it will immediately invalidate, leading you to have performance issues. I'd suggest invalidating on a timer instead. Drawing too frequently will lead to performance issues.
In my implementation, I have two images, one layed over the other. As, I move a circle object over the top image, I want to make that area inside circle transperent, so that I can see the beneath image. For example I have two images - a car image and its framework image. I overlay car image over framweork image and as i drag a circle over car image, it should show the beneath framework.
I tried to search a lot but not getting any pointers. Somewhere I read that I need to use alpha masking or image masking using porterduff and xfermode. but I did not understand.
Specifically,
How can I make the above image transperent and how can I only make the area inside circle transperent?
Thank You
I've used helpful inputs from the question PorterduffXfermode: Clear a section of a bitmap. In the example below, touch area becomes 'transparent' and it's possible to observe down_image part beneath up_image (both images are just jpg drawables in resources).
Basically there's two possible implementations:
Disabling hardware acceleration of drawing which would make PorterDuff.Mode.CLEAR to make view transparent (refer to here for more details about hardware acceleration effects):
Activity:
public class MyActivity extends Activity {
/** Overlay image */
private DrawingView mDrawingView = null;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
final RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.MATCH_PARENT);
// Create the view for the xfermode test
mDrawingView = new DrawingView(this);
params.addRule(RelativeLayout.CENTER_IN_PARENT);
mDrawingView.setLayoutParams(params);
final RelativeLayout relativeLayout = new RelativeLayout(this);
relativeLayout.setBackgroundResource(R.drawable.down_image);
relativeLayout.addView(mDrawingView);
// Main part of the implementation - make layer drawing software
if (android.os.Build.VERSION.SDK_INT >= 11) {
mDrawingView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
}
// Show the layout with the test view
setContentView(relativeLayout);
}
}
DrawingView:
/**
* View which makes touch area transparent
*/
public class DrawingView extends View {
/** Paint to clear touch area */
private Paint mClearPaint = null;
/** Main bitmap */
private Bitmap mBitmap = null;
/** X coordinate of touch circle */
private int mXTouch = -1;
/** Y coordinate of touch circle */
private int mYTouch = -1;
/** Radius of touch circle */
private int mRadius = 0;
/**
* Default constructor
*
* #param ct {#link Context}
*/
public DrawingView(final Context ct) {
super(ct);
// Generate bitmap used for background
mBitmap = BitmapFactory.decodeResource(ct.getResources(), R.drawable.up_image);
// Generate array of paints
mClearPaint = new Paint();
mClearPaint.setARGB(255, 255, 255, 0);
mClearPaint.setStrokeWidth(20);
mClearPaint.setStyle(Paint.Style.FILL);
// Set all transfer modes
mClearPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
mRadius = getResources().getDimensionPixelSize(R.dimen.radius);
}
#Override
public void onDraw(final Canvas canv) {
// Background colour for canvas
canv.drawColor(Color.argb(255, 0, 0, 0));
// Draw the bitmap leaving small outside border to see background
canv.drawBitmap(mBitmap, null, new RectF(0, 0, getMeasuredWidth(), getMeasuredHeight()), null);
// Loop, draws 4 circles per row, in 4 rows on top of bitmap
// Drawn in the order of mClearPaint (alphabetical)
if (mXTouch > 0 && mYTouch > 0) {
canv.drawCircle(mXTouch, mYTouch, mRadius, mClearPaint);
}
}
#Override
public boolean onTouchEvent(final MotionEvent event) {
boolean handled = false;
// get touch event coordinates and make transparent circle from it
switch (event.getActionMasked()) {
case MotionEvent.ACTION_DOWN:
case MotionEvent.ACTION_MOVE:
mXTouch = (int) event.getX();
mYTouch = (int) event.getY();
// TODO: Note, in case of large scene it's better not to use invalidate without rectangle specified
invalidate();
handled = true;
break;
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_POINTER_UP:
case MotionEvent.ACTION_CANCEL:
mXTouch = -1;
mYTouch = -1;
// TODO: Note, in case of large scene it's better not to use invalidate without rectangle specified
invalidate();
handled = true;
break;
default:
// do nothing
break;
}
return super.onTouchEvent(event) || handled;
}
}
Adopt this solution, but looks like it depends on Android version, because suggested solution hasn't worked on mine 4.2 device at all.