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.
Related
I'm building an android game and this is more of just best practices and performance question.
For the bitmaps that I have that the user interacts with, should I place them in an imageView and set an onTouchListener for each of them individually or should I just draw them onto the canvas and use the custom view's onTouch method to obtain the x and y of the touch and see if it falls in the range of any of the bitmaps to detect a touch.
My custom view takes up the entire screen, and I don't know how if it is even possible to draw an imageview onto the screen using a canvas which is why as of now I just use the onTouch method.
Thanks for any insight.
Depending on how dynamic your bitmaps render will be, you should go for either GLSurfaceView or SurfaceView, for something simple as just bitmaps i would recommend you to use SurfaceView as "renderer" where you can get the canvas from and of course you can draw on the whole screen if your surfaceview match the screen size.
TouchListener should be completely separated handled on its own listener promoting encapsulation and reuse of code for future apps that you want to do. I've found this quiet helpful for the last games i've developed asingning a surface view as renderer and just creating Objects which takes the canvas as parameter and drawing them self into it, the only thing you have to take on count is the bitmap resource management, but if you are careful of releasing and creating them when is proper, you should have no problems...
Regards!
In the project I am working on I decided to use SurfaceView instead of a custom double buffered medium. It provides everything I need and it's already double buffered.
The problem is that it wont let me specify multiple dirty rectangles to redraw.
SurfaceView.lockCanvas(Rect) only allows single rectangle and without parameter it's pretty expensive to redraw whole thing. Another solution to call lockCanvas(Rect) for each Rect causes eye-bleeding blinking in the screen, obviously.
Do you have any solution giving the opportunity staying inside Android API field, if not do you have any external alternatives I can use?
If you know the dirty areas before you need to call lockCanvas (sounds like you might), you could calculate a "super rectangle" that locks an area that contains all of your rectangle. For example if your rectangles are (using l,r,t,b coordinates) [0,10,0,20] and [15,30,10,35], your super rectangle would be [0,30,0,35].
I know how to draw paths on a canvas and understand how to undo/redo. But now I want to draw shapes (lines, circles, rectangles) that dynamically resize depending on how I drag them - just like we have in MS Paint.
If I use "drawLine", the line is there permanently with no way of erasing it and redrawing it to my new finger location. Same with circle as I want the circle to constantly change width as I drag my finger. So the old one has to erased (keeping all the other paths on the bitmap intact) and the new one drawn in its place.
Been searching a lot for this, but haven't come across how t do it. Maybe I'm using the wrong keywords, but I don't know. Any pointers?
Each time you move the finger, call the underlying view's invalidate() function, it will trigger erasing the entire background
public void invalidate ()
Since: API Level 1
Invalidate the whole view. If the view is visible, onDraw(android.graphics.Canvas) will be called at some point in the future. This must be called from a UI thread. To call from a non-UI thread, call postInvalidate().
Then redraw your shape based on your finger's new position.
Managed to do it. I misunderstood the way the offscreen drawing thing worked. The idea is to write to the bitmap only after you have the shape you want - ie on "touch up". Till then, draw the shape using the "canvas" object in on Draw...
I am using a SurfaceView and have drawn multiple bitmaps to the view. My question is how can I use the Touch Listener to target each bitmaps move action independently?
Basically I want the user to be able to arrange the bitmaps in any order they like. I came up with a method of determining the space utilized on the SurfaceView for each bitmap and then checking the x and y values of the touch listener to determine if the user was selecting a known location of the bitmap. The problem I am having is that if bitmaps end up crossing each other then they stick together as they share the same space.
I am thinking there is probably a simpler way to handle the events of multiple bitmaps, any suggestions?
First you need to select the bit map
follow the link for further detail.
Detect touch on bitmap
I'm new to Android application development and I'm currently experimenting with various UI ideas. In the image below, you can see a vertically scrolling list of horizontally scrolling galleries (and also textviews as you can see). I'm also doing some matrix and camera transformations which I will come to in a minute.
For the background of the list elements, I use green. Blue is the background of the galleries, and red is the background for the images. These are just for my benefit of learning.
The galleries being used are extended classes where I overrode the drawChild method to perform a canvas scale operation in order for the image closest to the center (width) to be larger than the others.
The list view going vertically, I overrode the drawChild method and used the camera rotations from lack of depth dimension in the canvas functionality. The items in the list are scaled down and rotated relative to their position's proximity to the center (height).
I understood that scrolling and clicking would not necessarily follow along with the image transforms, but it appears as though the parent Gallery class's drawing is constrained to the original coordinates as well (see photo below).
I would love to hear any insight any of you have regarding how I can change the coordinates of the galleries in what is rendered via gallery scroll and the touch responsiveness of said gallery.
Images in the gallery are not same dimensions, so don't let that throw you in looking at the image below
Thanks in advance!
Ben
link to image (could not embed)
-- Update:
I was using my test application UI and noticed that when I got the UI to the point of the linked image and then I touched the top portion of the next row in the list, the gallery updated to display the proper representation. So, I added a call to clearFocus() in the drawChild method and that resulted in more accurate drawing. It does seem a tad slower, and since I'm on the Incredible, I'm worried it is a bloated solution.
In any event, I would still appreciate any thoughts you have regarding the best way to have the views display properly and how to translate the touch events in the gallery's new displayed area to its touchable coordinates so that scrolling on the actual images works when the gallery has moved.
Thanks!
As I updated earlier, the issue of the graphics of the gallery not fully refreshing was resolved by calling clearFocus in drawChild method for the ListView extending class.
The problem with registering the touch events turned out to be where I had used an example for the basis of my experimental program which called a pre-translation on the matrix used for painting. Once I removed that call and adjusted the post-translate call to compensate not having the pre-translate call any longer, I was able to scroll through the galleries regardless of their position, size or rotation (around x axis).