Search code examples
androidfloating-action-button

How Can I Animate Multiple FloatingActionButtons


I want to move many FloatingActionButtons. So I Make 1 Main FloatingActionButton and 5 Sub FloatingActionButton. then, if I move Main FloatingActionButton, Sub FloatingActionButton move Main FloatingActionButton move line like Thumbler FloatingActionButton. Help Me

Test2Activity.java

        public class Test2Activity extends AppCompatActivity{

    private FloatingActionButton floatA, floatB, floatC, floatD, floatE, floatM;
    private float dX,dY;
    private HashMap<Integer, Position> list;
    private int i;

    private int hasOpen = 0; // 0 : Close(Basic), 1 : Open

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_test2);
        floatA = (FloatingActionButton) findViewById(R.id.test2_floatingA);
        floatB = (FloatingActionButton) findViewById(R.id.test2_floatingB);
        floatC = (FloatingActionButton) findViewById(R.id.test2_floatingC);
        floatD = (FloatingActionButton) findViewById(R.id.test2_floatingD);
        floatE = (FloatingActionButton) findViewById(R.id.test2_floatingE);
        floatM = (FloatingActionButton) findViewById(R.id.test2_floatingM);

        floatM.setOnTouchListener(new View.OnTouchListener() {
            @RequiresApi(api = Build.VERSION_CODES.KITKAT)
            @Override
            public boolean onTouch(View view, final MotionEvent event) {

                list = new HashMap<Integer, Position>();
                i = 0;

                switch (event.getAction()){
                    case MotionEvent.ACTION_DOWN:
                        dX = view.getX() - event.getRawX();
                        dY = view.getY() - event.getRawY();
                        break;
                    case MotionEvent.ACTION_MOVE:
                        view.animate()
                                .x(event.getRawX() + dX)
                                .y(event.getRawY() + dY)
                                .setDuration(0)
                                .start();
                        Log.v("@@ i ", "" + i);

                        if(i > 1){
                            floatA.animate()
                                    .x(list.get(i-1).getdX())
                                    .y(list.get(i-1).getdY())
                                    .setDuration(0)
                                    .start();
                        }

                        if(i > 2) {
                            floatB.animate()
                                    .x(list.get(i-2).getdX())
                                    .y(list.get(i-2).getdX())
                                    .setDuration(0)
                                    .start();
                        }

                        if(i > 3) {
                            floatC.animate()
                                    .x(list.get(i-3).getdX())
                                    .y(list.get(i-3).getdX())
                                    .setDuration(0)
                                    .start();
                        }

                        if(i > 4) {
                            floatD.animate()
                                    .x(list.get(i-4).getdX())
                                    .y(list.get(i-4).getdX())
                                    .setDuration(0)
                                    .start();
                        }


                        if(i > 5) {
                            floatE.animate()
                                    .x(list.get(i-5).getdX())
                                    .y(list.get(i-5).getdX())
                                    .setDuration(0)
                                    .start();
                        }
                }
                return true;
            }
        });
    }
    @Override
    public void onBackPressed() {

    }
}

activity_test2.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:id="@+id/activity_test2"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="0dp"
    android:padding="0dp"
    tools:context="kr.nubiz.testapplication.Test2Activity">

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:clickable="true"
        app:fabSize="mini"
        app:srcCompat="?android:attr/listChoiceIndicatorSingle"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:layout_margin="0dp"
        android:padding="0dp"
        android:id="@+id/test2_floatingA" />

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:clickable="true"
        app:fabSize="mini"
        android:layout_margin="0dp"
        android:padding="0dp"
        app:srcCompat="@android:drawable/btn_dialog"
        android:layout_alignTop="@+id/test2_floatingA"
        android:layout_alignParentEnd="true"
        android:id="@+id/test2_floatingB" />

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:clickable="true"
        app:fabSize="mini"
        android:layout_margin="0dp"
        android:padding="0dp"
        app:srcCompat="@android:drawable/btn_star"
        android:layout_alignTop="@+id/test2_floatingA"
        android:layout_alignParentEnd="true"
        android:id="@+id/test2_floatingC" />

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:clickable="true"
        app:fabSize="mini"
        app:srcCompat="@android:drawable/btn_star_big_on"
        android:layout_alignTop="@+id/test2_floatingA"
        android:layout_alignParentEnd="true"
        android:id="@+id/test2_floatingD" />

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:clickable="true"
        app:fabSize="mini"
        app:srcCompat="@android:drawable/ic_lock_power_off"
        android:layout_alignTop="@+id/test2_floatingA"
        android:layout_alignParentEnd="true"
        android:id="@+id/test2_floatingE" />

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:clickable="true"
        app:fabSize="mini"
        app:srcCompat="@android:drawable/ic_input_add"
        android:id="@+id/test2_floatingM"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true" />

</RelativeLayout>

Solution

  • Use this library to add Floating Action button with sub menus. fab-speed-dial

    Now simple use setOnTouchListener on single main floating button , you wont have to worry about all the sub menus.

    Hope this helps :)