I need to implement following component, but not sure where to start.
I have two fragments stacked. Top fragment has gradient background and other content as well. Fragment below that has also own content and you should be able to see below content.
Following picture demonstrates the situation and the white round should be movable, so user can see below content on certain position.
I recommend the solution from Romain Guy. As far as I know this is the simplest (and possibly most efficient method since he recommended it). The solution is based on Shaders.
You can find code, description, whole project, sample video and screenshots here: http://www.curious-creature.org/2012/12/13/android-recipe-2-fun-with-shaders/
You would start your customization by adjusting the mask PNG file. Then you'd probably supply a shader parameter for the fragments which they would utilize when drawing. Finally you'd set the proper shader for each of the fragments after every pointer movement event.
I know it's just a sketch of the solution, but the whole project code provided in the link above should get you going really fast.
Related
I need to put together a complete image, as seen here. Each piece of the segmented tree is an individual image, but I am unsure about how I should put the pieces together efficiently with spacing in between. I've thought about stacking the images on top of each other one at a time within a canvas, but I have my doubts as to whether this is the approach that I should take. Is there a different type of container I should use or a better method of accomplishing the same task?
EDIT: just to clarify, I need to assemble the image programmatically, beginning with the base segment and eventually ending with the top segment.
If you use a program like Gimp, you can added each image as a layer, then move the layers around correctly. I'm not quite sure how you want to represent the space between the segments, transparent?
Any way after you have your image assembled the way you want you can either merge the layers or save it to a format that will flatten out your images.
I'm not sure if you want your image to be able to stretch at all or not. If so, you can save it as a .png file and then use draw9patch or equivalent to add in stretching segments. Also I'm not sure if you have to support multiple drawable sizes, if so I have a free Android app, DP Image Calculator on Google Play that might help. Just remember start with the highest resolution and work you way down to the smallest.
Hope this helps. If you have more question let me know. Have a great day.
I've been asked to create an app that allows the user to fill in areas of an image with different colours, very similar to a childs "colour by numbers" game.
I'm not sure how to delineate the areas of the image and make them selectable. Please could someone give me an idea of a good way to go about doing this in Android.
Thanks
It's a kind of a tricky task... There's probably a better way to implement it, but here's my first thought:
You could pre-break the image into separate segments before the app runs.
As far as I know the only type of View you can create is a rectangle. But you can create many small rectangles to fill in parts of your image. Then you can get the clicks on those little areas and make a corresponding segment of your image:
int color= res.getColor(R.color.my_color);
image.setColorFilter(color, Mode.SRC_ATOP);
Hope this helps!
If you don't mind writing some NDK code, you could try OpenCV's cvFloodFill method. Otherwise you have to implement one of the image segmentation methods.
At the moment, I am using Euro 2012 app and it has some interesting layout parts. If you go to matches->knockout screen, you'll see 3 screens like this.
If you slide left or right, you move between them not like between one activity to another, but just like all these elements are laid on one big canvas and you slide each screen into focus. Even thou, if you slide left/right, the screen cannot be stopped in the way that half of each image is visible, so I guess it's not a big canvas. Somehow you can slide screen like one big image, and yet it always lock perfectly as if they used 3 activities for this.
How did the do this?
It's a ViewPager, available in Android support package and described in their blog.
The designing is not so much difficult, As i think to draw that boxes showing quarterfinals, semifinals.
They having layout( we can do by placing image in background also).
The major role played by FrameLayout which shows you that effect(emphasis), the flages are fetch from url as matches are decided(not essentially images only names are sufficient as flags came inside app and gets applied as updated).
After your click i think the start image gets change it's just replacing that image with new one.
As you said they are not on single canvas (but if they did customization of heir Viewpager that it's not stopping in between activities), but i think it's on single canvas.
If your taking about quickness of loading and all it's up to you as much code and processing you optimized it gives you smooth feel and fast processing.
We can appreciate the work but we can not say it's too much difficult as i think it's quit easy...
Hope this explanation helps you to understand ....
I'm making a simple whack-a-mole game as my first mini-project for android. I'm not sure how to go about this. I know the basics of setting everything up and such but I'm not sure how to animate the moles and make it so that when the mole is in the up position it can be tapped and a point will be counted. I know I can do an image button and have a counter go up(counter++) but I need to be able to switch frames from the mole in the hole to the mole in the up position. Anyone have an idea as to how to do this? Thanks!
Android allows you to animate objects in a variety of ways. If you only need 2 images to switch, like a button with 'pushed' / 'not pushed' states, you can use a special type of Drawable called a selector (which allows you to specify different drawables for the various states of the target).
If you need more than two images, you may want to use the simple View animation that Android allows you to create using xml. For instance, you can create an xml animation that specifies an image to move/rotate/scale from one initial position to another, creating the in-between frames for you.
Android also has a newer, more complex and full-featured form of animation (which you probably don't need to go into).
Both of these animation systems are detailed at :
http://developer.android.com/guide/topics/graphics/animation.html
Otherwise you will need to create a series of images that you iterate through at a steady pace (which is the fundamental idea behind animation).
I've already made this before, I'll give you an overview, just check my post here: Simple Whack a Mole overview
Is there a simple way to do the Curl page flipping animation? A Curl animation is animation of pages flipping, including the page above rolling and the shadows over the lower page.
What is the recommended way to do a "gallery" that displays two pages at a time (just like a book)?
Is it:
Letting the adapter display a linear layout of two images at a time? (it won't let me show a page flipping over the other like a book)
Using two pages, placing somehow one near the other, and then when it's time to animate -move the next two pages over?
What is the better way that would enable displaying the left page flipping over the right page?
I'm implementing a 2D page curl in the native canvas. Check my answer in: Implement page curl on android?
EDIT: The code project of my implementation: http://code.google.com/p/android-page-curl/
EDIT2: Links updated
I am using this code. Its really really perfect for any one to understand and use. Thanks a lot to Harism
GitHub Link for Page Curl Animation in android With OpenGL
I haven't worked on the android before, but it seems to me the best way to do a page flipping type of display would be to draw it in three layers. The first being the first page's text, the second being the "page" underneath, and the third being the next page. If you draw them from back to front, the only thing the user will see will be the text on the first page.
Now, Once you have that, you'll want to do some sort of curling/flipping animation based on whatever controls you are using. Simply choose whatever method works best for you for doing that animation, but while you are doing that, have the part of the page that isn't there anymore alpha'd out. This will allow you to see the text of the page underneath (Okay, I lied. You'll need a background behind that text too).
The problem at this point is you're still drawing the text twice over the same space, so you'll want to blend the first page's text with the animation under it. In this way, the text that is over the 0 alpha sections will be invisible. It won't bend with the animation, so that may still be an issue, but depending on the speed of the flip that might be fine still. When the animation is done, simply set the first page = the second, the animation reset to plain white, and the second page = the new second page.
The shadow effect can be done simply by partially alphaing out some black behind the page turn animation. Draw over second page (as the animation layer already is doing) and voila!
I believe your two page question could use a very similar method. Good luck
This is 3d animation project (based on OpenGL 2.0) - http://anettosoftware.co.uk/npc.php