I have a image loaded as a background and when the screen is touched I want to animate that portion of the screen with a frameanimation. My frameanimation consists of 9 different png files which are made from just the portion of the screen I want animated. I can get it working when I use entire backgrounds as the frames for the animations, but when I use setbounds() to tell the frameanimation where to draw, I end up with the frameanimation being scaled up to fill the entire screen, which also erase my background. How can I get the frameanimation to stay it's original size and locate it at the same time? I can post code later if this isn't clear, i'm not at the comp right now
public boolean onTouchEvent (MotionEvent event)
{
switch (event.getAction())
{
case MotionEvent.ACTION_DOWN:
this.setBackgroundResource (R.drawable.nova);
Object bg = this.getBackground
touchAni.setBounds (152, 156, 152+140, 156+140);
touchAni = (AnimationDrawable) bg;
if (!touchAni.isRunning())
touchAni.start ();
else
{
touchAni.stop();
touchAni.start();
}
}
}
The way I have resolved a similar problem is that I added another image component to my layout xml on top of the component I want to animate. Normally that image component is android:visibility="gone"
but when I want to run the frame animation I set it visible and start the animation.
This way you can place the animation component wherever you want in your layout.
Well, after much puttering around, I finally found the BounceActivity code here: http://rsequence.com/android_blog/node/107. Seems really complicated for such a simple task but gets me what I want.
Of note, if anyone else finds it useful, the Handler() codes needs to have a switch in it so it's not spinning off cpu cycles to BounceView.draw() when nothing is happening on the screen.
Related
I have this weird behavior that I cannot find a solution around...
This only happens in my emulator API Level 10, on my smartphone (Android 4.1) works fine.
I wrote a dynamic animation to show a rolling dice, where 10 random frames are chosen as the frames of the animation, with a duration of 50ms.
When I press the button, the animation run, but squeezed into zero height..... (You can still see some colors from the animating dice), the layout also get messed up.
This does not happen on my phone though.
Here is the portion of the java code:
public void RollDice(View view) {
int id=-1;
AnimationDrawable diceAnimation = new AnimationDrawable();
//create 10 random frames from dice1.jpg to dice6.jpg into diceAnimation
for(int j=0;j<10;j++){
id=getResources().getIdentifier("dice"+String.valueOf(rng.nextInt(6)+1), "drawable", getPackageName());
diceAnimation.addFrame(getResources().getDrawable(id), 50);
}
//assigning and starting animation
diceAnimation.setOneShot(true);
dice.setImageDrawable(diceAnimation);
diceAnimation.start();
}
and the portion of the xml:
<ImageView
android:id="#+id/Dice1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:contentDescription="#string/diceimage"
android:src="#drawable/dice1" />
The button onclick call RollDice().
As final remark, IF I hardcode in ImageView, say android:layout_height="100dp", then the dice will show during animation, but streched into funny shape...
I tried most scaling method, adjustviewbound etc with no luck...
I don't know whether your problem is solved or not.
But I would like to add the answer to this question.
You can try this :
Firstly , set you image view layout_width from match_parent to wrap_content.
Second make use of this below code so as to make the dice disappear completely :
frameAnimation.setVisibility(GONE);
Might have an answer for your, try it out with caution, since I'm a beginner myself.
ViewGroup.MarginLayoutParams mParams = new ViewGroup.MarginLayoutParams(view.getLayoutParams());
ImageView view = (ImageView)findViewById(R.id.image_dice);
layoutParams = new RelativeLayout.LayoutParams(mParams);
layoutParams.width=120;
layoutParams.height=120;
view.setLayoutParams(layoutParams);
Applying that to your image will adjust the .xml on the fly, atleast it works for me when I'm grabbing alot of differently sized images from the web.
I'm currently developing an android app and I would like to achieve an effect to which I haven't found an answer to, even after some searching.
The effect I would like to obtain is over an image. Usually when you press an image, you apply some sort of tint over the image in order to show some feedback, but I would like to go a little bit further, I wouldn't like to apply a tint but a sort os scale over the image.
E.g. I have the following image, Normal Image, and if I press the image (and while I keep it pressed), I would like the image to shrink a bit, like this Pressed Image
N.B.- The black part would not be part of the image, but part of the background. The image would only be the blue square.
Thank you for any help! :)
P.S.- I couldn't post the images here because I don't have enough reputation.
You need to set the onTouchListener of your ImageView that displays the image, so that it replaces the displayed image. This is the listener that runs when you press or unpress the view (in this case the image).
Sample Code:
ImageView iv = (ImageView)findViewById(R.id.my_image_view);
iv.setOnTouchListener(new ImageView.OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent e) {
if (e.getAction()==MotionEvent.ACTION_DOWN)
// Write code here that sets the imageview to display the pressed image
else if (e.getAction()==MotionEvent.ACTION_UP)
// Write code here that sets the imageview to display the unpressed image
}
});
Reference to onTouchListener: http://developer.android.com/reference/android/view/View.OnTouchListener.html
Reference to ImageView (for replacing the displayed image):
http://developer.android.com/reference/android/widget/ImageView.html
Take a look at this design I did for an interface of a game I want to develop on Android:
http://www.moboing.com/smallshow.jpg
When a user touches a balloon, I want that star/glare animation to play with the stars dropping down. All I'm curious about is the best general direction/approach to making that animation possible while developing the app in eclipse/java.
I was thinking making a few variations of stars as transparent PNG's, and making them animate on touch but I'm a newbie so I'm not entirely sure.
You can create the animation like a sequence of images and then use the AnimationDrawable class to make it animated. Let me show you an example:
ImageView my_image = (ImageView) findViewById(R.id.my_animation);
AnimationDrawable animation = new AnimationDrawable();
// We need to add each image to our final animation setting time interval between them
animation.addFrame(getResources().getDrawable(R.drawable.img_1), 200);
animation.addFrame(getResources().getDrawable(R.drawable.img_2), 200);
animation.addFrame(getResources().getDrawable(R.drawable.img_3), 200);
animation.setOneShot(false);
my_image.setBackgroundDrawable(animation); // Set as background to see it
animation.start(); // Start playing the animation
Where:
my_animation: your ImageView into your desire Layout.
img_1, img_2, img_3: images that compounds your animation (your should
create and save them into res/drawable folder).
I hope it can help you and draw a way to do it by yourself :)
PS: this should be into a method on the activity that you want (for example, into onCreate to show it when user start).
I have made a set of 3 images that will represent the move of a animal. Each image represents a frame and consists only in the animal with transparent background.
I have made a AnimationDrawable in code and created the animation:
AnimationDrawable staticAnimation = new AnimationDrawable();
staticAnimation.addFrame(ctx.getResources().getDrawable("frame1"),150);
staticAnimation.addFrame(ctx.getResources().getDrawable("frame2"),150);
staticAnimation.addFrame(ctx.getResources().getDrawable("frame3"),150);
I set the animation as a background for a Imageview and start it
imgAnimal.setBackgroundDrawable(staticAnimation );
staticAnimation.start()
Because the frames have different width (the drawing needs to recreate steps move) looks like the Imageview resizes the images in the animation. Better to say, if frame1 is bigger then frame2, frame 1 is displayed ok but frame 2 is stretched to be as big as frame1 was. Looks really awful.
Any suggestions on how to stop this behavior ? Thank you.
The solution was quite simple, because images in frames have same height but different width, I simply made a transparent border rectangle and put it over each frame. In this case each frame will have the same width and the animatin will run as supposed to.
Is there a way to force an android view to redraw it's background?
I have set a drawable shape with a gradient as background which works fine but after changing the view's height you can see those ugly gradient steps.
What can I do?
I tried view.invalidate() and view.refreshDrawableState() without any visible difference.
Thank you!
//EDIT:
Here are some more details and my code:
After your answers I think the banding is a result of my probably bad code. Here is what I'm doing:
Scaling a view
setting its new width and height because the scaled view does not accept user input in other areas then the "old" one (see android weird (at least for me) behaviour of control after scaling / doesn't accept input in it's whole area )
trying to set the background again (which contains a gradient and a rectangle with rounded corners)
Here is my code:
public void onAnimationEnd(Animation animation)
{
MyView view = (MyView) ((ExtendedScaleAnimation) animation).getView();
view.getLayoutParams().width = toWidth;
view.getLayoutParams().height = toHeight;
view.clearAnimation();
view.requestLayout();
view.refreshBackground(); // background will be changed
}
On the device you can see that the background drawable is changed but there is a flickering which seems to me like the backround change is applied before the animation is over. Programatically it should be over! Or am I wrong?
Thank you again!
Can you try after resize:
v.setBackgroundResource(null);
v.setBackgroundResource(...my drawable...);