I want to animate each view with delay. Curently all item are animated together on create. and only when i scroll the new added items are animated so i want to animate the initilly created items in the recycler view this is my code in my recycler view adapter
private void setAnimation(View viewToAnimate, int position)
{
// If the bound view wasn't previously displayed on screen, it's animated
if (position > lastPosition)
{
Animation animation = AnimationUtils.loadAnimation(context, R.anim.slide_left);
animation.setDuration(1000);
viewToAnimate.startAnimation(animation);
lastPosition = position;
}
}
#Override
public void onBindViewHolder(RecyclerViewHolder holder, int position) {
Typeface tf = Typeface.createFromAsset(context.getAssets(), "fonts/gothamlight.ttf");
NavigationData navigationData = arrayList.get(position);
holder.NavigationImage.setImageResource(navigationData.getImg_res());
holder.NavigationTitle.setText(navigationData.getNavigationTitle());
holder.NavigationTitle.setTypeface(tf);
setAnimation(holder.Container, position);
}
try increasing the duration in your animation file i.e. slide_left in your case.
slide_left.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="1000"
android:fromXDelta="100%"
android:toXDelta="0%" >
</translate>
</set>
The solutition i found is declare an int of duration with the default animation duration and inside set animation i have duration = duration + 300. And it works great.
Related
I have an imageView that I want to start as invisible. After a certain button is clicked, I want to animate the Image into view and then I want it to remain at alpha 1. How do I do that? So far no luck. If I set the alpha to 0 in xml, then I never see the image. If I don't set alpha in xml then the image is always visible, and when the button is clicked it animates from 0 to 1 alpha.
Here is my animation code.
AlphaAnimation animation1 = new AlphaAnimation(0.0f, 1.0f);
animation1.setDuration(1000);
animation1.setStartOffset(5000);
animation1.setFillAfter(true);
tokenBtn.startAnimation(animation1);
In MainActivity.java add
public void blink(View view) {
ImageView image = (ImageView) findViewById(R.id.imageView);
Animation animation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.blink);
image.startAnimation(animation1);
}
Create file named blink.xml in res>anim folder and add this code
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha android:fromAlpha="0.0"
android:toAlpha="1.0"
android:interpolator="#android:anim/accelerate_interpolator"
android:duration="--YOUR DURATION--"
android:repeatMode="reverse"
android:repeatCount="0"/>
</set>
And make sure that onClick function on button is named blink
Try to make your ImageView invisible in xml:
<ImageView
...
android:visibility="invisible"/>
Then, by adding an AnimationListener, make it visible in onAnimationStart:
...
animation1.setFillAfter(true);
animation1.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
// pass it visible before starting the animation
tokenBtn.setVisibility(View.VISIBLE);
}
#Override
public void onAnimationRepeat(Animation animation) { }
#Override
public void onAnimationEnd(Animation animation) { }
});
// finally, start the animation
tokenBtn.startAnimation(animation1);
You can simply set initial alpha to 0 then animate it through 1 with desired duration;
imageView.setAlpha(0);
imageView.animate()
.alpha(1)
.setDuration(200);
Android Studio 1.5
Device Samsung 4.4.2
I am trying to animate items loaded from a ArrayList into a recyclerview. I when the dropdown arrow is clicked the items should animate (decelerate) when expanded and should animate when collapsed. However, currently the list items just appears.
Code that calls the setAnimation
#Override
public void onBindChildViewHolder(ChatChildViewHolder childViewHolder, int position, Object childListItem) {
ChatChildTitles chatChildTitles = (ChatChildTitles)childListItem;
childViewHolder.tvChildTitle.setText(chatChildTitles.getTitle());
setAnimation(childViewHolder.cvChildRooms, position);
}
Code for setting the animation
private void setAnimation(CardView viewToAnimate, int position) {
Animation animation = AnimationUtils.loadAnimation(mContext, android.R.anim.fade_in);
animation.setInterpolator(mContext, android.R.anim.decelerate_interpolator);
viewToAnimate.startAnimation(animation);
}
Here is a couple of screenshots:
In the collapsed state
After the arrow has been clicked expland the list
This is my layout I am using that represents the rows that will be displayed in the recyclerView:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
android:id="#+id/cvChildRooms"
xmlns:card="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card:cardBackgroundColor="#color/child_header_lighter_grey"
card:contentPadding="4dp"
card:cardPreventCornerOverlap="true">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/profile_image"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_gravity="center_vertical|start"
android:src="#drawable/photorace"/>
<TextView
android:id="#+id/tvChildTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center"
android:text="Coffee Latte Room"
android:fontFamily="sans-serif-light"
android:textSize="16sp"
android:textColor="#android:color/black"/>
</android.support.v7.widget.CardView>
I have a function that should start the animation.
private void setAnimation(CardView viewToAnimate, int position) {
Animation animation = AnimationUtils.loadAnimation(mContext, android.R.anim.decelerate_interpolator);
viewToAnimate.startAnimation(animation);
}
I have tested using the following that works ok with slide_in_left. However, I don't want them to slide in from the left
Animation animation = AnimationUtils.loadAnimation(mContext, android.R.anim.slide_in_left);
viewToAnimate.startAnimation(animation);
Many thanks for any suggestions,
If you want to use a decelerate interpolator you need to set it AS an interpolator, not as the animator:
private void setAnimation(CardView viewToAnimate, int position) {
Animation animation = AnimationUtils.loadAnimation(mContext, android.R.anim.fade_in); //change this with your desidered (or custom) animation
animation.setInterpolator(mContext, android.R.anim.decelerate_interpolator);
viewToAnimate.startAnimation(animation);
}
UPDATE
You said that you are using com.bignerdranch.android:expandablerecyclerview:2.0.3.
From the official docs of the library, it's clearly state how to create expand/collapse animations:
You can also create your own animations for expansion by overriding
ParentViewHolder#onExpansionToggled(boolean), which will be called for
you when the itemView is expanded or collapsed.
I suggest you to take a look at the official example of the library.
You can't use decelerate_interpolator because it's not an animation, it is an interpolator:
An interpolator defines the rate of change of an animation. This
allows the basic animation effects (alpha, scale, translate, rotate)
to be accelerated, decelerated, repeated, etc.
Reference:
http://developer.android.com/reference/android/view/animation/Interpolator.html
As you can see the XML that describing them are completely different:
Source of decelerate_interpolator.xml:
<decelerateInterpolator />
Source of slide_in_left.xml:
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromXDelta="-50%p" android:toXDelta="0"
android:duration="#android:integer/config_mediumAnimTime"/>
<alpha android:fromAlpha="0.0" android:toAlpha="1.0"
android:duration="#android:integer/config_mediumAnimTime" />
</set>
To animate the list as they expand and collapse, consider using an ItemAnimator from android.
You will need to set up a custom itemAnimator, something similar to the one in the link below:
https://gist.github.com/ademar111190/dc988c8d899dae0193f7
Set the itemAnimator in the method runPendingAnimations to your decelerate interpolator.
#Override
public void runPendingAnimations() {
if (!mViewHolders.isEmpty()) {
int animationDuration = 300;
AnimatorSet animator;
View target;
for (final RecyclerView.ViewHolder viewHolder : mViewHolders) {
target = viewHolder.itemView;
target.setPivotX(target.getMeasuredWidth() / 2);
target.setPivotY(target.getMeasuredHeight() / 2);
animator = new AnimatorSet();
animator.playTogether(
ObjectAnimator.ofFloat(target, "translationX", -target.getMeasuredWidth(), 0.0f),
ObjectAnimator.ofFloat(target, "alpha", target.getAlpha(), 1.0f)
);
animator.setTarget(target);
animator.setDuration(animationDuration);
animator.setInterpolator(new DecelerateInterpolator());
animator.setStartDelay((animationDuration * viewHolder.getPosition()) / 10);
animator.addListener(new AnimatorListener() {
#Override
public void onAnimationEnd(Animator animation) {
mViewHolders.remove(viewHolder);
}
});
animator.start();
}
}
}
Then you will need to set the itemAnimator to the recycler view.
recyclerView.setItemAnimator(new MyItemAnimator());
You can use below code for do that.
private void hideViews() {
recyclerView.animate().translationY(-recyclerView.getHeight()).setInterpolator(new AccelerateInterpolator(2));
FrameLayout.LayoutParams lp = (FrameLayout.LayoutParams) mFabButton.getLayoutParams();
int fabBottomMargin = lp.bottomMargin;
mFabButton.animate().translationY(mFabButton.getHeight()+fabBottomMargin).setInterpolator(new AccelerateInterpolator(2)).start();
}
private void showViews() {
recyclerView.animate().translationY(0).setInterpolator(new DecelerateInterpolator(2));
mFabButton.animate().translationY(0).setInterpolator(new DecelerateInterpolator(2)).start();
}
You can call this method onClick of your Button.
Hope it will help you.
I am currently working on adding a income animation for RecyclerView items. I want it just likes the Google+ Android App. Here is my code snippets:
anim/up_from_bottom.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="#android:anim/decelerate_interpolator">
<translate
android:fromXDelta="0%" android:toXDelta="0%"
android:fromYDelta="60%" android:toYDelta="0%"
android:duration="500" />
</set>
and in the Adapter class I add the function startAnimation(itemHolder.itemView, position); in the funcitononBindViewHolder
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
...
startAnimation(holder.rootView, position);
}
the startAnimation() is like this:
protected void startAnimation(View view, int position) {
if (position > lastPosition) {
Animation animation = AnimationUtils.loadAnimation(mContext, R.anim.up_from_bottom);
view.startAnimation(animation);
lastPosition = position;
}
}
It seems looks like the Google+ Android App's list animation, but it has a bug, when I scroll fast, it animate not perfect, such as it seems that the first position and the current postion perform the animation at the same time.
I just want the animation like Google+, how can I fix it, or there has any other way.
I hava try recyclerview-animators, it's a great lib, but I still do what I want.
Any help please! Thanks!
Your "bug" occurs when you scroll fast because the animation on the viewholder is still running when it is scrolled out of the display and you are binding a new animation to the viewholder when the recyclerview recycles it.
You should override onViewDetachedFromWindow and clear the animation on the view in the method.
This will ensure that any animation that is running on the view will be cleared before it is sent to the recycler for resuse, and you can safely run a new animation on the view.
I want create a splash screen, So i using animation. Now i want Anim scroll from left to mid ( change % become center_vertical or center_horizontal ).
Sorry ! I speak English is not good.
Code xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<translate android:fromXDelta="-220%" android:toXDelta="70%"<!--I want change 70% -> center_vertical-->
android:fromYDelta="0%" android:toYDelta="0%"
android:duration="1200"/>
</set>
If you try with android:toXDelta="0%", it will make the animation stop right where the View is placed on the layout by default. For example, if the View has android:layout_centerHorizontal="true" attribute in layout, the animation will stop in the center of the screen.
public void desaparecer(final LinearLayout parent, View hijo, int espaciofinal) {
parent.removeView(hijo);
final LinearLayout.LayoutParams params = (LinearLayout.LayoutParams)parent.getChildAt(0).getLayoutParams();
ValueAnimator animator = ValueAnimator.ofInt(params.height, espaciofinal);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator valueAnimator)
{
params.height= (Integer) valueAnimator.getAnimatedValue();
parent.getChildAt(0).requestLayout();
}
});
animator.setDuration(300);
animator.start();
}
This are my code, and work... well, a little bad.
i'm searching the way to don't start above 0pd, because the idea it's that start respect the original height.
but if like you, you can use it
I am trying to add Animation for ListView I am using getView()to draw some views in list. all works fine.
public View getView(int position, View convertView, ViewGroup parent) { }
I am trying to add animation when user click on list cell then all list cells should slide left and new data should come from right at same time, means cell data is moving towards left and same time new data coming from right side.
I Have implemented following code in OnItemClickListener
#Override
public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) {
Animation slideOutAnimation=AnimationUtils.loadAnimation(this, R.anim.slide_out);
slideOutAnimation.setDuration(900);
Animation slideInAnimation=AnimationUtils.loadAnimation(this, R.anim.slide_in);
slideInAnimation.setDuration(500);
listView.startAnimation(slideOutAnimation);
new Handler().postDelayed(new Runnable() {
#Override
public void run() {
data = newData();
listView.startAnimation(slideInAnimation);
myAdapterClass.notifyDataSetChanged();
}
}, slideOutAnimation.getDuration());
}
};
above code is working but not getting desire output I am getting one empty view while changing Animation.
Left Sliding Animation Starts--- Empty View----Right Sliding Animation Starts
Not getting why Empty view (shows empty screen for while) is coming, I have played with Animation time and handler but no luck.
How to remove that empty view ? how to achieve this output ?
Left Sliding Animation Starts(Data moving)( Same time data coming from Right) Right Sliding Animation Starts
I am trying to add animation when user click on list cell then all
list cells should slide left and new data should come from right at
same time, means cell data is moving towards left and same time new
data coming from right side.
Your code works as intended but it will not do what you want simply because you use a single ListView widget which you first animate sliding left and then animate sliding right after the first animation ends.
Try to use a ViewFlipper containing two ListViews(one will be the visible one the other will be the one that comes with new data). You'll set your animations on the ViewFlipper(in and out animations) and then on a list item click you'll do:
#Override
public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) {
data = newData();
//set the data for the second list, which currently isn't visible
secondListViewAdapter.notifyDataSetChanged();
viewFlipper().showNext(); //show the next list with animation
}
you can change animation behaviour by editing android:fromXDelta or alpha values,
slideout.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromXDelta="-100%p" android:toXDelta="-100%p" android:duration="#android:integer/config_shortAnimTime"/>
<alpha android:fromAlpha="1.0" android:toAlpha="0.0"
android:duration="#android:integer/config_mediumAnimTime" />
</set>
slidein.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromXDelta="-100%p" android:toXDelta="0" android:duration="#android:integer/config_shortAnimTime"/>
<alpha android:fromAlpha="0.0" android:toAlpha="1.0"
android:duration="#android:integer/config_mediumAnimTime" />
</set>