CODEWITHSUNDEEP
javaandroidxmlandroid-animationfloating-action-button
Ahmed Yusuf
Ahmed Yusuf

Reputation: 73

How can I make Floating Action Button rotate on every click

I want the fab to rotate each time i click on it. But after trying, i achieved the rotation effect. But the problem i'm having is that it only work once. i.e on app startup. Please help, i'm a beginner in this. Below is the complete code i used.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    tools:context=".MainActivity">

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottom_app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:gravity="bottom"
        android:backgroundTint="@color/design_default_color_background"
        app:fabCradleMargin="15dp"
        app:menu="@menu/app_bar_layout"
        app:fabCradleVerticalOffset="20dp"
        app:fabCradleRoundedCornerRadius="40dp"/>


    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab_generate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:backgroundTint="#1D6837"
        android:src="@drawable/generate"
        app:layout_anchor="@id/bottom_app_bar"
        android:contentDescription="generate"
        android:clickable="true"
        app:fabCustomSize="80dp"
        app:maxImageSize="45dp"
        android:layout_marginBottom="20dp"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

MainActivity.java

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.OvershootInterpolator;
import com.google.android.material.floatingactionbutton.FloatingActionButton;
import static androidx.core.view.ViewCompat.animate;


public class MainActivity extends AppCompatActivity {

    private FloatingActionButton generateFab;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        generateFab = findViewById(R.id.fab_generate);



        generateFab.setOnClickListener ( new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                final OvershootInterpolator interpolator = new OvershootInterpolator();
                animate(generateFab).
                        setInterpolator(interpolator).
                        setListener(null).
                        rotation(360f).
                        withLayer().
                        setDuration(300).
                        withStartAction(null).
                        start();


            }

        });
    }
}

Basically, I added onClickListener to my floating action button inside the onCreate method

Upvotes: 3

Views: 760

Answers (1)

David Kroukamp
David Kroukamp

Reputation: 36423

Try this:

animate(generateFab).
    setInterpolator(interpolator).
    setListener(null).
    rotation(generateFab.getRotation() + 360f).
    withLayer().
    setDuration(300).
    withStartAction(null).
    start();

Notice the line rotation(generateFab.getRotation() + 360f).

You rotate the view 360 degrees on the first click so this changes the view elements rotation attribute to 360, and because its already 360 (after the first rotation) it wont rotate again. So instead you want to keep adding 360 degrees to the current views rotation and it will work.

Update:

As per comment by @AHoneyBustard you could instead of rotation(...) use:

rotationBy(360f)

Upvotes: 3

Related Questions