I wrote a rotation animation for a view which has 2 buttons in it, anim xml:
<rotate
xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:toDegrees="360"
android:pivotX="50%"
android:pivotY="50%"
android:interpolator="#anim/linear_interpolator"
android:duration="10000"
android:repeatMode="restart"
android:repeatCount="infinite"
android:startOffset="0"
/>
The issue with this is that the location of the buttons seem to be fixed on the screen in the place where I put it in the XML, so when the buttons move clicking on them does nothing. I tried implementing rotation animation using RotateAnimation class but it was identical, buttons can only be clicked in the place where they were put in the XML, how to make the buttons actually movable?
Related
Does anybody has an example of animation that looks like tilting slightly on left and right but middle is not moving. It looks like when you want to move icons on iOS and make a long press you could see that kind of animation what I need. I got animation but it more looks like moving the whole item instead of tilting. Here is my code
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<rotate
android:duration="70"
android:interpolator="#android:anim/linear_interpolator"
android:pivotX="40%"
android:pivotY="40%"
android:repeatCount="infinite"
android:repeatMode="reverse"
android:toDegrees="1" />
<translate
android:duration="70"
android:fromXDelta="-3"
android:fromYDelta="3"
android:interpolator="#android:anim/linear_interpolator"
android:repeatCount="infinite"
android:repeatMode="reverse"
android:toXDelta="0.1" />
</set>
Its like wiggling effect on this screen
The rotation effect can be made by adding 2 parameters
android:fromDegrees="0"
android:toDegrees="3"
Background
According to the material design guidelines (here), if you use a ViewPager that has a FAB (floating action button) for the fragments within, the FAB shouldn't move as a part of the fragments, but either disappear or be replaced by another, or animate to something else.
In short, instead of this:
https://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsNVRkV3FZMktvMWc/components-buttons-fab-behavior_06_xhdpi_009.webm
you should do this:
https://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsVlhxNGJCNTEzNFU/components-buttons-fab-behavior_04_xhdpi_009.webm
The problem
I don't see any example or tutorial of what's the best way to perform this.
I mean, having a FAB for each fragment (or some of them) in the ViewPager, while each will be controlled by its fragment (logic and how it looks), yet the FAB won't really move as part of the fragment while sliding between the fragments in the ViewPager.
Even as example apps, I don't see this behavior anywhere. The contacts app has the same FAB for both fragments, and the dialer has the FAB just moving.
There are even apps that use the bad behavior (like Solid-Explorer). On YouTube, there is a FAB (on the "Account" fragment), but it's on the header, so it might be ok there.
The question
How should you implement the correct behavior? Would you really put the FAB as a part of the activity instead of the fragments?
Is there maybe a tutorial and/or sample about this ?
Maybe, when the ViewPager starts scrolling, I could detach the FAB, and attach it to the activity, animate while being scrolled, and when it's done scrolling, I could hide it and show the one of the other fragment?
I faced the same problem with a viewpager and fab little time ago and I solved in this way:
Attach the fab to the activity above the viewpager
Add OnPageChangeListener to ViewPager and save the onPageSelected(int position)'s position in a global variable in your activity
In onPageSelected start the anim of your fab (it can be both xml or programmatically, i did it with xml) and change his colorTint
In your OnClickListener's onClick(View v) when you retrieve fab id (or view) of your fab to determine which action you should perform, you can create a switch statement with the position you get before in onPageSelected
EDIT
These are my two anim.xml that i tried to create similar to android guidelines:
Anim to make disappear old fab:
<?xml version="1.0" encoding="utf-8"?>
<set android:shareInterpolator="false"
xmlns:android="http://schemas.android.com/apk/res/android">
<scale
android:interpolator="#android:anim/accelerate_decelerate_interpolator"
android:fromXScale="1.0"
android:toXScale="0.0"
android:fromYScale="1.0"
android:toYScale="0.0"
android:pivotX="50%"
android:pivotY="50%"
android:fillAfter="false"
android:duration="200" />
<rotate
android:duration="200"
android:interpolator="#android:anim/linear_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:fromDegrees="360"
android:toDegrees="270" />
</set>
Anim to show new one:
<?xml version="1.0" encoding="utf-8"?>
<set android:shareInterpolator="false"
xmlns:android="http://schemas.android.com/apk/res/android">
<scale
android:interpolator="#android:anim/accelerate_decelerate_interpolator"
android:fromXScale="0.0"
android:toXScale="1.0"
android:fromYScale="0.0"
android:toYScale="1.0"
android:pivotX="50%"
android:pivotY="50%"
android:fillAfter="false"
android:duration="200" />
<rotate
android:duration="200"
android:interpolator="#android:anim/linear_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:fromDegrees="270"
android:toDegrees="360" />
</set>
My imageview consists of circle wheel as shown in below pic.I want that wheel should start rotating as soon as user presses a start button and stop rotating when user presses stop button.Is it possible programmatically?If yes,how can i do that?
Create a file named clockwise_rotation.xml and put it into /res/anim Change the duration according to your needs.
<?xml version="1.0" encoding="utf-8"?>
<rotate
xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="3500"
android:fromDegrees="0"
android:interpolator="#android:anim/linear_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="infinite"
android:startOffset="0"
android:toDegrees="360"
/>
And make these two functions that you will be calling in your two buttons
private void startAnimation(){
Animation rotation = AnimationUtils.loadAnimation(getContext(), R.anim.clockwise_rotation);
mImageView.startAnimation(rotation);
}
private void stopAnimation(){
mImageView.clearAnimation();
}
I am using animation for item click of GridView.
My animation file is expand_then_contract.xml as below
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<scale
android:duration="500"
android:fromXScale="1"
android:fromYScale="1"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="1.1"
android:toYScale="1.1" />
<scale
android:duration="500"
android:fromXScale="1.1"
android:fromYScale="1.1"
android:pivotX="50%"
android:pivotY="50%"
android:startOffset="500"
android:toXScale="1"
android:toYScale="1" />
</set>
And I'm applying it in the onItemClickListener of GridView as below
onItemClick(... View view ..)
{
Animation expand_contract = AnimationUtils.loadAnimation(this,
R.anim.expand_then_contract);
view.bringToFront();
view.clearAnimation();
view.setAnimation(expand_contract);
view.startAnimation(expand_contract);
}
It is working as expected. But it gets stuck in between. At some point when it is contracting back to normal position, for a moment it freezes. Why does this happen. Why can't animation in my code work as smoothly as they make it in GoLauncher Animations. Do they use any external libraries.
The problem is with interpolator , your job is done in two diffrent steps
So , Better you merge them both in one step or Use linear interpolator so that there is no halt between executoion
I've a simple view animation, but I can't see to get "rid" of the animation "unwinding" (and I can't seem to find a solution online).
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/linear_interpolator"
android:shareInterpolator="true" >
<scale
android:duration="250"
android:fromXScale="1"
android:fromYScale="1"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="0"
android:toXScale="1.1"
android:toYScale="1.1" />
</set>
What this does is, simply, inflates the View by 10% proportionally, from the middle.
But, when it executes, it inflates and, when it reaches the end, it deflates back. I want to avoid that -- the "unwinding" effect -- when it scales back from 110% to 100%.
How can that be done?
Edit:
I'm starting it simply with this:
Animation animation1 = AnimationUtils.loadAnimation(this, R.anim.<name>);
v.startAnimation(animation1);
The correct answer is found here: How can I animate a view in Android and have it stay in the new position/size?
It is putting this:
android:fillAfter="true"
android:fillEnabled="true"
inside the <set tag.