I am developing a puzzle game, where user has to arrange the images in the grid. The screenshot is given below
I want to able to drag the image of one cell of the grid to another cell. I searched many sites and every where I found examples with Drag and drop API (I.e. by using OnDragListener etc.) which was introduced in Android 3.0, but my application should run in Android 2.2.
So please help me how to implement it using Touching API (I.e. OnTouchListener etc.)
One way of doing it would be take the x & y location of the touch in relation to the grid.
IE. at 10x10 grid on a 100x100 area.
If the touch was at 25,25, it would choose square 2,2(using an array). You could then save that location to a variable (so as to move whatever piece to it that you are changing it with) and on drag update the bitmap x,y in relation to the touch.
Once you lift your finger at say, 75,75, it would set the puzzle piece at 7,7 and move that piece to 2,2.
I used something similar, less the drag, on my Lazer Maze Lite game. Mine was basically moving mirrors and bombs on touch though, but....
http://developer.android.com/guide/topics/ui/drag-drop.html
Related
I'm creating an Android board game with several differently shaped board spaces (like Risk).
I want to be sure that my board appears correct and that OnTouchListeners stay in place on the GUI regardless of screen size/resolution.
Possible solutions I have thought of and their problems:
Create a single image for the board and assign OnTouchListeners based upon pixel geometry. Problem: If the user's display is a different resolution, my Listener might not be under the same pixels as my image (right?)
Create several ImageButtons and arrange them together. Problem: the ImageButtons might get rearranged based upon the display and I would end up with overlapping spaces or gaps.
Use Android custom drawing. If I do this, how would I link my Listeners to my Canvas and be sure that they are synced?
Basic question:
How to be sure that listeners sync with graphics in a GUI that uses irregular geometry?
I worked on an app with irregular touch areas so I can give you guidance on one way to achieve this.
Start with a single image for your entire board. This image is going to have a certain ("intrinsic") width and height regardless of any device resolutions.
Now here comes the tedious part. You (or maybe your graphic designer) will need to plot out coordinates of an irregular polygon for each touch area. These will be constants to your application.
When you are displaying your board, if you are zooming and panning on the image, you want to keep track of the transform matrix for the display. When the user touches the screen, you will get x,y coordinates from OnTouchListener and for those to be useful, you will have to "de-transform" the x,y to normalize it against the intrinsic dimensions of the board and your polygons.
We rolled our own hit-testing logic using an algorithm from http://alienryderflex.com/polygon/, but you can also try this: Create a Path out of your polygon coordinates (using moveTo(), lineTo(), and close()), then assign the Path to a Region using Region.setPath(). Once you have that, supposedly you should be able to hit-test using Region.contains(x,y), but I've never tried it so I can't guarantee that's going to work.
I wan't to develop game named "Balda".
I have a 2d grid of imageviews (or buttons, maybe).
User should be able move his finger on the grid, and app should know wich images in grid was touched in this move.So, in the picture below is what I'm trying to achieve. A - is start point where user pressed on screen. B is end point where finger leaves the screen. And I need to know what images were touched (There are blue in the picture).
I know that I can do something like this. But I think that this is a wrong solution, because It contradicts the principle of giving functionality by responsibilitys.
I think that it is responsibility of the imageView to know when finger enters its borders and when it is leaving its borders.
I thought, that this would be in android API. And it has MotionEvent like EVENT_HOVER_ENTER and EVENT_HOVER_LEAVE but it's not working with finger. After finger is pressed on some View it will recieve all other MotionEvents, if I get it right.
I think that this is wrong. What can I do to get this functionality? Maybe I could create some custom listeners and custom Views, that supports them?
I think your requirement is slightly similar to custom gridview.
You can try below steps-
1)Create Custom view
2)Attach TouchListener to it.
3)Divide this view into 4*3 matrix.
4)Map your images to this 4*3 matrix
5)Write a function which gives the cell number respective toTouched Co-ordinates
6)After getting cell number;get the mapped image for that cell number
7)Put this image in arraylist
8)When user lifts his finger you will get arraylist of touched images(do whatever you want with it).
9)Remember to put this custom view in your activity
Tell me,if you have any doubt or concern
I want to create some kind of a tower defense map using a background image which is fourth as large as the screen of the device (twice horizontal, twice vertical).
my question is, how can I do this best. I'm new to Android, just got some Java basics , and want ti try out some stuff.
I want the user to scroll over the entire map using their finger and want him to zoom in via 2 finger pinch, and of course the objects (towers, sprites) should stay were they are.
I've been searching for hours for now and only found answers like " use Scrollview". I just want a food for thought to get in the right way, maybe with some examples.
You can use ImageView and set appropriate onTouchListener where you will detect pinch-to-zoom gesture using GestureDetector and change view coordinates when user drags the finger.
i am developing checkers application for Android. I have drawn on Canvas gameboard and tiles for each side, also I have made selection of tiles by D-Pad. But what about, Android phone doesn't have D-Pad? There must be a way how to do that in touch (I touch a tile - it is selected now). Do you have any ideas?
Thanks
image of my Gameboard can be found here - http://img171.imageshack.us/img171/7814/checkers.gif
Another (easier?) alternative is to use Android's standard Button/ImageButton. You can customize its border and content, if you don't want the default border to show up.
The standard Buttons works with both touch and D-pad; so you can cut the amount of coding you need to make tiles that behave properly under both situations.
Store tile locations in a 2d Array. On the finger down event, check the event location against each tile. When you find the tile that was poked, select it.
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).