For some reason,
I feel this kind of UI and it's interactive way
is highly profound and intuitive.
(Below picture shows the specific App).
Mainly speak,
when the user enters the screen,
the Scan button would scale out and back,
acting like a heartbeat, which gives the user an intention to click the button.
the button not only scale out but with a circle surround it, looks just like the ripple in the water.
Here comes the question of implementing these technique on Android UI,
I had do some survey and found that:
for UI component to scale out we can use android.view.animation.ScaleAnimation,
But how could I possible to draw a ripple that will surround the button while it scaling out?
Could anyone give me some advice of doing these kind of tasks?
Namely "the website resources", "Github", "Framework" or "API reference"?
I've already decompiler the apk and give up when I saw only mess code there
(I think due to the Proguard or something that protect peeking from decompile)
Related
In this mock up, see the screen where it said "Decrease Traffic", the traffic light pops up from below.
https://dribbble.com/shots/2106573-Intro-App-Interaction
I'm wondering how to create that effect on Android, if possible, any library to do that. Thanks
you can achieve this with Android Property Animations
in your example it seems to be a scale animation from 0 to 1 in x and y direction.
you can also combine different animations to get such or other effects.
My guess is that these kind of animation are to develop with a 3rd party program, and are not done by Android itself.
This way you have a ready-to-instantiate file (.gif maybe?) that you just call when the view pager is switched.
Looking also to the other animations in the example (look # "Meet New Friends", how every circle pops by himself) I think this was the used approach in your example-link.
If you are anyway looking for something that would look like what is done there, I'd suggest you start playing around Animator objects (and its subclasses like Value/ObjectAnimator) to animate the view you want.
This can be done also via XML files, describing the animation you need.
An important role in this do-it-yourself animation is played by Interpolators , who give you the chance to further customize the animation in an easier way (take a look at OvershootInterpolator, which lets your animation go a bit after the destination value you set, just to turn back later, giving you a "blob" effect. This might give a better idea what I'm meaning)
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 don't know how to explain this.
But take Android desktop as an example.
When you move your finger, you move the whole desktop, until a point that you're on the next desktop. So as you can see, if you move the screen, for about 51% to the right, when you leave your finger off the screen, it will go to the right screen, and if you just moved the screen 40ish percent, it will be back on the same screen.
How is this pattern called?
Some sort of "predicting" users movements.
Maybe you are talking about the Location Within pattern:
Problem:
You must describe the location within a series of screens which
contain alternate views, or which continue the display of a set of
content.
Solution:
When several screens of similar or continuous information are
presented with an organic access method, an indicator is usually
required so the user understands their position within the system.
Other sources might call such a thing "carousel" or "slideshow".
Updated answer:
After reading more carefully, "Location Within" might only reference the page position indicators that show which screen is currently in view. Perhaps just the Slideshow or Film Strip patterns describe more exactly what you mean.
As FoamyGuy pointed out in a comment, ViewPager is the way to implement "slideshows" in Android.
Additionally, ViewPagerIndicator provides flexible options to display the page position indicators ("Location Within" pattern)
Suppose I am writing a word "abc" in my GestureOverlayView and while doing so I need to save all those alphabets in the screen until I press a clear button.Can anyone tell me a good way to do this..
I will write "a" which is taken as a gesture (not as stroke) i.e One thing I though of was like use a ImageView or SurfaceView on bottom of a GestureOverLayView.and Suppose when I draw "a" on GestureOverLayView then in the "onGesturePerformed" event it will take the Gesture and then get the strokes and then convert them into paths and then draw the paths onto the underlying ImageView or SurfaceView.Can anyone suggest me the code or guide me.I tried various combinations of them but couldn't solve it..
There's an app called GestureBuilder in the samples directory of the SDK. This app shows how to persist gestures drawn by the user.
I realize this is an old question, but you can "cheat" by increasing the fadeOffset to some ridiculously high number. This can be done either in the xml
android:fadeOffset = "some very large number"
whatever, or programatically,
yourgestureoverlayView.SetFadeOffset(some very large number in milliseconds)
I have some game pawns on a screen inside of a RelativeLayout. When the user clicks the pawn I would like then to be able to drag it under there finger. I have the MotionEvent captured but can't seem to find how to adjust the orion of the pawn.
I've seen posts saying to adjust the margin but that seems questionable. I still want to do hit tests for the pawns after they've been moved and don't understand how to work with the margins in that case.
thanks!
I would recommend not using a Relative Layout at all.
A Canvas is a much better option
Or if you really want to use a layout, possibly an AbsoluteLayout is a better option
Using a layout for a game may prove unsatisfactory as you proceed. I can recommend using the free and open source game engine AndeEngine for making 2D games. The problems you have with collision detection and x,y positioning are trivially easy to implement with it. I've made 2 games and a visualization view within an app with is so far.
Check it out here:http://www.andengine.org/
You can download the demo app to your android device and see its out-of-the-box capabilities. (They include Sprites, sound, animation and more.)
This one game I made with it.
https://market.android.com/details?id=com.plonzogame&hl=en