Rotating, Translating, and Scalling compound views on android - android

I have a custom compound view consisting of a textview above an imagebutton (wrapped in LinearLayout). I would like to be able to apply certain gesture-based transformations on it including:
rotating the imageview with two fingers about it's center. TextView stays same orientation
Pinch/zoom to scale the imageview (textview should remain the same size)
move the compound view around the layout
In this scenario there will be several of these views populating a relative/framelayout. The user should be able to interact/modify each view individually.
I've achieved at least a partial implementation for the moving around, based off the answer here: https://stackoverflow.com/a/18806475/2879847. I've read/tried some implementations of the scaling/rotation functions but they seem to apply only to the drawable/bitmap rather than the containing view object so, I'm not sure where to go from there. Any help would be great
Many Thanks - let me know if you guys need any further clarifications.

I've managed to achieve what i want (seems to be working well) - will post some code once my workload dies down.

Related

Android: how to do this animation?

There is an ImageView with a drawable resource. The animation should begin empty, the resource should progressively appear from the top edge, then it should continue shifting towards the lower edge until it disappear again beyond that.
I'd like to start this animation whenever I want and make it repeat endlessly until I decide to stop it. Any help?
Maybe you can use one of this libraries, this libraries help you and have many examples
https://github.com/2359media/EasyAndroidAnimations
https://github.com/daimajia/AndroidViewAnimations
Also animating resources is possible by writing custom view and modifying onDraw() function, it is not necessary in your case. You need a ViewGroup with an ImageView nested inside. You set your imageview top-padding -imageHeight which make it disappear at the beginning. than you can use property animator (or object animator) to increase top-padding over time up to 0 and dada! now you have your imageview fully shown on the screen.
property animation is an easy concept you can grasp in 5 minutes! Right now i don't have a IDE so there would be no code. good luck

Android: Scrollable and zoomable container

I'm looking for a way to display views (like buttons, checkboxes, images etc) in a container, which might be bigger than the actual screen size.
A ScrollView within a HorizontalScrollView is no option, since you're only able to scroll one direction at once, not diagonal.
I have yet to find a simple solution to this problem. A zoom function would be nice to have, but that's not as important as the ability to scroll diagonal.
Are there any components out there able to do things like these? Doesn't even have to be for free.

Positioning views in Horizontal Scroll View

I'm trying to build a point-and-click adventure for Android without using any pre-written engine, but I'm stuck in a really crucial point!
I have a HorizontalScrollView bigger than the screen, so the user can scroll left and right in portrait mode to search around rooms, now what I need is to insert items that the player can use inside this View.
I'm trying to use static ImageView, but I'm really confused on how to insert Views in an absolute position inside the HorizontalScrollView. All I know is that Android manages Views location relative to other views (align on top, next to, bottom of), but what I use if I need to position a View in a specified position using specific coordinates without worrying that the image will be misplaced in a different screen size for other Android devices?
I really am confused on how position views in Android :/
Consider creating your own view instead of abusing HSV.
Custom views, doDraw() method, canvas and even gesture detection is not that hard.
Here is a link that will help you with basics, simple viewport implementation for android with scrolling via key events: http://sonnygill.net/android/android-viewport/
what I use if I need to position a View in a specified position using specific coordinates without worrying that the image will be misplaced in a different screen size for other Android devices
Actually, that's exactly the reason ViewGroup (layouts) were created.
You should choose the right layout based on your requirements.
If you do want to position the views by yourself, you can create your own custom ViewGroup by extending one of the view group classes and override the onLayout(...) and onMeasure(...) methods which are used to position and measure child views (in you case, probably the ImageViews) respectively.
You can use this example of FlowLayout as a reference on how you can write your own custom ViewGroup.
Please note that if your content is bigger than the screen as you mentioned, the HorizontalScrollView should be a parent of a single child (which should be the ViewGroup containing your images).

Which Android layout and view to use for simple image-based game?

I would like to make a simple Android game where a large background image is displayed and some other images are displayed in specific locations over it, where the other images may be clickable.
Here's a quick sample image of what I'm talking about:
The user should be able to tap the soccer player or the moose (ah, the classic "soccer player moose problem"!)
How should I render this screen (which layouts and views?) so the user can interact with it and it will scale properly on different devices?
I would use a RelativeLayout.
You can set the you background image to the layout (fill_parent for height and width).
You can then put your ImageViews, containing your moose and soccer player down on the layout relative to the top or sides of the sceen, or relative to each other (making sure to specify "dp" units for everything). Set the backgrounds of your ImageViews to be transparent, and there won't be a bounding box problem (and/or you can also set your ImageViews alignment to be relative to each other, ensuring they don't overlap).
I think this is the simplest way to do this - it is then super easy to attach onClickListener to your ImageViews in your Activity, and you are done.
This type of layout will work the same on all devices and screen sizes.
There are some small gotcha's with RelativeLayouts, but they are pretty simple once you get into them, and provide fast rendering (since the view hierarchy is usually shallow). Good Luck.
ImageView for the clickable elements seems like a fine choice to me. For the background I would just set your image as the background of the parent layout i.e. RelativeLayout
SurfaceView for the whole thing (with your field as a background) and regular *ImageView*s for added elements. You can easily recover the click coordinates from the SurfaceView and thus know what element has been touched.
SurfaceView might offer you additional possibilities anyway.
For most images, I'd use an ImageView for each one, like FoamyGuy said.
If they're close enough for overlapping bounding boxes to be an issue, you can still use an ImageView for each, but with a variation of this answer, testing alpha for each ImageView in range.
I would agree with both FoamyGuy and Booger that if your only goal is to place static images onto the screen that do something when you click them, RelativeLayout and ImageViews all the way.
But...
If you are looking to randomly spawn multiple images onto the screen in intervals and have them move around for the player to interact with while explosions are going off and maidens are being kidnapped, you should look into SurfaceView, Canvas, Drawable, TouchEvents, and FrameBuffers.

Specific Parts of ImageView clickable

What are some ideas about having an ImageView that takes up the whole screen and making only parts of it clickable? I was thinking that I could extend the ImageView class and override its ontouch method which would allow me to detect touches based on an x and y. The only problem I can see with this is on different resolutions the touches might not map to the correct areas. I suppose I could then detect the resolution and figure out some way to map the x and y to the correct areas. I feel like there must be an easier way though. Does anyone have any other ideas?
How about creating transparent views with your desired click listeners on top of the ImageView using a RelativeLayout. You can use the xml to place those "hotspots" where you would like them relative to your image and define the layout so the "hotspot" view scale properly along with the image when displayed on different resolutions.
If the 'hotspot' shapes are not too complex, you could dynamically split the image, setup individual clicklisteners and re-merge the drawables in a way for them to appear contiguous. I do like Gregg's method more though.

Categories

Resources