Rotating Floatingactionbutton

I believe most of you all have seen the rotating FloatingActionButton in apps such as Google keep, push bullet and even Google inbox app. I am trying to achieve this rotation by ha

Solution 1:

Yes...what you have to do is to rotate the mActionIcon in FloatingActionButtonClass . See below.

publicvoidapplyRotation(float start, float end, finalint imgRes) {
    finalfloatcenterX= getWidth() / 2.0f;
    finalfloatcenterY= getHeight() / 2.0f;

    // The animation listener is used to trigger the next animationfinalRotate3dAnimationrotation=newRotate3dAnimation(start, end,
            centerX, centerY, 0, true);
    rotation.setDuration(100);
    rotation.setFillAfter(true);
    rotation.setInterpolator(newAccelerateInterpolator());

    rotation.setAnimationListener(newAnimationListener() {

        @OverridepublicvoidonAnimationStart(Animation animation) {

        }

        @OverridepublicvoidonAnimationRepeat(Animation animation) {

        }

        @OverridepublicvoidonAnimationEnd(Animation animation) {
            mActionIcon = getResources().getDrawable(imgRes);
            mActionIcon.setBounds(0, 0, mActionSize, mActionSize);
            // invalidate();
            rotateSecondImage(-45, 0);
        }

    });

    startAnimation(rotation);

}


privatevoidrotateSecondImage(float start, float end) {
    finalfloatcenterX= getWidth() / 2.0f;
    finalfloatcenterY= getHeight() / 2.0f;

    // The animation listener is used to trigger the next animationfinalRotate3dAnimationrotation=newRotate3dAnimation(start, end,
            centerX, centerY, 0, true);
    rotation.setDuration(100);
    rotation.setFillAfter(true);
    rotation.setInterpolator(newDecelerateInterpolator());
    startAnimation(rotation);
}


publicclassRotate3dAnimationextendsAnimation {
privatefinalfloat mFromDegrees;
privatefinalfloat mToDegrees;
privatefinalfloat mCenterX;
privatefinalfloat mCenterY;
privatefinalfloat mDepthZ;
privatefinalboolean mReverse;
private Camera mCamera;

publicRotate3dAnimation(float fromDegrees, float toDegrees, float centerX,
        float centerY, float depthZ, boolean reverse) {
    mFromDegrees = fromDegrees;
    mToDegrees = toDegrees;
    mCenterX = centerX;
    mCenterY = centerY;
    mDepthZ = depthZ;
    mReverse = reverse;
}

@Overridepublicvoidinitialize(int width, int height, int parentWidth,
        int parentHeight) {
    super.initialize(width, height, parentWidth, parentHeight);
    mCamera = newCamera();
}

@OverrideprotectedvoidapplyTransformation(float interpolatedTime, Transformation t) {
    finalfloatfromDegrees= mFromDegrees;
    floatdegrees= fromDegrees
            + ((mToDegrees - fromDegrees) * interpolatedTime);

    finalfloatcenterX= mCenterX;
    finalfloatcenterY= mCenterY;
    finalCameracamera= mCamera;

    finalMatrixmatrix= t.getMatrix();

    camera.save();
    if (mReverse) {
        camera.translate(0.0f, 0.0f, mDepthZ * interpolatedTime);
    } else {
        camera.translate(0.0f, 0.0f, mDepthZ * (1.0f - interpolatedTime));
    }
    camera.rotateZ(degrees);
    camera.getMatrix(matrix);
    camera.restore();

    matrix.preTranslate(-centerX, -centerY);
    matrix.postTranslate(centerX, centerY);
}

}

Solution 2:

I found that on pre-Lollipop shadow is rotating, but on API >= 21 everything is right.

So, on pre-Lollipop I've tried to rotate an ImageView over FAB. And it works great.

Here is layout where we place ImageView with same source image over FAB:

<FrameLayout>
    android:id="@+id/rotatingFab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end">

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:src="@drawable/ic_autorenew_white_24dp"/>

    <ImageView
        android:id="@+id/fabImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="@color/accent"
        android:src="@drawable/ic_autorenew_white_24dp"
        android:visibility="gone"/>

</FrameLayout>

We start animation like this:

public void startAnimation(Animation animation) {
    if (Build.VERSION.SDK_INT >= 21) {
        mFab.startAnimation(animation);
    } else {
        mFabImage.setVisibility(VISIBLE);
        // need post() to image could measure its size
        mFabImage.post(() -> mFabImage.startAnimation(animation));
    }
}

And stop it:

public void clearAnimation() {
    if (Build.VERSION.SDK_INT >= 21) {
        mFab.clearAnimation();
    } else {
        mFabImage.clearAnimation();
        mFabImage.setVisibility(GONE);
    }
}

I wrap FrameLayout in custom view to more comfortable, here is full gist https://gist.github.com/pengrad/9db82de705b58b10c5e9