I'm trying to implement the same kind of animation that happens when clicking the "clear all" button in the notification bar:
This is what I have now (for a ListView) but it's not working correctly. Because of timing/pauses, I think.
Animation animation = AnimationUtils.loadAnimation(getActivity(), android.R.anim.slide_out_right);
animation.setDuration(300);
int count = mNotificationList.getCount();
for (int i = 0; i < count; i++) {
View view = mNotificationList.getChildAt(i);
if (view != null)
view.startAnimation(animation);
}
Anyone knows how to accomplish the animation?
In order to achieve such an effect you should use a different Animation for each item, so you can easily set different starting offset via Animation.setStartOffset(long) method.
Your code should look like this:
int count = mNotificationList.getCount();
for (int i = 0; i < count; i++) {
View view = mNotificationList.getChildAt(i);
if (view != null) {
// create an Animation for each item
Animation animation = AnimationUtils.loadAnimation(
getActivity(),
android.R.anim.slide_out_right);
animation.setDuration(300);
// ensure animation final state is "persistent"
animation.setFillAfter(true);
// calculate offset (bottom ones first, like in notification panel)
animation.setStartOffset(100 * (count - 1 - i) );
view.startAnimation(animation);
}
}
Related
I'm implementing ViewPager on Android TV to show 3 items like this (background green/purple are debug background to depict whole ViewPager's page):
I archieved that using:
<android.support.v4.view.ViewPager
...
android:paddingLeft="300px"
android:paddingRight="300px"
android:clipToPadding="false"
...
/>
When loosing focus on ViewPager I wanted central item to scale down and pages to come closer together. To achieve that plugged animation:
ValueAnimator animator = ValueAnimator.ofInt(300, 400);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator valueAnimator){
Integer paddingHorizontal = (Integer) valueAnimator.getAnimatedValue();
vpScreenshots.setPadding(paddingHorizontal, 0, paddingHorizontal, 0);
}
});
animator.setDuration(300);
animator.start();
The animation works perfect for 1st element:
However when moving to next pages (both left and right) the padding animation starts to behave strange. When moving e.g. to right padding animation doesn't take action on left item but rather central and right ones. The effects goes deeper the more I move to right. The results are:
So switching pages in ViewPager spoils items alignment when padding animation occurs.
Why does it happen? How ti fix it ?
I managed to solve the issue. The only way which seems to work is to manipulate left and right items' "x" parameter.
Here is the code for focus listener:
if (hasFocus) {
Map<Integer, View> neighbors = vpScreenshots.findNeighbors();
View leftNeighbor = neighbors.get(0);
View rightNeighbor = neighbors.get(1);
if (!firstFocus) {
leftNeighbor.animate().xBy(-100).setDuration(FOCUS_ANIMATION_DURATION).start();
rightNeighbor.animate().xBy(100).setDuration(FOCUS_ANIMATION_DURATION).start();
}
firstFocus = false;
} else {
Map<Integer, View> neighbors = vpScreenshots.findNeighbors();
View leftNeighbor = neighbors.get(0);
View rightNeighbor = neighbors.get(1);
leftNeighbor.animate().xBy(100).setDuration(FOCUS_ANIMATION_DURATION).start();
rightNeighbor.animate().xBy(-100).setDuration(FOCUS_ANIMATION_DURATION).start();
}
Looking for neighbor items is attached to MyViewPager class:
public Map<Integer, View> findNeighbors() {
neighbors = new HashMap<>();
int currentPosition = getCurrentItem();
for (int i = 0; i < getChildCount(); i++) {
View childView = getChildAt(i);
int childPosition = (int) childView.getTag();
if ((currentPosition - childPosition) == 1) {
neighbors.put(0, childView);
}
if ((currentPosition - childPosition) == -1) {
neighbors.put(1, childView);
}
}
return neighbors;
}
So in my android app I have a HorizontalScrollView that will display images. All images are downloaded an added to the View before it is avalible to the user. However when it does apear I want each image to animate in seperatly. Ive tried a LayoutTransition object attached to my layout with this code to show the views:
transition = new LayoutTransition();
transition.setStagger(LayoutTransition.APPEARING, 500);
transition.setDuration(1000);
transition.setAnimateParentHierarchy(true);
for (int i = 0; i < mGallery.getChildCount(); i++) {
mGallery.getChildAt(i).setVisibility(View.VISIBLE);
transition.showChild(mGallery, mGallery.getChildAt(i));
}
I have also tried this method using the the AnimationEndListener, and a recursive animateView() method
private void animateView(final int index) {
if (mGallery.getChildAt(index) == null)
return;
final View child = mGallery.getChildAt(index);
final Animation an = AnimationUtils.loadAnimation(mRootView.getContext(), R.anim.slideup);
AnimationEndListener listener = new AnimationEndListener() {
#Override
public void onAnimationEnd(Animation animation) {
animateView(index + 1);
}
};
an.setAnimationListener(listener);
child.setAnimation(an);
child.setVisibility(View.VISIBLE);
an.start();
}
The first method is preferable however it always animates in all my images at the same time. The second method kind of works, however it will apply the animation to the first view and the all subsequent views will appear in sequence without the animation playing.
I'm trying to dynamically remove some components in a LinearLayout in Android. The logic I have implemented is: If someone clicks a Button in my (Sidebar)Fragment I start an Animation that moves the clicked Button up and the Other Buttons out of the left side of the Display. The Animation triggers an AnimationListener that, after the Animation is complete, iterates over all Buttons in the Layout and removes all non clicked Buttons.
The Problem is: if I disable the Fade Out Animation and step in with the debugger i can see, that after removeView() the Views are still there.
The even bigger Problem is that my Button that should still be Visible (the clicked one) disappears and only shows up again, if I set X and Y Position manually at a later Time.
Is there any way i can "fix" the Button while removal and when does removeView() actually remove the View/update the Layout?
I already tried to remove all Views and then add the Button again with the same result.
Some snippets to clear things up a Bit:
//Start Animation over all Components
//Commented out the move outside animation to ensure the Layout doesn't get streched in this process
for (mComponentIterator = mLayout.getChildCount() - 1; mComponentIterator >= 0; mComponentIterator--) {
final ImageTextButton currentButton = (ImageTextButton) mLayout
.getChildAt(mComponentIterator);
ObjectAnimator buttonAnimation;
if (!currentButton.equals(pClickedButton)) {
// buttonAnimation = ObjectAnimator.ofFloat(currentButton, View.X, POSITION_OUTSIDE);
} else {
// buttonAnimation = ObjectAnimator.ofFloat(currentButton, View.Y, POSITION_UPPER);
animations.add( ObjectAnimator.ofFloat(currentButton, View.Y, POSITION_UPPER));
currentButton.setFocused(true);
mSelectedButton = currentButton;
}
// animations.add(buttonAnimation);
}
buttonAnimations.playTogether(animations);
buttonAnimations.setDuration(mShortAnimationDuration);
buttonAnimations.setInterpolator(new DecelerateInterpolator());
buttonAnimations.addListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationEnd(Animator arg0) {
for (mComponentIterator = mLayout.getChildCount() - 1; mComponentIterator >= 0; mComponentIterator--) {
final ImageTextButton currentButton = (ImageTextButton) mLayout
.getChildAt(mComponentIterator);
if (currentButton.equals(mSelectedButton)) {
if (mCurrentFragment != null) {
//This changes the Layout in another
mListener.onChangeLayoutRequest(R.id.maincontent, mCurrentFragment);
}
} else {
mLayout.removeView(currentButton);
}
}
}
});
buttonAnimations.start();
//Callback when Activity is ready
mCurrentFragment.SetOnActivityCreatedListener(new OnActivityCreatedListener() {
#Override
public void onActivityCreated(Activity activity) {
Drawable grayMenuBackground = getActivity().getResources().getDrawable(
R.drawable.bg_menuitem);
Drawable coloredMenuBackground = grayMenuBackground.getConstantState()
.newDrawable();
coloredMenuBackground.setColorFilter(mSelectedMenuColor,
PorterDuff.Mode.SRC_ATOP);
LinearLayout.LayoutParams rightGravityParams = new LinearLayout.LayoutParams(
LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
rightGravityParams.gravity = Gravity.TOP;
rightGravityParams.weight = 0;
Drawable seperator = getResources().getDrawable(R.drawable.seperator_menu);
seperator.setBounds(new Rect(0, 0, mSelectedButton.getWidth(), 1));
int insertIndex = 1;
for (Button menuButton : mCurrentFragment.getMenuItems()) {
//Some Button setupcode
mLayout.addView(menuButton, insertIndex++);
}
//Here the Button gets visible again
mSelectedButton.setLayoutParams(rightGravityParams);
mSelectedButton.setX(POSITION_LEFT);
mSelectedButton.setY(POSITION_UPPER);
}
});
Im stuck at this problem for two days now. Currently the Buttons Animate in the right manner, then, right after the animation has finished, all Buttons dissapear(also the Clicked Button). Then, after 1/2sec. the other fragment needs to load, the clicked button appears again
PS: I already scheduled the removal with ''mLayout.post()'' with the same result
What happens if you simply do:
button.setVisibility(View.GONE) ;
Added some comments along your code.
//Start Animation over all Components
//Commented out the move outside animation to ensure the Layout doesn't get streched in this process
for (mComponentIterator = mLayout.getChildCount() - 1; mComponentIterator >= 0; mComponentIterator--) {
final ImageTextButton currentButton = (ImageTextButton) mLayout
.getChildAt(mComponentIterator);
ObjectAnimator buttonAnimation;
if (!currentButton.equals(pClickedButton)) {
// buttonAnimation = ObjectAnimator.ofFloat(currentButton, View.X, POSITION_OUTSIDE);
} else {
// buttonAnimation = ObjectAnimator.ofFloat(currentButton, View.Y, POSITION_UPPER);
/*
* You say that you want to keep the clicked button, yet you
* add it to the animations?
*/
animations.add( ObjectAnimator.ofFloat(currentButton, View.Y, POSITION_UPPER));
currentButton.setFocused(true);
mSelectedButton = currentButton;
}
// animations.add(buttonAnimation);
}
buttonAnimations.playTogether(animations);
buttonAnimations.setDuration(mShortAnimationDuration);
buttonAnimations.setInterpolator(new DecelerateInterpolator());
buttonAnimations.addListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationEnd(Animator arg0) {
for (mComponentIterator = mLayout.getChildCount() - 1; mComponentIterator >= 0; mComponentIterator--) {
final ImageTextButton currentButton = (ImageTextButton) mLayout
.getChildAt(mComponentIterator);
if (currentButton.equals(mSelectedButton)) {
if (mCurrentFragment != null) {
//This changes the Layout in another
/*
* What exactly does this do and why does it have to
* be done (numberOfButtons - 1) times?
*/
mListener.onChangeLayoutRequest(R.id.maincontent, mCurrentFragment);
}
} else {
/*
* This does indeed only remove the non selected buttons
* I think, but the animation is still applied to
* the selcted button.
* So it makes sense that you have to reset X and Y
* to see it again.
*/
mLayout.removeView(currentButton);
}
}
}
});
buttonAnimations.start();
//Callback when Activity is ready
mCurrentFragment.SetOnActivityCreatedListener(new OnActivityCreatedListener() {
#Override
public void onActivityCreated(Activity activity) {
Drawable grayMenuBackground = getActivity().getResources().getDrawable(
R.drawable.bg_menuitem);
Drawable coloredMenuBackground = grayMenuBackground.getConstantState()
.newDrawable();
coloredMenuBackground.setColorFilter(mSelectedMenuColor,
PorterDuff.Mode.SRC_ATOP);
LinearLayout.LayoutParams rightGravityParams = new LinearLayout.LayoutParams(
LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
rightGravityParams.gravity = Gravity.TOP;
rightGravityParams.weight = 0;
Drawable seperator = getResources().getDrawable(R.drawable.seperator_menu);
seperator.setBounds(new Rect(0, 0, mSelectedButton.getWidth(), 1));
int insertIndex = 1;
for (Button menuButton : mCurrentFragment.getMenuItems()) {
//Some Button setupcode
mLayout.addView(menuButton, insertIndex++);
}
//Here the Button gets visible again
mSelectedButton.setLayoutParams(rightGravityParams);
mSelectedButton.setX(POSITION_LEFT);
mSelectedButton.setY(POSITION_UPPER);
}
});
I need to create an animation like in the "Catch notes" app. The animation that I am referring to is when you press on an object in a list, all of the object above it go up and all of the objects below it go down, all with animation.
I was thinking that it could not be possible by using a regular list view. so maybe the way to do it is just to put the objects manually one by one in some way?
Any better ideas?
Thanks!
Get all visible items (listView.getFirstVisiblePosition() to getLastVisiblePosition()) and get there views with listView.getChildAt(index).
Then you can animate all the views above and below your view with ObjectAnimator or similar.
Example:
for (int i = listView.getFirstVisiblePosition(); i < myListAdapter.getCount() && i <= listView.getLastVisiblePosition(); i++) {
View v = listView.getChildAt(i - listView.getFirstVisiblePosition());
ListItem listItem = myListAdapter.getListItem(i);
if (v != null) {
ObjectAnimator.ofFloat(v, "translationY", 0, -screenHeight).start();
}
}
Is there a way to add animation when opening an expandable list in Android?
I want it so that when the user clicks on the expandable list, it has an animation/effect like I'm opening a sliding drawer.
It moves slow until it is completely opened.
I've spent a lot of time searching with no luck. The existing solutions are just not smooth enough - if your layout is something more complex than just 2 buttons, it becomes laggy.
So, I've created my own ListAdapter that caches the whole view into a Bitmap and then performs the animation on the cached view instead of the view itself. It works much faster.
Here it is: https://github.com/dmitry-zaitsev/ExpandableAdapter
The good news is that you don't need to rewrite a bunch of code - just wrap my ExpandableAdapter around your adapter and provide the id of the view that will act like a toggle button and the id of the view that holds the content of the second level:
new ExpandableAdapter(context, yourAdapter, R.id.switch, R.id.holder);
And that is all.
I have tried to make this work as well. I have found one solution that works for the childViews. It does not animate the actual expanding of the group though, but animates the child cells as they fill the space the expansion leaves behind.
Edit: There is a bug in collapsing, which will make some cells that should not be hidden, become hidden. This is probably related to View-recycling in the listView. I will will update when I have a solution to this.
Animating with layoutAnimation in setOnGroupClickListener
mResultList.setOnGroupClickListener(new ExpandableListView.OnGroupClickListener() {
#Override
public boolean onGroupClick(ExpandableListView parent, View v, int groupPosition, long id) {
if(mResultList.isGroupExpanded(groupPosition)){
mProgAdap.prepareToCollapseGroup(groupPosition);
setupLayoutAnimationClose(groupPosition);
mResultList.requestLayout();
}else{
boolean autoScrollToExpandedGroup = false;
mResultList.expandGroup(groupPosition,autoScrollToExpandedGroup);
setupLayoutAnimation();
//*/
}
//telling the listView we have handled the group click, and don't want the default actions.
return true;
}
private void setupLayoutAnimation() {
AnimationSet set = new AnimationSet(true);
Animation animation = new AlphaAnimation(0.0f, 1.0f);
animation.setDuration(50);
set.addAnimation(animation);
animation = new ScaleAnimation(1.0f, 1.0f, 0.0f, 1.0f, 0.5f, 1.0f);
animation.setDuration(50);
set.addAnimation(animation);
LayoutAnimationController controller = new LayoutAnimationController(set, 0.75f);
mResultList.setLayoutAnimationListener(null);
mResultList.setLayoutAnimation(controller);
}
private void setupLayoutAnimationClose(final int groupPosition) {
AnimationSet set = new AnimationSet(true);
Animation animation = new AlphaAnimation(1.0f, 0.0f);
animation.setDuration(50);
animation.setFillAfter(true);
animation.setFillEnabled(true);
set.addAnimation(animation);
animation = new ScaleAnimation(1.0f, 1.0f, 1.0f, 0.0f, 0.5f, 0.0f);
animation.setDuration(50);
animation.setFillAfter(true);
animation.setFillEnabled(true);
set.addAnimation(animation);
set.setFillAfter(true);
set.setFillEnabled(true);
LayoutAnimationController controller = new LayoutAnimationController(set, 0.75f);
controller.setOrder(LayoutAnimationController.ORDER_REVERSE);
mResultList.setLayoutAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
mResultList.collapseGroup(groupPosition);
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
mResultList.setLayoutAnimation(controller);
}
});
We need more tweaks to make the animation only apply to the actual children of the expanded/collapsed group. Because we can't overload the correct part in the LayoutAnimationController, we need to create a special ViewGroup class. This is the same technique as in , "Can LayoutAnimationController animate only specified Views".
In the ExpandableListViewAdapter, we now need some state handling to allow or ignore animation on items in the list.
#Override
public void onGroupExpanded(int groupPos){
super.onGroupExpanded(groupPos);
int childCount = getChildrenCount(groupPos);
Log.d("EXPLIST","setting children to be expanded:" + childCount);
for(int j=0; j < getGroupCount(); j++){
for(int k=0; k < getChildrenCount(j); k++){
GoalServiceCell cell = (GoalServiceCell)getChild(j,k);
cell.expandAnimState = GoalServiceCell.ExpandAnimState.SHOULD_NOT_ANIMATE;
}
}
for(int i=0; i < childCount; i++){
GoalServiceCell cell = (GoalServiceCell)getChild(groupPos,i);
cell.expandAnimState = GoalServiceCell.ExpandAnimState.SHOULD_START_EXPAND;
}
}
public void prepareToCollapseGroup(int groupPos){
int childCount = getChildrenCount(groupPos);
for(int j=0; j < getGroupCount(); j++){
for(int k=0; k < getChildrenCount(j); k++){
GoalServiceCell cell = (GoalServiceCell)getChild(j,k);
cell.expandAnimState = GoalServiceCell.ExpandAnimState.SHOULD_NOT_ANIMATE;
}
}
for(int i=0; i < childCount; i++){
GoalServiceCell cell = (GoalServiceCell)getChild(groupPos,i);
cell.expandAnimState = GoalServiceCell.ExpandAnimState.SHOULD_START_COLLAPSIN;
}
}
#Override
public void onGroupCollapsed(int groupPos){
super.onGroupCollapsed(groupPos);
int childCount = getChildrenCount(groupPos);
for(int i=0; i < childCount; i++){
GoalServiceCell cell = (GoalServiceCell)getChild(groupPos,i);
cell.expandAnimState = GoalServiceCell.ExpandAnimState.SHOULD_NOT_ANIMATE;
}
}
And in the ViewHolder of the children.
void expandOrCollapse(GoalServiceCell cell,int position){
AnimationAverseRelativeLayout hack = (AnimationAverseRelativeLayout)master;
boolean shouldAnim = cell.expandAnimState == GoalServiceCell.ExpandAnimState.SHOULD_START_EXPAND ||
cell.expandAnimState == GoalServiceCell.ExpandAnimState.SHOULD_START_COLLAPSIN;
hack.setIfShouldAnimate(shouldAnim);
}
The GroupViews are also contained in a AnimationAverseRelativeLayout. Since I have set "shouldAnimate" to default to false, I don't need to touch them.
I had this same exact problem. And I fixed it once and for all. I open-sourced it to github.
https://github.com/tjerkw/Android-SlideExpandableListView
Basically, you include this project dependency with your Android project. And then wrap your ListAdapter into a SlideExpandableListAdapter. The wrapper will then add the slide functionality with animation to your ListView.
Hope it helps you, I'm already using it in two projects.
So what I've done is use a regular ListView and then perform the animation in onListItemClick.
The animation is similar to what I do at this link: Android animate drop down/up view proper
But only for a portion of the row view. The row view is implemented in following way in xml:
<somelayout>
<normal>
</normal>
<expanded>
</expanded>
</somelayout>
The normal is used without expand. When expand is activated the expanded is set to visible instead of gone. You need to keep control of setting it to gone again when closing (remember this is set at your convertviews which are recycled).
I can clarify further if needed, it's just quite a lot of code to put in.
That's what i did in this situations.
ObjectAnimator objectAnimator =
ObjectAnimator.ofPropertyValuesHolder(list1,
PropertyValuesHolder.ofInt("bottom",
currentlistHeight,currentlistHeight*2 ));
What this would do is that the height of the listView will get doubled and it would be animated.
If you set the current list height ZERO. this would act like a drawer.