In my Android app, I have a TextView with a white background. When it is clicked, its background will change to a .png picture of some icon by calling setBackgroundResource(R.drawable.icon) on the TextView. This works as intended, but the change is rather abrupt. I would like to make the icon appear more gradually; when the TextView is clicked, a tiny version of the icon should appear in the center of the TextView and then immediately expand and fill out the entire TextView. I believe the best way to do this would be by using an animation, which of the available animation types in Android are best for this task?
In case it is not clear what I mean, I drew a sketch to illustrate. The second sequence shows how the code works right now, the first shows how I would like it to be.
So, I managed to get the effect you want with an ImageView, using ScaleAnimation. Here's what you have to do:
First, our XML ImageView:
<ImageView
android:id="#+id/scale_anim"
android:layout_width="60dp"
android:layout_height="60dp"
android:background="#android:color/white" />
It has fixed dimensions and a white background.
The animation will start with one click with this, inside your onCreate() method:
ImageView starImageView = (ImageView) findViewById(R.id.scale_anim);
starImageView.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
ScaleAnimation starScaleAnimation =
new ScaleAnimation(0.3f, 1f, 0.3f, 1f,
ScaleAnimation.RELATIVE_TO_SELF, 0.5f,
ScaleAnimation.RELATIVE_TO_SELF, 0.5f);
starScaleAnimation.setDuration(500);
((ImageView) v).setImageResource(R.drawable.star);
ScaleAnimation scaleAnim = starScaleAnimation;
v.startAnimation(scaleAnim);
}
});
We are applying a scale animation on the ImageView that stars with 30% of the original size and scales to 100% of its size, from its center point. The duration of this animation is half a second. All these parameters can be changed.
Every time you click the ImageView, your drawable will be applied and the animation will start.
Try this way if it solve yours.
Create an ImageView (X) above your original ImageView (A) - same size and same place as (A)
Animate (X) with ObjectAnimator, listen for the onAnimationEnd call and set the (A)'s background. Then remove (X).
Hope this will help.
Related
I have a menu consisting of 5 buttons with color background (width set to match_parent, and height to wrap_content).
I want it to fill all the screen with the background color after i click it with the button's text either staying on his place or moving slovly to center.
After a lots of searching for different animation methods i picked that one
Transition changeBounds = new ChangeBounds();
changeBounds.setDuration(1000);
TransitionManager.beginDelayedTransition(landingScreenLayout, changeBounds);
ViewGroup.LayoutParams sizeRules = mButton.getLayoutParams();
mButton.setLayoutParams(new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT));
I chose it because animating it with "scale" stretches the button's text. But the problem is, that when i start animating it, its text immediately goes to the center, what ruins everything - obliviously
Any help appreciated ;)
Edit: oh, and i've already forgot - i tried to make this 'button'/menu item with a RelativeLayout and TextView - what worked, but it looked horribly dirty in XML and i wouldn't want to go that way
I should display an animation that draws line from left to right. Please look at following image.
First layer is background (whole image without root lines and country names)
Second layer is lines and country names.
I can use alpha animation in following way in my activity:
mIvRoot = (ImageView) findViewById(R.id.ivRoot);
ObjectAnimator alphaAnim = ObjectAnimator.ofFloat(mIvRoot, "alpha", 0f, 1f);
alphaAnim.setDuration(2000);
alphaAnim.start();
Although it works fine, however alpha applies to whole image. The thing that I'm looking for instead is alpha applies from left to right. Therefore, user feels lines are drawing.
Any suggestion would be appreciated. Thanks
I fixed temporarily my problem in a bl.sht way. Please share with me your idea to fix this way.
I placed another white view (since my background is white) on top of root image and assigned it translation animation instead of using alpha animation Like this:
<View
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/White"
android:id="#+id/viCover"
android:layout_alignTop="#+id/ivRoot"
android:layout_alignBottom="#+id/ivRoot"
android:layout_alignLeft="#+id/ivRoot"
android:layout_alignRight="#+id/ivRoot"
android:layout_marginLeft="200dp"/>
and code:
ObjectAnimator transRootAnim = ObjectAnimator.ofFloat(mViCover, "translationX", 0f, 1500f);
transRootAnim.setDuration(3000);
transRootAnim.start();
Even though i didn't understand why you're not actually drawing those lines, you may want to look at this post by Romain Guy that he also made something similar (Actually almost same :))
I have an ImageView and I want to translate it to a random spot on the screen:
TranslateAnimation anim = new TranslateAnimation(0,100,0,100);
anim.setDuration(2000);
img.startAnimation(anim);
This works fine. But I want to have a clickable ImageView during the whole animation.
At this moment it only works at the beginning and at the end.
I think you have to use Animator class and not Animation class because when using TranslateAnimation, you are animating a image of a view and not a View it self.
I think this is explained somewhere there
http://android-developers.blogspot.com/2011/02/animation-in-honeycomb.html
And on the next page
I'm trying to animate an ImageView so it's slowly shown from left to right.
When I asked this before I was having trouble to explain what I wanted, so this time I created the desired effect using HTML / JS:
http://jsfiddle.net/E2uDE/
What would be the best way to get this effect in Android?
I tried changing the scaleType and then applying a ScaleAnimation directly to that ImageView:
Layout:
<ImageView
android:id="#+id/graphImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:scaleType="centerCrop"
android:background="#android:color/transparent"
android:contentDescription="#string/stroom_grafiek"
/>
Java:
scale = new ScaleAnimation((float)0,
(float)1, (float)1, (float)1,
Animation.RELATIVE_TO_SELF, (float)0,
Animation.RELATIVE_TO_SELF, (float)1);
scale.setDuration(1000);
graphImage.startAnimation(scale);
But this stil scales the image.
I also tried wrapping the ImageView in a FrameLayout, hoping I could just animate the FrameLayout:
<FrameLayout
android:layout_width="70dp"
android:layout_height="fill_parent"
android:clipChildren="true"">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|left|clip_horizontal" />
</FrameLayout>
This will still try to scale my ImageView to fit inside the FrameLayout.
There are several ways to do this - one way is to simply change the clip on the canvas (i.e. the area where the view is allowed to draw) of the ImageView drawing your image. Slowly increasing the right-hand edge of the draw bounds will result in same effect as in your example link.
I have written some example code which illustrates this technique. If you download/build/run the project, clicking on the image will run the reveal animation.
Have a look at the onDraw method of the CoveredImageView class, which has the following basic structure:
#Override
protected void onDraw(Canvas canvas) {
...
canvas.getClipBounds(mRect);
mRect.right = ...;
canvas.clipRect(mRect);
...
super.onDraw(canvas);
...
invalidate();
}
The clip is adjusted and then invalidate() is called, causing onDraw() to be called again.
I have also written some code to interpolate the right clip value from the elapsed time, which does not depend on any particular version of Android. However, as a note, from Android 3.0 there is a new animation framework and a ValueAnimator class which could help perform such tasks.
You could overlap your imageview with another one, for example one with a plain white drawable. Then you can animate the overlapping imageview without worrying about scale until it has a width of 0 and remove it. For that to work you have to place your imageView in a RelativeLayout ofc.
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...);