I want to rotate the animation continuously

Question

I want to make an animation where + changes to x when you click the floating action bar and x changes to + when you click again.But here is the result of the code.enter image description here

• -> x -> + I would like to write the code so that it can be changed every time it is clicked. Any help would be appreciated.

fab_rotate.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">

    <rotate
        android:duration="500"
        android:pivotY="50%"
        android:pivotX="50%"
        android:toDegrees="45"
        android:fromDegrees="0"/>

</set>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"

tools:context=".MainActivity">






<com.google.android.material.floatingactionbutton.FloatingActionButton

    android:id="@+id/fab_sub1"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:layout_above="@+id/fab_sub2"

    android:layout_alignParentRight="true"

    android:layout_marginBottom="15dp"

    android:layout_marginRight="20dp"

    android:backgroundTint="#ffffff"

    android:visibility="invisible"

    app:borderWidth="0dp"

    app:fabSize="normal" />



<com.google.android.material.floatingactionbutton.FloatingActionButton

    android:id="@+id/fab_sub2"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:layout_above="@+id/fab_main"

    android:layout_alignParentRight="true"

    android:layout_marginBottom="15dp"

    android:layout_marginRight="20dp"

    android:backgroundTint="#ffffff"

    android:visibility="invisible"

    app:borderWidth="0dp"

    app:fabSize="normal" />



<com.google.android.material.floatingactionbutton.FloatingActionButton

    android:id="@+id/fab_main"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:layout_alignParentBottom="true"

    android:layout_alignParentRight="true"

    android:layout_marginBottom="20dp"

    android:layout_marginRight="20dp"

    android:backgroundTint="#009688"

    android:src="@drawable/ic_add"

    app:borderWidth="0dp"

    app:fabSize="normal"

    />



</RelativeLayout>

MainActivity.java

import android.content.Context;

import android.os.Bundle;



import android.view.View;

import android.view.animation.Animation;

import android.view.animation.AnimationUtils;

import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;

import com.google.android.material.floatingactionbutton.FloatingActionButton;


public class MainActivity extends AppCompatActivity implements View.OnClickListener {

private Context mContext;



private FloatingActionButton fab_main, fab_sub1, fab_sub2;

private Animation fab_open, fab_close, fab_rotate;

private boolean isFabOpen = false;



@Override

protected void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);

    setContentView(R.layout.activity_main);

    mContext = getApplicationContext();



    fab_open = AnimationUtils.loadAnimation(mContext, R.anim.fab_open);

    fab_close = AnimationUtils.loadAnimation(mContext, R.anim.fab_close);

    fab_rotate = AnimationUtils.loadAnimation(mContext, R.anim.fab_rotate);



    fab_main = (FloatingActionButton) findViewById(R.id.fab_main);

    fab_sub1 = (FloatingActionButton) findViewById(R.id.fab_sub1);

    fab_sub2 = (FloatingActionButton) findViewById(R.id.fab_sub2);



    fab_main.setOnClickListener(this);

    fab_sub1.setOnClickListener(this);

    fab_sub2.setOnClickListener(this);

}



@Override

public void onClick(View v) {

    switch (v.getId()) {

        case R.id.fab_main:

            toggleFab();
            fab_main.startAnimation(fab_rotate);

            break;

        case R.id.fab_sub1:

            toggleFab();

            Toast.makeText(this, "Camera Open-!", Toast.LENGTH_SHORT).show();

            break;



        case R.id.fab_sub2:

            toggleFab();

            Toast.makeText(this, "Map Open-!", Toast.LENGTH_SHORT).show();

            break;

    }

}



private void toggleFab() {

    if (isFabOpen) {

        fab_sub1.startAnimation(fab_close);

        fab_sub2.startAnimation(fab_close);

        fab_sub1.setClickable(false);

        fab_sub2.setClickable(false);

        isFabOpen = false;

    } else {

        fab_sub1.startAnimation(fab_open);

        fab_sub2.startAnimation(fab_open);

        fab_sub1.setClickable(true);

        fab_sub2.setClickable(true);

        isFabOpen = true;

    }

}

}

Answer 1

I see you're trying to achieve something like this: https://github.com/kelmer44/fabmenus/blob/master/art/demo.gif

If yes then in your current code you can add a fab_normal animation to bring your fab icon into its own original position.

Right now with fab_rotate You're just rotating it to 45 degrees everytime. You're not bringing it back to 0.

That's why you need a fab_normal.xml as following:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">

    <rotate
        android:duration="500"
        android:pivotY="50%"
        android:pivotX="50%"
        android:toDegrees="0"
        android:fromDegrees="45"/>

</set>

Note that how fromDegrees & toDegrees values are swaped with each other.

And then in your MainActivity Use it like:

import android.content.Context;

import android.os.Bundle;



import android.view.View;

import android.view.animation.Animation;

import android.view.animation.AnimationUtils;

import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;

import com.google.android.material.floatingactionbutton.FloatingActionButton;


public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private Context mContext;



    private FloatingActionButton fab_main, fab_sub1, fab_sub2;

    private Animation fab_open, fab_close, fab_rotate,fab_normal;

    private boolean isFabOpen = false;



    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        mContext = getApplicationContext();



        fab_open = AnimationUtils.loadAnimation(mContext, R.anim.fab_open);

        fab_close = AnimationUtils.loadAnimation(mContext, R.anim.fab_close);

        fab_rotate = AnimationUtils.loadAnimation(mContext, R.anim.fab_rotate);

        fab_normal = AnimationUtils.loadAnimation(mContext, R.anim.fab_normal);



        fab_main = (FloatingActionButton) findViewById(R.id.fab_main);

        fab_sub1 = (FloatingActionButton) findViewById(R.id.fab_sub1);

        fab_sub2 = (FloatingActionButton) findViewById(R.id.fab_sub2);



        fab_main.setOnClickListener(this);

        fab_sub1.setOnClickListener(this);

        fab_sub2.setOnClickListener(this);

    }



    @Override

    public void onClick(View v) {

        switch (v.getId()) {

            case R.id.fab_main:

                fab_main.startAnimation(isFabOpen ? fab_normal : fab_rotate);
                toggleFab();

                break;

            case R.id.fab_sub1:

                toggleFab();

                Toast.makeText(this, "Camera Open-!", Toast.LENGTH_SHORT).show();

                break;



            case R.id.fab_sub2:

                toggleFab();

                Toast.makeText(this, "Map Open-!", Toast.LENGTH_SHORT).show();

                break;

        }

    }



    private void toggleFab() {

        if (isFabOpen) {

            fab_sub1.startAnimation(fab_close);

            fab_sub2.startAnimation(fab_close);

            fab_sub1.setClickable(false);

            fab_sub2.setClickable(false);

            isFabOpen = false;

        } else {

            fab_sub1.startAnimation(fab_open);

            fab_sub2.startAnimation(fab_open);

            fab_sub1.setClickable(true);

            fab_sub2.setClickable(true);

            isFabOpen = true;

        }

    }

}

If you need more advance usage then see this project: https://github.com/kelmer44/fabmenus