I'm going to be determing some arbitrary rectangle shapes in an image (borders around OCR-recognized text, in fact,) and am trying to figure out the best way to listen for clicks on them.
I was originally going to draw invisible Rects around them, but then realized that you can't set an onClickListener on a Rect. So I'm trying to determine the most processor- and memory-efficient means to accomplish this.
It seems to me like I can either:
A) Listen for the click on the Canvas, determine the x- and y-coordinates of the click, then run down a list of every single rectangle to see which, if any, it corresponds to.
B) Create invisible/transparent View objects of some kind corresponding to the rectangles I want monitored, and set listeners on them. If this is the case, would it be better to use empty LinearLayout type objects, or something like a TextView? Or something even simpler?
It seems to be like 'A' would be more resource-intensive, but then, I'm not sure what the overhead for creating potentially dozens of invisible views, each with their own onClickListeners, would be.
Any suggestions as to the best way to approach this would be more than welcome. Happy to include any code requested, though it seems like this is an abstract enough question to not need it.
Related
I'd like to create a custom map. It should be or look like one picture, but according to the part of which the user clicks, it should move the user to a different location (i.e. start a different activity). I've seen it done in several games but I don't know how to do it myself.
The part of the picture should have non-geometrical borders (obviously it would be easily done with many square images). Sadly, I don't even know what term describes what I want to do so I wasn't able to find any helpful tutorials or discussed topics.
Example:
Picture: http://i236.photobucket.com/albums/ff40/iathen/mapEx.png
If the user touches the purple slide, (s)he should be leaded to activity_1
If the user touches the blue slide, (s)he should be leaded to activity_2
If the user touches the green slide, (s)he should be leaded to activity_3
In my experience there are 2 main (most used) ways to achieve this.
The first (my favorite):
Get the data from a PNG
You should write multiple layers to a canvas. These layers constitute your "zones" (blue, green, purple in the image). To obtain the data of these areas, you get it from PNGs (with transparencies off course) to write the canvas with whatever you want. You must store the values where there can be a tap from the user (non-transparent areas). Notice that this values can be scaled up/down depending on the map size, screen resolution, map dimensions, etc.
Once you've written the layers to the canvas you should check for a match of the user tap and the stored areas you have. You should take into consideration here the order in which the user tap is processed in your code. For instance, in your image, the purple layer is on top so it must be processed first, the blue as second, and the green as the last one. This way you can have an "island" inside a bigger area.
The second way:
Generate the boundaries programmaticaly
I think this solution is self-explanatory. The only I've faced with this variant is that when the surfaces boundaries get messy, it's really complicated to generate the proper equations.
EDIT:
Using the first approach you can employ multiple PNGs to load data or use a single PNG with data coded into the bytes (i.e. RGB values). It's up to you to decide which one to implement.
Hope it helps!
Since a touchscreen itself isn't very accurate, your collision detection for the buttons doesn't need to be either. It would be a waste of time to try to make a complicated collision detection algorithm to detect a touch within those weird shapes.
Since you are making a game, I assume you know how to handle custom touch events, as well as canvas (at least). There are many ways to do what you want, but in the specific example image you linked is kind of a special case.
You could create a giant bounding circle around the three blobs, and then check if the user touched within the bounds of the circle (ie check if the distance from the touch to the center of the circle is less than or equal to the radius). Once you determine that it is, you could check which section of the circle it falls into by splitting it up into 3 equal sections. Requires some math, but shouldn't be that complicated.
It wouldn't be a perfect solution, but it should be good enough. Although, you might have to change the buttons a little so they aren't so stretched out horizontally, otherwise a bounding circle wouldn't be ideal.
Personally, in my games I always have "nodes" that represent the visual elements of the game, such as buttons. Instead of using a large image like you are doing, I would create separate images for each button, and then check their collisions with touch events independently. That way I could have each button check with their own individual bounding circles, or, if absolutely necessary, I could even have custom algorithms for each individual button.
These aren't perfect solutions. If you do want a pixel-perfect solution, you'll need to implement some polygon collision detection algorithms
One thing to consider is screen size and ratio. The only constants you should use are for percentages.
I've been working on this for a while but can't find anything that exactly addresses my question (at least not something easy to understand).
I have a main layout XML file where I define various layout objects like a Button or a TextView (and I know I can add SurfaceView, View, and view and other things too). I want to draw a shape (in my case it's an arc) in just one of these objects so it doesn't take up the whole screen and so I can position it relative to other things.
(In my case it will ultimately re-draw the arc kind of like a circle with a gap in a different position every time I call a method depending on a value I pass to the method, but that's separate from my basic question.)
I know the answer will have something to do with a canvas, an onDraw method, maybe Paint, probably a view. I have been able to draw a circle from a custom View object by setting the main java file's layout as that View (as opposed to R.layouts.main), but that takes up the whole screen, and I'm unsure how I might be able to have that dynamically draw with modifications.
A really clear explanation or better yet an actual example would just be awesome.
As i see it u need to draw a specific shape on widget and not on complete screen. Try using layer List.
you can refer this link for sample Link
I need to draw a tournament bracket in Android. I already calculated the positions for all games (i.e. an (x,y) tuple that defines where to place teams in a spreadsheet-like structure). However, I don't know the preferred way of drawing the bracket. I found an example that shows what I need:Example
My first idea was to programmatically create and fill a TableLayout. However, borders are not really supported and a lot of TextViews are needed to fill the space between games. So I am not sure if this is the best way to do it.
Does anyone have better suggestions or maybe even an example of something similar?
I'd suggest custom drawing using Canvas. That way you can draw wherever it makes sense and probably even support zooming without too much work.
I am looking to create a custom EditText, where each character entered should lie within its own cell (see image).
My best guess is that I need to create my own .png's for the various states of the EditText, which provide the rectangular outline, then extend EditText's onDraw method to draw the vertical lines that separate adjacent characters.
I've never made a custom view before, and I know little about manual drawing in Android, so some guidance is needed.
Am I on the right path here?
How can I determine how tall and at what location to draw the vertical lines?
What is the best way to eat an oreo?
This is gonna be a very difficult task. Just look at TextView.onDraw() (which you are thinking of override). If I were you, I'd immediately change my mind :)
Instead, I'd use a LinearLayout to hold an array of customized EditText, but I don't know what kind of interaction you are looking for
Finally, to measure text you use Paint.getTextBounds(). Where to draw vertical separators depends on your design. If you have a fixed number of fixed length cells, you know where, otherwise you need to measure text
the question "What is a usefull alternative to AbsoluteLayout?" seems to be a question which is often asked, but never really answered. My situation is as follows:
I want to position Circles (for the sake of simplicity i used RadioButtons for testing) so that the distances between the circles are proportional on all possible display sizes.
Also i need to know the position of the circles to match onTouchEvent.
This seems fairly easy with AbsoluteLayout since i can get (at runtime) the defaultDisplay's width and height and so i can position Objects in an AbsoluteLayout relative to the display metrics.
Now I want to avoid AbsoluteLayout for obvious reasons, but RelativeLayout doesn't seem to be an alternative since - as far as i know - one can only say "put that object right next to that other object" or below or whatever. How to fix this?
In my Opinion the best way to achieve your goal is to use the Canvas and draw everything yourself. In the Canvas you have the information of the screen at runtime and you have full control of the things to draw.
If you only need to draw your own shapes (and handle all normal touch events) and do not need other UI Widgets on the same view, then use Canvas.
If you do need Widgets on this view then your only option is AbsoluteLayout.