In My Android map application, I have some cluster icons. whenever the cluster icon is pressed i want to display a popup infobox with text and button. If we pressed the button, it will lead to next activity.
private void drawInfoWindow(Canvas canvas, MapView mapView, boolean shadow,
int x, int y) {
if (isSelected_) {
Point selDestinationOffset = new Point();
mapView.getProjection().toPixels(cluster_.center_,
selDestinationOffset);
// Setup the info window with the right size & location
int INFO_WINDOW_WIDTH = 125;
int INFO_WINDOW_HEIGHT = 25;
RectF infoWindowRect = new RectF(0, 0, INFO_WINDOW_WIDTH,
INFO_WINDOW_HEIGHT);
infoWindowRect.offset(x, y);
// Draw inner info window
canvas.drawRoundRect(infoWindowRect, 5, 5, getInnerPaint());
// Draw the MapLocation's name
int TEXT_OFFSET_X = 10;
int TEXT_OFFSET_Y = 15;
canvas.drawText(cluster_.number+" Incidents", x + TEXT_OFFSET_X, y
+ TEXT_OFFSET_Y, getTextPaint());
}
}
This shows only a small textview like popup window. But i want to display a popup infobox with text and button. Please provide me the best way....
Thanks...
You can use a custom layout xml file to create a overlay on mapview, instead of using canvas.
Create a xml file for your overlay(I use overlay_pin_layout.xml here). For example, a linearlayout which has a textview on the top and a button on the bottom.
Add this overlay to where you want.
// Inflate your overlay from xml file
View overlayPin = getLayoutInflater().inflate(R.layout.overlay_pin_layout, null);
// Set the textview
((TextView)(overlayPin.findViewById(R.id.textview_overlayerpin))).setText(YOUR_TEXT);
// set button touch listener
((Button)(overlayPin.findViewById(R.id.button_overlayerpin))).setOnLongClickListener(
new View.OnLongClickListener() {
#Override
public boolean onLongClick(View v) {
// Do something on button click
return false;
}
}
);
// add your overlay on mapview by geopoint
overlayPin.setLayoutParams(new MapView.LayoutParams(LayoutParams.WRAP_CONTENT,
LayoutParams.WRAP_CONTENT,
new GeoPoint(YOUR_LAT, YOUR_LON),
MapView.LayoutParams.BOTTOM_CENTER));
mapView.addView(overlayPin);
For a pop-up like animation , try this one.
Create a anim folder in res, if you do not have one.
Create a xml with the code below in anim folder. I call it animation_pop_up.xml.
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
android:fromXScale="0.0"
android:toXScale="1.0"
android:fromYScale="0.0"
android:toYScale="1.0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="500"
android:repeatCount="0"
android:repeatMode="reverse"
android:interpolator="#android:anim/accelerate_interpolator"
>
</scale>
<alpha
android:fromAlpha="0"
android:toAlpha="1"
android:duration="500"
android:repeatCount="0"
android:repeatMode="reverse">
</alpha>
</set>
When you add overlayPin on mapview, play the animation.
Animation animation = AnimationUtils.loadAnimation(mainActivity.getApplicationContext(),
R.anim.animation_pop_up);
overlayPin.startAnimation(animation);
Related
I want to make an animation for ImageView which runs from left to right on screen and when it reached to 50% of screen, it comes back. My XML:
<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:propertyName="x"
android:repeatMode="reverse"
android:repeatCount="1"
android:valueFrom="0"
android:valueTo="250" >
</objectAnimator>
My application ran well on my phone but when it ran on a smaller or bigger phone, it didn't run well.
I want to use ObjectAnimator and my application min SDK API is 13. Who can help me? Thanks in advance.
For better structure, a dynamic approach is recommended which uses display screen width
First calculate the screen width to measure the half of the screen
Display display = getWindowManager().getDefaultDisplay();
Point point=new Point();
display.getSize(point);
final int width = point.x; // screen width
final float halfW = width/2.0f; // half the width or to any value required,global to class
ObjectAnimator lftToRgt,rgtToLft; // global to class
// initialize the view in onCreate
imageView = (ImageView) findViewById(R.id.imageButtontest);
// set the click listener
imageView.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
anim();// call to animate
}
});
Add the below function to your class and enjoy.
void anim(){
// translationX to move object along x axis
// next values are position value
lftToRgt = ObjectAnimator.ofFloat( imageView,"translationX",0f,halfW )
.setDuration(700); // to animate left to right
rgtToLft = ObjectAnimator.ofFloat( imageView,"translationX",halfW,0f )
.setDuration(700); // to animate right to left
AnimatorSet s = new AnimatorSet();//required to set the sequence
s.play( lftToRgt ).before( rgtToLft ); // manage sequence
s.start(); // play the animation
}
Check out the complete Code Snippet
I have a Linear Layout which I want to be animated to resize when I click on it. Once it is resized you should be able to see buttons and text. I've tried animating using this:
container.animate().scaleX(scale);
container.animate().scaleY(scale);
Also I tried this:
container.startAnimation(anim);
where anim is (for making the view bigger):
<scale
android:interpolator="#android:anim/accelerate_decelerate_interpolator"
android:fromXScale="1.0"
android:toXScale="10.0"
android:fromYScale="1.0"
android:toYScale="10.0"
android:pivotX="0%"
android:pivotY="0%"
android:fillAfter="false"
android:duration="700" />
But the problem is that each time I resize the LinearLayout the children inside get resized as well. This should be compatible to AndroidSDK 16 and above. How to achieve this without resizing the children inside?
Thanks
Hello you can override onMeasure() method of the children and make its dimensions as constants for example.
float scale = 1.2f;
ValueAnimator animator = ValueAnimator.ofInt(0,100);
animator.setTarget(container);
animator.setDuration(1000).start();
animator.addUpdateListener(new AnimatorUpdateListener()
{
#Override
public void onAnimationUpdate(ValueAnimator animation)
{
LayoutParams layoutparams = container.getLayoutParams();
layoutparams.height = (int)(layoutparams.height* animation.getAnimatedValue() *(scale -1f));
layoutparams.width= (int)(layoutparams.width* animation.getAnimatedValue() *(scale -1f));
container.setLayoutParams(layoutparams);
}
});
I have Relative layout, in that layout I have image views which altogether looks like one image. I want animate the 6 image views. 3 are right_top,right_center,right_bottom and another 3 are left-top,left-center,left-bottom. and all these are within its parent layout only...
I want to implement exactly like this image.
Hope THIS may help you.
And if you want to add scaling to tour animation add this scale inside your each animation set
<scale
android:fromYScale="1.0"
android:toYScale="0.5"
android:startOffset="0"
android:duration="1200"
android:fromXScale="1.0"
android:toXScale="0.5"
android:fillAfter="true" />
siddhu,sorry for late.
#Override
public void onClick(View v) {
TranslateAnimation mAnimation1 = new TranslateAnimation(0, mImageViewX.getX(),
mImageView1.getY(), mImageViewX.getY());
mAnimation1.setDuration(500);
mAnimation1.setFillAfter(true);
mImageView1.startAnimation(mAnimation1);
TranslateAnimation mAnimation2 = new TranslateAnimation(0,
- mImageViewX.getX(), mImageView2.getY(), mImageViewX.getY());
mAnimation2.setDuration(500);
mAnimation2.setFillAfter(true);
mImageView2.startAnimation(mAnimation2);
TranslateAnimation mAnimation3 = new TranslateAnimation(0, mImageViewX.getX(),
mImageView3.getX(), -mImageViewX.getY());
mAnimation3.setDuration(500);
mAnimation3.setFillAfter(true);
mImageView3.startAnimation(mAnimation3);
}
The xml is this :
you should learn animation first..it's not hard.
android.view.animation.TranslateAnimation.TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)
```
How can I create one animation which always translates from left to right and then if animation stops it turns the other way and translates from right to left. I can create Translate animation in xml and programatically too.
Create this xml, it will translate from left to right and from right to left.
/res/anim/translate.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillEnabled="true"
android:fillAfter="true" >
<translate
android:interpolator="#android:anim/linear_interpolator"
android:fromXDelta="0%p"
android:toXDelta="10%p"
android:duration="2000"
android:startOffset="0" />
<translate
android:interpolator="#android:anim/linear_interpolator"
android:fromXDelta="10%p"
android:toXDelta="-10%p"
android:duration="2000"
android:startOffset="2000" />
</set>
Suppose you want to apply this animation to an image then write the code below in your class file.
ImageView image = (ImageView)findViewById(R.id.imageView1);
Animation animation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.translate);
image.startAnimation(animation);
Edit:
If you want your animation to repeat infinitely add the following attributes to the translate tag.
android:repeatCount="infinite"
android:repeatMode="restart"
Depends on your min API level actually. Essentially You should look at ViewPropertyAnimator class.
Let's say you have view to animate, and parent - parent of this view. Your code would look like this:
final float startX = 0; //start position
final float endX = parent.getWidth() - view.getWidth(); //end position - right edge of the parent
API 12+:
view.animate().translationX(endX).setListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationEnd(Animator animation) {
view.animate().translationX(startX).start();
}
}).start();
API 16+:
view.animate().translationX(endX).withEndAction(new Runnable() {
#Override
public void run() {
view.animate().translationX(startX).start();
}
}).start();
Your startX and endX might be different - depending on your needs.
Please note that start() method call is optional.
Also I have not mentioned solution for API <12 since I personally think that nobody should support those legacy APIs :)
I am trying to animate a view to scale up on touch down and scale down on touch up. The following is my animation declarations:
scale_up.xml
<?xml version="1.0" encoding="utf-8"?>
<scale
xmlns:android="http://schemas.android.com/apk/res/android"
android:pivotX="50%"
android:pivotY="50%"
android:fillAfter="true"
android:duration="500"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:toXScale="1.5"
android:toYScale="1.5" />
scale_down.xml
<?xml version="1.0" encoding="utf-8"?>
<scale
xmlns:android="http://schemas.android.com/apk/res/android"
android:pivotX="50%"
android:pivotY="50%"
android:fillAfter="true"
android:duration="500"
android:fromXScale="1.5"
android:fromYScale="1.5"
android:toXScale="1.0"
android:toYScale="1.0" />
I then use SurfaceHolder's onTouch method to reach to MotionEvents:
public boolean onTouchEvent(MotionEvent event) {
switch(event.getAction()) {
case MotionEvent.ACTION_DOWN:
mView.startAnimation(mScaleUp);
mView.invalidate();
// Intentional fall-through
case MotionEvent.ACTION_MOVE:
float[] focusCoords = translatePointerCoords(this, event);
mView.setX(focusCoords[0] - mView.getWidth() / 2);
mView.setY(focusCoords[0] - mView.getHeight() / 2);
mView.invalidate();
mView.requestLayout();
break;
case MotionEvent.ACTION_UP:
mView.startAnimation(mScaleDown);
mView.invalidate()
break;
}
}
public static float[] translatePointerCoords(View view, MotionEvent event) {
final int index = event.getActionIndex();
final float[] coords = new float[] { event.getX(index), event.getY(index) };
Matrix matrix = new Matrix();
view.getMatrix().invert(matrix);
matrix.postTranslate(view.getScrollX(), view.getScrollY());
matrix.mapPoints(coords);
return coords;
}
The mView view is 120dp x 120dp and it is drawn initially at lication (0, 0). If animations are disabled, I can see the view being dragged under my finder. However, when animations are enabled, upon touching my finger down, I see the view scale up but it also displaced in the bottom-right direction. As it turns out, if I put my finger close to parent's (0, 0) coordinates, the view doesn't get displaced. This means that somehow the pivotX and pivotY either get ignored or somehow they get cached with the old view's position when I load the animations. Also, when I start moving my finger, I see that the scaled image gets distorted and all messed up:
Based on all of this, I'm getting the idea that tween animations with movable/dynamic views are not meant to play together. Should I use property animations? Is that what is commonly used to perform such tasks?
Thanks for any advice!
I have the same problem, too. It is because your "real" LayoutParam is too small to update the whole "fillAfter" region. A simple way to solve that: invalidate the parent layout!