I would like to display a .png file from the R.drawable to the screen. Eventually I would like this image to be dynamic, meaning that it's position can move based on specified x,y coordinates.
I have looked into it but I am confused by the many options. Here are most of my questions:
What is the best data type/object to use for the situation?
What is the best way to instatiate the image?
Does it need to be a Drawable?
Does the Drawable then need its own View?
To display it, do I just add the new View to the main view?
I have experience with numerical method algorithms, but this is my first venture into graphics and I'm a bit overwhelmed, so any advice is greatly appreciated.
Edit - For the movement of the image, it will be moving around a lot, eventually as a user controlled movement.
As you note, there are many ways to do this. The "best" way depends on lots of things. If you want something like a ball bouncing around inside an area on the screen, the best approach might be to create a custom View and draw your .png in the onDraw() method at whatever coordinates you want. You can load your .png as a Bitmap using BitmapFactory.decodeResource().
Adding to what Ted said, if you want the image to later move around, you may want to draw it to a canvas. There are several useful draw methods for Canvas. SurfaceView is another option as well.
pic = BitmapFactory.decodeResource(getResources(), img);
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawBitmap(pic, x, y, null);
//canvas.drawRect(x, y, right, bottom, null);
}
Related
I would like to display several rings with different coloured sections (see below). The colour of the sections, however, cannot be know in advance, so I will need to draw these dynamically.
I know I could draw directly to the canvas but, once I have them, I would like to animate these rings, rotate them, have them overlap etc. It seemed, therefore, that the easiest and possibly least expensive approach would be to create them in advance, in memory, as transparent pngs and then just draw them in onDraw.
My problem is the only methods I can find to do this are setPixel. Is there not a way I could use drawing tools, like in Canvas, to draw to an empty bitmap, once, then use that bitmap with my canvas in onDraw?
I feel like I am missing a piece in the puzzle. Any help would be greatly appreciated.
You can create a Bitmap that is the size you want the ring to be and then create a Canvas the same size. Call setBitmap() on the Canvas and it will draw on to that for you. Then you can build your circle and have a bitmap to hold onto and use just like any other resource.
I am new to android, spent whole day trying to figure this out including endless digging in this website, and still can't figure it out. So usually I don't ask questions here but decided to go for it
I am using a Custom ImageView that supports pinch-zoom from here
Basically after I load the view with my background image (a map), I want to have a red dot/cross to mark the center of the screen. Then I want the user to press a button, and mark the current place with some special mark (e.g. small circle/rectangle). Thus I want to allow all the places the user pressed a button on when pointed at the center of the imageview to be marked (and stay like this). Here's an example of how it may look
I am using the custom ImageView in my main activity(works well)
As advised I've overridden the onDraw method of my custom ImageView:
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
paint.setColor(Color.RED);
canvas.drawCircle(mWidth/2, mHeight/2, 2, paint);
}
And that created indeed the red(this was my paint style) circle. But now I can't come up with the method to draw the other circles. I tried to follow some advices to recreate each time the Bitmap, set the image to it, then draw whatever and set it on a canvas but that doesn't work because the coordinates of the center have changed already - the center is dynamic(and perhaps for other reasons too - Maybe The marked places should be on a different layer)
Thanks for any help!
I'm trying to create an interactive accordian/concertina/folding animation so that a view folds/unfolds on itself when interacted with - in the same way flipboard folds the view, but both sides fold
The way I thought I could do it was to override the onDraw method, somehow duplicate the canvas or the information on the canvas, then draw the first half of the canvas rotated one way, then draw the other half of the canvas rotated the other way so that they meet in the middle, however I can't seem to grab the information from the canvas! Is it possible to grab a bitmap/snapshot from a canvas?
The only other way I think it's possible to achieve this kind of animation is with OpenGL.
Any help are greatly appreciated.
EDIT heres a good example of what i want to achieve http://www.nytimes.com/interactive/2008/03/28/arts/20080330_FOLD_IN_FEATURE.html
check this archive to acheive fold animation
code: http://developer.android.com/shareables/devbytes/FoldingLayout.zip
modifies it to make it work for lower version up till API level11
easy now.
What I want eventually:
I want to have 2 bitmaps overlayed on a view. Same bitmaps with the one above have higher brightness than the below one.
Now when the user strokes(with touch event (like paint brush)) on the upper bitmap, I want those parts of the upper bitmap to go invisible.
For those who are familiar with adobe photoshop perhaps this will make more sense:
I want to draw a mask on an image being display so that only the unmasked parts remain visible. But the mask can be drawn from a brush with variable hardness/size.
How do I achieve this functionality? Direct me in in the line where I should research or give sample code.
Also, is it possible to draw strokes on an imageview with a brush which has variable hardness? I know that I can drawPath and drawArc on a canvas, but I do not know how to achieve the different brush strokes/styles.
Please pardon me if I haven't phrased my question right, or wasn't able to find similar duplicates.
You can use FrameLayout to overlay one image over other in Android and for Custom Masking search FingerPaint on google.
I think the best way is to do your own off-screen compositing, then render the composited image using an ImageView or perhaps a subclass with custom interaction. See this sample code for an example of how to do such compositing using the Porter-Duff transfer modes.
I want to be able to dynamically place image(s) over another image in my app.
Consider the first image as background and the other images to be on top level, I will also need to move those top level images (change their x and y on the screen) by code too.
Imagine, for example, a sea in which the user places fish and sea animals, then those sea animals start to move here and there on the screen: it will be like that.
How can I do this? If you don't know but remember any simple program or demo that does that, it will be also very welcome!
Thank you!
There is, of course, more than one way to do this, but I would say that the best way to do it would be to create a custom View (class that derives from View) and have this handle your bitmap drawing and all of your touch events.
There's a lot of code to write for loading the Bitmaps and keeping track of all of their positions (and then drawing them to the canvas in onDraw), but if you start really small by just allowing one image to be drawn and dragged around the screen, you can build on that and keep your code organized.
You would need to override onDraw(Canvas) and onTouchEvent(MotionEvent) in your custom View. You'll load your bitmaps with BitmapFactory (decodeResource method if you're including your images as resources in your project) and you'll need to remember to call recycle on your bitmaps when you're no longer using them.
In onDraw, you draw your bitmaps to the canvas at a specific location using Canvas.drawBitmap. There are two overloads of this method you can choose from, one that takes the top and left coordinates of the bitmap as floats (and therefore performs no scaling or stretching) and one that takes a destination and source rectangle to perform scaling, stretching and placement.
I always use the latter as it gives me finer tuned control. If you choose this route, you'll want to keep two Rect instances and a Bitmap instance for each image being drawn, update them in the touch events and draw them to the canvas in the draw event.
When something changes inside your view (as in the case of a touch event), call invalidate() method and the framework will know to redraw everything which triggers your onDraw method.