I need a graphical needle gauge (like a speedometer etc) for my app but such a UI widget is not part of the SDK so I probably have to create it myself.
My idea is to have the background with the tickmarks and coloured fields (green, yellow, red) as one bitmap and the needle as another bitmap drawn on top of the background, but rotated in the appropriate angle.
In my book, Professional Android 2 Application Development, there is a somewhat similar example with a compass rose, although that one is drawn using line graphics, not pre-fabricated images like I will have to use to get the desired look.
However, in the compass example the whole canvas is rotated before drawing the tick marks. I cannot use this approach as it will also rotate the gauge background. So I need to somehow rotate the needle image (which should be transparent) before superimposing it. But I don't know how to do accomplish this.
Can anyone lead me in the right direction on how to proceed with the needle gauge? Also, if there is a better way to build the meter than sketched above, please let me know.
You can divide your guage into different layers. One for background, one for tick marks. Layer for tick marks can be rotated to draw marks and when turned back and combined with 'background' layer.
You can see the following example with layer technique described above: http://mindtherobot.com/blog/534/android-ui-making-an-analog-rotary-knob/
P.S. This is not my blog, i've just found this technique there.
Related
This question already has answers here:
How to Get Pixel Color in Android
(3 answers)
Closed 2 years ago.
I have a background image in my android studio project containing a little back circle.
What I want is to be able to detect this black circle when a ball move on the screen. Indeed I have a ball moving randomy on this background image, when the ball pass on the black circle, I want to detect it.
Does android have a feature for detecting pixels?
Actually, this black circle represents a hole, and I want to disappear the ball when it pass over the circle. I cannot use collision detection for some reasons
While the question is interesting, it can not be answered in the way you might hope.
To answer the title independently of the question:
Working with the data inside an app is not what Android Studio does.
Android Studio is used to build apps to run on Android, independent of Android Studio.
Inside an app, which can use the functionality provided by the Android system, detecting the color of a pixel in an image is certainly possible. That is a good question to ask at https://android.stackexchange.com/
The problem as you describe it may be very difficult, because you do not make many constraints. As an example, if that should work with any background, there could be black lines, for example.
I will simplify it to what I think you mean:
The app contains an image that contains a black circle that is much smaller than the image.
It also contains a second smaller circle, called the ball, in a different color.
The rest of the image has a third color, uniformly.
The problem you want to solve is: Move the ball, and find whether the smaller circle is completely inside the larger circle.
This is not easy, and quite interesting.
For this, you need to read pixel colors for parts of the image.
But it is unclear what you mean by "detecting pixels", and that may be an important point.
Reading pixels from an image that is part of your application should be simple.
What I described does not use collision detection, and the collision of the circles is irrelevant.
I'm using AndEngine, and within that framework, I'd like to make a circular timer graphic. Specifically, I'd like to display the wait period for reuse of an ability. The idea is to dynamically fill the arc as the timer progresses. Something like this:
The java.awt.Graphics object has a fillArc() method that seems perfect for me. In fact, the above graphic was drawn using fillArc(50,5,100,100,75,-40). Great! Now here's the problem:
AndEngine doesn't use Graphics() objects, it uses its own Shape implementation (for OpenGL) and there's no defined "Circle" shape, much less a circle shape with a fillArc() method.
Possible Solutions and Their Respective Problems
Looking around for a solution I ran into "Drawing a circle using Andengine". That Q&A is not of much use to me as the only answer "Indeed, you can't directly draw a circle" offers two alternatives: (1) "Rendering a quad with a circle texture" - this won't work for me as I need to dynamically modify the circle to produce the arcfill; and (2) "Rendering a circle that's actually a circle of connected triangles." Maybe option two would work, but there's no guidance there as to how to do that.
I also ran into "Creating circle in android andengine by box2d?". I suspect someone may be tempted to say, you can simply create a circle like this:
Body circleBody = PhysicsFactory.createCircleBody(pWorld, pSprite,
BodyType.StaticBody, FixtureDef);
That really doesn't help me. I'm not looking to create a 2D physics body of a circle. I'm looking to display one.
Finally, I found this discussion, which is promising. In particular, there's a suggestion:
Use Canvas to draw [it] into a Bitmap, and load that Bitmap as a TextureSource.
Sounds reasonable, although I'm still unclear how to do that.
Update: My Cheating "Solution"
Rather than dwell on this, I decided to cheat (for the moment at least). I made a spritesheet that looks like this:
Rather than actually have the timer display the perfect fillArc(), I just pull the appropriate index of the sprite from the spritesheet based on rounding the proportion done (from 0 to 1) to the appropriate index on the spritesheet. Like this:
public void setTimer(float amount) {
this.setCurrentTileIndex(Math.round(amount * 20));
}
For my purposes, this actually works just fine--I'm using the timers over about 2 seconds, so you really don't see the lack of detail. But maybe I'll get around to replacing this with the "proper" solution if someone posts it. Also, maybe this spritesheet will be useful for someone doing the same thing. Here's the version using transparency instead of a green background. (So it's white on the white background of stackoverflow, but it's there):
There is a third solution that requires a single texture and a custom object. So it's a trade off between your solutions, where one requires a lot of triangles and the other one a texture memory.
You need only one image, i.e. the full circle in your "cheat sequence" above.
Create a custom object consisting of 8 triangles (one 'fully drawn' triangle will represent 45° each).
The progress determines:
How many of the triangles to draw. I.e.:
100% ==> 360° ==> 8 full triangles
50% ==> 180° ==> 4 full triangles
37.5% ==> 135° ==> 3 full triangles
25% ==> 90° ==> 2 full triangles
20% ==> 72° ==> 1 full triangle and one triangle with one vertex moved so that it represents the remaining 27° (== 72° - 45°).
If you ask me this is the coolest solution, since it can be applied to any texture. =)
I'm trying to create a jigsaw puzzle app for Android. I am fairly far into the coding, and I am kind of stuck with one issue.
I need a way to change a Bitmap into a bunch of puzzle pieces. My current code simply cuts the image into rectangles, and it works pretty well, but now I need a way to create more complex piece shapes.
I had a couple of ideas:
Use a separate bitmap file that contains only black and white pixels, and use that to cut up the picture. I thought this was a pretty good plan, until I went to code it. I really had no idea how to do it.
Use a Path object to create the border. This would probably work, except I'm not sure how to keep track of the sides so that the pieces connect with each other.
Any ideas? I'm open to any suggestions.
You can use Path and/or Region to set a clip for your Canvas when drawing a Bitmap.
Take a look at this example. Here are some ways of clipping your drawing to any shape.
You could try making squares or rectangles fitted inside complex figures that can still be pieced toguether, when there's a match, the full rectangle covers the space. Imagine it like a 9 patch, when two sides match, you show the border rectangle.
This is not a explicit solution but I wonder if it would be possible to use bezier curves or paths to create lines along x and y , in conjunction with a parameter(fed with random value) to control the amount of deviation from a straight line and how much in a given distance ie; pixels/ per inch - this would be to create tongues on the pieces. Then use Region to extract the resulting shape at a given side of an intersection. Have the shape object get its center xy coordinate at instantiation and make it so that piece cannot be set if its current coordinate does not match the one it had when it was created.
What I'm trying to do is have a background image, for sake of simplicity, lets say it's a picture of the front of a house. Then, I want to have a red ball move from window to window.
**I want to have a background picture, and a picture on top of it.
**I then want to be able to tell the top picture EXACTLY where to go.
How can I do this?
I'm just beginning to learn about animations in Android, and have not yet run across any way to do this.
There are two routes to animation in android: Canvas and OpenGL ES.
I would recommend OpenGL for anything requiring smoothness and speed, like a moving ball.
You should create a view using the helper class GLSurfaceView
http://android-developers.blogspot.com/2009/04/introducing-glsurfaceview.html, and implement a Renderer.
I assume you have the images saved in your res/drawable folders, in a format like png and the ball file contains an alpha channel.
You can see many tutorials online, but basically you need to load your background image and your ball resource at onSurfaceCreated and store it in a texture using GLUtils.texImage2D.
In the onDrawFrame method, you should set up a 2D projection such as glOrtho2D, then draw the background.
Then just before you draw the ball texture, you can use the glTranslate(x,y,0) function to move the ball over the house. Use an alpha blend for the ball:
glBlendFunc(GL_SRC_ALPHA, GL_SRC_ONE_MINUS_ALPHA);
glEnable(GL_BLEND);
Unfortunately writing in OpenGL isn't as straightforward as you might hope. Everything is done with 3D coordinates, despite the fact you want only a 2D image. But hopefully this gives you enough info to google for good exmaples, which are abundant!
What would be the best way to compare a gesture made on an Android device's screen with a stored gesture? For example, if in my application, I want it so that if I draw a triangle with my finger, the screen will turn blue, and if I draw a circle, the screen will turn red, how could that be done? The only thing I have been able to think of so far is to somehow generate an image file and then compare that to an image of a triangle or circle and check for similarities. But that wouldn't really account for different sized shapes or offset ones. Any ideas on how this could be implemented? Thanks!
There is no need to compare/match the shape of a gesture with an image. The better way is to mathematically guess which one of the recognized shapes did the user draw. http://developer.android.com/resources/articles/gestures.html provides a great reference for implementing gestures.
HTH,
Akshay