Grid On an Image - android

Is there a way to Pan a grid view to Horizontal Direction. I am implementing a grid view on a image. So whenever I zoom the image grid should also get to be zoom and pan in all direction, so i can select a specific area of the image.
I googled for panning of grid but not got satisfactory answers. please help me with some example code.

I too searched for some standard methods for zooming views other than image views but didn't find anything. So, I did a workaround for this and it works.
For zooming a view you can apply zoom animation on the view with fillAfter property enabled.
Here is how you can do this:
ScaleAnimation scale;
final float MAX_SCALE_FACTOR = 5f;
float currentScaleFactor = 1;
public static final long DURATION = 500;
GridView grid = (GridView)findViewById(R.id.grid);
public void scaleMyView()
{
if(currentScaleFactor <= MAX_SCALE_FACTOR)
{
DecelerateInterpolator interpolator = new DecelerateInterpolator();
scale = new ScaleAnimation(currentScaleFactor, currentScaleFactor*1.2f,
currentScaleFactor, currentScaleFactor*1.2f);
currentScaleFactor *= 1.2;
scale.setDuration(DURATION);
scale.setInterpolator(interpolator);
scale.setFillEnabled(true);
scale.setFillAfter(true);
grid.startAnimation(scale);
}
}
Here each time this method is called the view is scaled and the dimension is saved. You can decrease the animation duration to give the effect of instant zooming. Now you can call this method onPan or onTouch to apply zoom.
I hope this will help.

Related

Animate a view towards left

I'm using the following code to expand a view with an animation:
public class HorizontallyAnimate extends Animation {
private int toWidth;
private int startWidth;
private View view;
private String TAG = HorizontallyAnimate.class.getSimpleName();
private int newWidth;
public HorizontallyAnimate(View view) {
this.view = view;
this.startWidth = this.view.getWidth();
this.toWidth = (this.startWidth == view.getHeight() ? this.startWidth * 4 : view.getHeight());
Log.d(TAG,"Start width" + this.startWidth);
Log.d(TAG,"view hieght " + view.getHeight());
}
protected void applyTransformation(float interpolatedTime, Transformation t) {
newWidth = this.startWidth + (int) ((this.toWidth - this.startWidth) * interpolatedTime);
this.view.getLayoutParams().width = newWidth;
this.view.requestLayout();
}
}
The above code animates the view from left to right when the width changes.
But, I'm trying to animate it from the right to left. In other words, the width should grow in opposite direction. How can I be able to do so?
The problem you're dealing with here is an anchoring issue. A view's anchor (or pivot point) determines which point on the view stays still when other parts change.
A view's anchor when adjusting its dimensions highly depends on how the view is laid out. Since you didn't supply any information on how your view is laid out in the code you posted, I'll assume from the problem you're experiencing that the view's horizontal anchor is its left side.
This anchoring issue would produce a growth which would cause the left-most side to stay still, while the right side expands right-wards.
Making the view's left side to expand leftwards while the right side stays still can be achieved in several ways. One way would be to alter the way the view is laid out in its parent (i.e., if the parent is a RelativeLayout, set the view to alignParentRight=true, or playing with gravity in other containers).
However, since you didn't specify how the view is laid out, I will give you a solution which does not make any assumptions on its container. This solution isn't perfect as it may cause some stuttering, but it should still achieve what you're trying to do.
In your applyTransformation method, you will need to compensate for the right growth by translating leftwards. You can compensate for this by using translationX:
protected void applyTransformation(float interpolatedTime, Transformation t) {
// hold the change in a separate variable for reuse.
int delta = (int) ((this.toWidth - this.startWidth) * interpolatedTime);
newWidth = this.startWidth + delta;
this.view.getLayoutParams().width = newWidth;
// shift the view leftwards so that the right side appears not to move.
// shift amount should be equal to the amount the view expanded, but in the
// opposite direction.
this.view.setTranslationX(-delta);
this.view.requestLayout();
}
As you can see, this is a bit of "trick". While the view is expanding to the right, we are moving it to the left at the exact same ratio which causes the illusion of the view expanding to the left.
Test this code and see if it works for you. I would also recommend seeing if you can play around with the view's alignment or gravity from within its container. Doing this would solve your issue in a more standard manner, i.e., without any "tricks".
Hope this helps.

Larger bounds for touch feedback of a View

I am looking for a solution to have larger bounds for selector of an Android view.
Imagine that View is a rectangle view. When user click on the view touch feedback that will be shown is a circle pretty larger than view bounds.
Do you know a good approach to build such an idea?
There is no way how to do that in view's bounds.(I think ). You can implement it by making visual action on parent background view.
ImageButton im = (ImageButton) findViewById(R.id.ur_btn);
im.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
float x = im.getX();
float y = im.getY();
}
});
}
private void addCircleBehindRectangle(int x, int y){
RelativeLayout parent = (RelativeLayout) findViewById(R.id.my_relative_layout);
ImageView iv = new ImageView(this);
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(x, y);
//optional margin l/r
params.leftMargin = 50;
params.topMargin = 60;
parent.addView(iv, params);
}
I hope it helps a little bit. Good luck
If you want to show a view outside of its clipping area, you need to enable this in its parent container (any layout which derives from ViewGroup):
ViewGroup.clipChildren
Another way is increase/decrease paddings of the clicked view itself.

How to rotate ImageView by clockwise

I have sliding up panel and in the titlebar of that panel I have ImageView as in the picture. How to rotate to 180* by clockwise that ImageView when user slide panel up and anti-clockwise when slide down.
For sliding that panel I have method:
#Override
public void onPanelSlide(View panel, float slideOffset) {
Log.i(TAG, "onPanelSlide, offset " + slideOffset);
//Animation here
}
Thanks for any help!
If you want to rotate a view without animation:
view.setRotation(float) sets the degrees that the view is
rotated around the pivot point. Increasing values result in clockwise
rotation.
view.setRotationX(float) sets the degrees that the view is
rotated around the horizontal axis through the pivot point.
Increasing values result in clockwise rotation from the viewpoint of
looking down the x axis. When rotating large views, it is recommended to adjust the camera distance accordingly.
view.setRotationY(float) sets the degrees that the view is
rotated around the vertical axis through the pivot point. Increasing
values result in counter-clockwise rotation from the viewpoint of
looking down the y axis. When rotating large views, it is recommended to adjust the camera distance accordingly.
If you want to use animation:
https://github.com/daimajia/AndroidViewAnimations (recommended)
https://github.com/castorflex/FlipImageView
https://github.com/florent37/ViewAnimator
https://github.com/alexvasilkov/GestureViews
https://gist.github.com/simon-heinen/9795036
https://gist.github.com/methodin/5678214
https://www.google.com/ :D
I didn't want to mark this as an answer but I can't leave comments yet, I was able to get Apurva's solution working correctly but I had to use this instead of getApplicationContext(), I had to use this because of where I was setting the animation from, the code in my application where I am attaching the animation looks like this...
ImageView billysArm = (ImageView) findViewById(R.id.imageView6);
Animation rotate = AnimationUtils.loadAnimation(this, R.anim.rotate);
billysArm.startAnimation(rotate);
hope this helps
You should try this out, setting an animation for your e.g. ImageView
#Override
public void onPanelSlide(View panel, float slideOffset) {
Log.i(TAG, "onPanelSlide, offset " + slideOffset);
// Locate view
ImageView iv= (ImageView) findViewById(R.id.iv);
// Create an animation instance
Animation an = new RotateAnimation(0.0f, 180.0f, pivotX, pivotY);
// Set the animation's parameters
an.setDuration(10000); // duration in ms
an.setRepeatCount(0); // -1 = infinite repeated
an.setRepeatMode(Animation.REVERSE); // reverses each repeat
an.setFillAfter(true); // keep rotation after animation
// Aply animation to image view
iv.setAnimation(an);
}

Simultaneously scale and translate ImageView based on Target

What I want to do is simultaneously scale and translate an ImageView based when the user touches is. The final position and size of the ImageView should be equal to the target.
Below is a snipper of the OnClickListener attached to every ImageView that should perform this action. The new position and size is obtained from ivYou, which also is an ImageView.
#Override
public void onClick(View v) {
// Create animations
int[] from = new int[2];
int[] to = new int[2];
//v.getLocationInWindow(from);
v.getLocationOnScreen(from);
//ivYou.getLocationInWindow(to);
ivYou.getLocationOnScreen(to);
TranslateAnimation transAnim = new TranslateAnimation(0, to[0] - from[0], 0, to[1] - from[0]);
float factorX = ivYou.getWidth() / v.getWidth();
float factorY = ivYou.getHeight() / v.getHeight();
ScaleAnimation scaleAnim = new ScaleAnimation(1.0f, factorX, 1.0f, factorY);
// Create animation set
AnimationSet set = new AnimationSet(true);
set.setFillAfter(true);
set.setDuration(ANIM_DURATION);
set.addAnimation(transAnim);
set.addAnimation(scaleAnim);
// Start animations and disable click listener
v.startAnimation(set);
v.setOnClickListener(null);
}
ANIM_DURATION is 2000 miliseconds.
When I run this code the strangest things happen. The ImageView turns half a circle and gets smaller then its supposed to be. When I do not add the ScaleAnimator to the animation set, then the ImageView is moved to the new position. However, this new position isn't the same for every ImageView. Note that the ImageView's with this OnClickListener all have a different initial position.
Any help and feedback is greatly appreciated!
I was able to achieve this animation by wrapping the target View in a layout group and animating them separately.
In other words, I translate the wrapper layout, and scale the child view. Translating and scaling the same view at the same time always seems to result in unexpected animation trajectories as the scaling messes with the coordinate system the translate animation is using.
translateTarget.animate().x(deltaX).y(deltaY).setDuration(1000);
scaleTarget.animate().scaleX(0.01f).scaleY(0.01f).setDuration(1000)
Did you try this constructor?
ScaleAnimation (float fromX, float toX, float fromY, float toY, float pivotX, float pivotY) and have pivotX be widthofimageview/2 and pivotY be the heightofimageview/2 for it to be the center. This is what I used in my translate scale animation.

How to get Coordinates on touch Event on bitmap not of Screen

Greets ,
How can I get the Coordinates of the Bitmap not of the screen. Screen Coordinates got by event.getX(),event.getY() methods but not getting coordinates of the bitmap. Please help anyone.
You can't get the coordinates of the bitmap directly. You need to calculate to yourself.
Use the position of the ImageView, and with that you can handle it.
Of course, when you are after Activity onCreate you can acces to any inflated (active) views parameter.
Exemple.
ImageView a;
a.getPaddingBottom();
Like all coordinats (left right etc...)
After this you need the Height and Width of the ImageView.
Nah, when you know the views position, hegiht and width you can calculate.
Example:
final ImageView iv_YourImage = (ImageView) findViewById(R.id.iv_imageview);
public boolean onTouch(View v, MotionEvent event){
int topParam = iv_YourImage.getPaddingTop();
int rightParam = iv_YourImage.getPaddingRight();
int maxTopParam = topParam+iv_YourImage.getMaxHeight();
int maxRightParam = rightParam + iv_YourImage.getMaxWidth();
if(event.getX>topParam&&event.getX<maxTopParam){
//the x coordinate is in your image... do the same to Y
}
return true;
}
look at the following code if the answer is too short:
Android: Detect touch on actual image in ImageView
the code replaces the padding and max height coding of this answer and replaces it with the actual width and height of the displayed image using getWidth() and getHeight(). And uses the screen width and height to calculate its position. If you want more detailed answers for your problem you should give more information such as where did you draw the bitmap... did you define it at the activity XML or did you draw it at a random location such as at the X and Y coordinates of a touch event, the answer depends on that information.
package com.example.img;
imports....
public Image extends Activity {
ImageView imgYourImage;
// int imgWidth;
// etc...
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_image);
imgYourImage = (ImageView) findViewById(R.id.yourImage);
imgDimension();
}
private void imgDimension() {
imgWidth = imgYourImage.getWidth();
// at newer api's you can use getLeft() and getTop() of imageView
// if getLeft() works you have the leftX coordinate of image already.
// do same with height
// also get the screen Width and Height by display.getWidth() (depreciated)
// Or the newer code display.getSize()
leftX = (screenwidth - imgWidth) / 2;
rightx = leftx + imgWidth;
}
Notice that this code only works when the image is displayed at the horizontal center of the screen. Or use top and bottom if the image is displayed at the vertical center of the screen.

Categories

Resources