I rotate the FAB in such a simple way:
fab.startAnimation(AnimationUtils.loadAnimation(this, R.anim.rotate));
rotate.xml:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<rotate
android:fromDegrees="0"
android:toDegrees="360"
android:pivotX="50%"
android:pivotY="50%"
android:duration="1000"/>
</set>
This works, but together with the FAB its shadow rotates. But I need only the FAB to rotate (or even its src image, if there's any difference).
Did you try with the animate method provided by the Compat library? I too had the same problem when using Animation utils
final OvershootInterpolator interpolator = new OvershootInterpolator();
ViewCompat.animate(fab).
rotation(135f).
withLayer().
setDuration(300).
setInterpolator(interpolator).
start();
public void rotateFabForward() {
ViewCompat.animate(fab)
.rotation(135.0F)
.withLayer()
.setDuration(300L)
.setInterpolator(new OvershootInterpolator(10.0F))
.start();
}
public void rotateFabBackward() {
ViewCompat.animate(fab)
.rotation(0.0F)
.withLayer()
.setDuration(300L)
.setInterpolator(new OvershootInterpolator(10.0F))
.start();
}
There's an entirely another approach that works flawlessly for me (the one suggested in the accepted answer produces a clipped shadow on pre-L). Create an XML drawable and wrap your FAB icon into a <rotate>
tag like this:
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android" android:fromDegrees="0" android:toDegrees="45">
<bitmap android:src="@drawable/ic_add_white_24dp"/>
</rotate>
Set this drawable to your FAB, and animate either its level directly or the imageLevel
property of the FAB itself; it goes from 0 to 10000. If you'd like an OvershootInterpolator
, then set toDegrees
to 90 and animate the level up to the value of 5000 so it doesn't go beyond the bounds.