I want to apply an animation for multiple views at the same time, how can I apply said animation to several types of views (buttons, imageviews, and other views)?
If what you want is to apply an animation on several views at the same time, simply call the startAnimation method on those views one after the other. They will be simultaneous
//Get your views
View view1 = findViewById(R.id.view1);
View view2 = findViewById(R.id.view2);
View view3 = findViewById(R.id.view3);
//Get your animation
Animation youranimation = AnimationUtils.loadAnimation(this, R.anim.animationid);
//Start animations
view1.startAnimation(youranimation);
view2.startAnimation(youranimation);
view3.startAnimation(youranimation);
Or if you have a lot of views:
Animation youranimation = AnimationUtils.loadAnimation(this, R.anim.animationid);
int[] viewIds = new int[]{R.id.view1,R.id.view2,R.id.view3,R.id.view4};
for(int id : viewIds) findViewById(id).startAnimation(youranimation);
That is, assuming you want to animate several views at the same time, if what your're doing is one after the other we would dive into animation listeners and that's another story
You may use object animators.
There is an easy example in that link which you can also use.
You may also use this tutorial.
Use ValueAnimator instead, and set views property in onAnimationUpdate.
mShowAnimator = ValueAnimator.ofFloat(0f, 1f);
mShowAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator animation) {
for (View v : mTargetViews) {
v.setAlpha((Float)animation.getAnimatedValue());
}
}
});
You can create one large AnimatorSet() that includes several ObjectAnimators. This allows you to play all animations at the same time with no delay. See my answer here.
Related
I'm trying to reuse AlphaAnimation object in a method of an Activity for every new MyView added every second to myLayout:
private AlphaAnimation showAnimation = new AlphaAnimation(0, 1);
private void addViewAndAnimate() {
MyView view = new MyView();
myLayout.addView(view);
showAnimation.setDuration(durationTime);
view.startAnimation(showAnimation);
}
but after I call addViewAndAnimate() the animation is not applied for latest added MyView only, but gets repeated for all MyViews added earlier.
Are view objects somehow bound to an animation? If so is there a way to detach them?
To remove animation from the View, use View.clearAnimation();
So you need to store somewhere a view, to which the animation is applied before, and clear it before applying it to new view. Also you can try to create a new Animation instance for each view.
Or start animation in Handler.post(). This shouldstart animation in the current view for sure
I was trying to find documentation about how to create icon animation of FAB's (of the Design support library), after searching a while i couldn't find any information about it and the AnimationDrawable reference in android developers doesn't work for FAB's even if the class is a child of ImageView.
but manage to get a workaround that works just fine.
The technic I used is similar to the one exposed on the DrawableAnimation documentation, and using the Property Animation API doc.
First I use the ValueAnimator class, and an int array containing the ids of the drawables that you're going to use in your animation.
final int[] ids = {R.drawable.main_button_1,R.drawable.main_button_2,R.drawable.main_button_3,R.drawable.main_button_4,R.drawable.main_button_5,R.drawable.main_button_6, R.drawable.main_button_7};
fab = (FloatingActionButton) findViewById(R.id.yourFabID);
valueAnimator = ValueAnimator.ofInt(0, ids.length - 1).setDuration(yourAnimationTime);
valueAnimator.setInterpolator( new LinearInterpolator() /*your TimeInterpolator*/ );
Then set up an AnimationUpdateListener, and define the change in icon behavior with the method FloatinActionButton.setImageDrawable(Drawable yourDrawable).
But the ValueAnimator updates by default every available frame (depending on the load in hardware), but we don't need to redraw the icon if it has already been drawn, so that is why I use the variable "i"; so each icon is drawn only once. (the timing depends on the interpolator you define)
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
int i = -1;
#Override
public void onAnimationUpdate(ValueAnimator animation) {
int animatedValue = (int) animation.getAnimatedValue();
if(i!=animatedValue) {
fab.setImageDrawable(getResources().getDrawable(ids[animatedValue]));
i = animatedValue;
}
}
});
This implementation allows you to play the animation backward with the method ValueAnimator.reverse();
I know is not a pro solution but it's the only one I've figured out to work on all API's supporting the PropertyAnimation. Please, if you know a better solution post it here, if not I hope this post is helpful
You can achieve FAB's src drawable animation quite similarly to other views that use background for AnimationDrawable.
For general views' background drawable animation, see Use AnimationDrawable.
However, you cannot call getBackground() to get FAB's src.
Instead, use getDrawable().
Example:
FloatingActionButton loginButton = findViewById(R.id.loginButton);
loginAnimation = (AnimationDrawable) loginButton.getDrawable();
loginButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
loginAnimation.start();
}
});
I'm looking to implement an animation that will slide open or expand a ListView in android. At the moment, I'm using a scale animation (shown below)
Animation slideDown = new ScaleAnimation(1.0f, 1.0f, 0.0f, 1.0f);
slideDown.setDuration(1000);
but this doesn't work for 2 reasons:
1) I want the first item to fade in, and then the list to drop down. If I do a fade in animation, the entire list shows up and then jumps back up to the top and scales down to full size
2) I'm not really looking to scale, I would like to just reveal the ListView by animating down the bottom (if that makes sense).
Is there a way that I can do a TranslateAnimation on just the bottom margin or something similar? I looked into the drawable Clip resource, but that didn't seem to fit my needs here (I'm not sure how to apply it to a ListView). And I'm using a normal ListView, not an ExpandableListView, because I just have one group of items.
So I started searching for different things and it turns out that animating the height was my solution. Essentially I start with a dummy object in the list (so that it has at least 1 row), then I animate it from the height of that row to the height of the full list. Below is the code for the runnable that I am now calling.
private Runnable slideDownList1 = new Runnable() {
#Override
public void run() {
final ListView detail = (ListView)getView().findViewById(R.id.detail_menu_1);
ValueAnimator va = ValueAnimator.ofInt(detail.getHeight(), detail.getHeight()*mItem.containedObjects.size());
va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
public void onAnimationUpdate(ValueAnimator animation) {
Integer value = (Integer) animation.getAnimatedValue();
detail.getLayoutParams().height = value.intValue();
detail.requestLayout();
}
});
va.setDuration(1000);
va.start();
}
};
The XML is just a basic ListView with the id of detail_menu_1.
The new element Recycler View include animations. You can use it with Support Library
https://developer.android.com/training/material/lists-cards.html
In Asyntask, I want to change textswitcher text and If I add new view, app crash.
Code sample:
textSwitcher.setInAnimation(MainActivity.this,android.R.anim.slide_in_left);
textSwitcher.setOutAnimation(MainActivity.this, android.R.anim.slide_out_right);
TextView tv=new TextView(MainActivity.this);
tv.setGravity(Gravity.CENTER | Gravity.LEFT);
tv.setTypeface(custom_font);
tv.setTextColor(Color.parseColor("#00285E"));
textSwitcher.addView(tv);
last line gives error after I decided to remove all views and I added textSwitcher.removeAllViews(); , then it gives null pointer. What do you think for fix ?
ViewSwitcher can only have two children, as it says on the documentation for that class. I personally have not seen anyone using ViewSwitcher, it is an old class and you can get the same effect or better on your own with ObjectAnimators now anyway.
You can create your own ViewGroup that let's you switch any view for any other. If it were me, I would just extend FrameLayout and simply add something like this:
public void switchView(View view) {
// add the new view and reveal
view.setAlpha(0);
addView(view);
view.animate().alpha(1f).start();
if (getChildCount() > 0) {
// simultaneously remove the previous view
final View child = getChildAt(0);
child.animate().alpha(0).setListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationEnd(Animator animator) {
// remove the child when the animation ends
removeView(child);
}
}).start();
}
}
This is completely arbitrary behaviour. You can overwrite ViewAnimator similar to ViewSwitcher class and replace the 0 / 1 handling by a variable subview count. Really easy!
Trying to add a help overlay to our app.
This overlay is a RelativeLayout with translucent background and it contains a few TextView and a few ImageView child elements. Now, i want each of the TextView / ImageView to fade-in one after another.
I am using a fade-in animation set (defined in the XML) and calling .startAnimation() on each view in the AnimationListener's OnAnimationEnd method. So, when the first View is done fading-in, i call the startAnimation method on the next view to be faded-in. I am using the same Animation object (animationFadeIn) as argument to startAnimation of all the views. Like so:
...
Animation animationFadeIn = AnimationUtils.loadAnimation(this.context, R.anim.fadein);
...
AnimationListener animationInListener = new AnimationListener(){
#Override
public void onAnimationEnd(Animation animation) {
animation_activity++;
switch(animation_activity) {
case SHOW_TEXT_DROP:
txtDrop.startAnimation(animationFadeIn);
break;
case SHOW_TEXT_SEND:
txtSend.startAnimation(animationFadeIn);
break;
case SHOW_IMAGE_TOUCH:
imgTouch.startAnimation(animationFadeIn);
break;
case SHOW_TEXT_DISABLE:
txtDisable.startAnimation(animationFadeIn);
break;
}
}
};
For fade-in animation, i referred this tutorial
Now, here's the problem:
First view fades-in
Second view fades-in, but first view fades-in again as well along with it
Same continues until all the views are done fading-in
Also, how do i add some delay before the next view fades-in setStartOffset ?
UPDATE
I noticed that if i create a second Animation object by
animationFadeIn2 = AnimationUtils.loadAnimation(this.context, R.anim.fadein);
and then use it for the startAnimation of other element, then it does not create this issue. So, i believe, there must be some property to be set on the Animation object so as to avoid this ?
I finally went ahead and created multiple Animation objects for each of the element. That solves the issue for time-being. It may not be the right/best approach.