In the below example I have created  Floating Action Button  Animations. Here I have added four FloatingActionButton, then in second step I have created  button_open, button_close ,rotate_forward, rotate_backward xml layouts in anim folder. In MainActivity I have used setOnClickListener method. You can see below program it will clearly describe you to create Floating Action Button Animation.
Step(1)main_activity.xml layout-
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.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:fitsSystemWindows="true"
    tools:context=".MainActivity">
    <android.support.design.widget.AppBarLayout
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:theme="@style/AppTheme.AppBarOverlay">
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />
    </android.support.design.widget.AppBarLayout>
    <include layout="@layout/content_main" />
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="160dp"
        android:layout_gravity="bottom|end"
        android:layout_marginRight="@dimen/fab_margin"
        android:visibility="invisible"
        app:backgroundTint="@color/colorFAB2"
        app:elevation="6dp"
        app:pressedTranslationZ="12dp"
        android:src="@drawable/google" />
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="90dp"
        android:layout_gravity="bottom|end"
        android:layout_marginRight="@dimen/fab_margin"
        android:visibility="invisible"
        app:elevation="6dp"
        app:backgroundTint="@color/colorFAB1"
        app:pressedTranslationZ="12dp"
        android:src="@drawable/link" />
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab10"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="90dp"
        android:layout_gravity="bottom|end"
        android:layout_marginRight="@dimen/fab_margin"
        android:visibility="invisible"
        app:elevation="6dp"
        app:backgroundTint="@color/colorFAB1"
        app:pressedTranslationZ="12dp"
        android:src="@drawable/twitter" />
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        app:elevation="6dp"
        app:backgroundTint="@color/colorAccent"
        app:pressedTranslationZ="12dp"
        android:layout_margin="@dimen/fab_margin"
        android:src="@drawable/button" />
</android.support.design.widget.CoordinatorLayout>
Step(2)Create button_close.xml layout in anim folder-
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">
    <scale
        android:duration="300"
        android:fromXScale="0.8"
        android:fromYScale="0.8"
        android:interpolator="@android:anim/linear_interpolator"
        android:toXScale="0.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toYScale="0.0" />
    <alpha android:fromAlpha="1.0"
        android:toAlpha="0.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:duration="300"/>
</set>
Step(3)Create button_open.xml layout in anim folder-
<?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android"
        android:fillAfter="true">
        <scale
            android:duration="300"
            android:fromXScale="0.0"
            android:fromYScale="0.0"
            android:interpolator="@android:anim/linear_interpolator"
            android:toXScale="0.8"
            android:pivotX="50%"
            android:pivotY="50%"
            android:toYScale="0.8" />
        <alpha
            android:fromAlpha="0.0"
            android:toAlpha="1.0"
            android:interpolator="@android:anim/accelerate_interpolator"
            android:duration="300"/>
    </set>
Step(4)Create rotate_forward.xml layout in anim folder-
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true" >
    <rotate android:fromDegrees="45"
        android:toDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="300"
        android:interpolator="@android:anim/linear_interpolator"/>
</set>
Step(5)Create rotate_backward.xml layout in anim folder-
 <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true" >
    <rotate android:fromDegrees="0"
        android:toDegrees="45"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="300"
        android:interpolator="@android:anim/linear_interpolator"/>
 </set>
 Step(6)MainActivity-
 public class MainActivity extends AppCompatActivity implements View.OnClickListener{
        private Boolean isFabOpen = false;
        private FloatingActionButton fab,fab1,fab10,fab2;
        private Animation button_open,button_close,rotate_forward,rotate_backward;
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
            setSupportActionBar(toolbar);
            fab = (FloatingActionButton)findViewById(R.id.fab);
            fab1 = (FloatingActionButton)findViewById(R.id.fab1);
            fab10 = (FloatingActionButton)findViewById(R.id.fab10);
            fab2 = (FloatingActionButton)findViewById(R.id.fab2);
            button_open = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.button_open);
            button_close = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.button_close);
            rotate_forward = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.rotate_forward);
            rotate_backward = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.rotate_backward);
            fab.setOnClickListener(this);
            fab1.setOnClickListener(this);
            fab2.setOnClickListener(this);
        }
        @Override
        public void onClick(View v) {
            int id = v.getId();
            switch (id){
                case R.id.fab:
                    animateFAB();
                    break;
                case R.id.fab1:
                    Log.d("Raj", "Fab 1");
                    break;
                case R.id.fab10:
                    Log.d("Raj", "Fab 1");
                    break;
                case R.id.fab2:
                    Log.d("Raj", "Fab 2");
                    break;
            }
        }
        public void animateFAB(){
            if(isFabOpen){
                fab.startAnimation(rotate_backward);
                fab1.startAnimation(button_close);
                fab10.startAnimation(button_close);
                fab2.startAnimation(fab_close);
                fab1.setClickable(false);
                fab2.setClickable(false);
                isButtonOpen = false;
                Log.d("Raj", "close");
            } else {
                fab.startAnimation(rotate_forward);
                fab1.startAnimation(button_open);
                fab10.startAnimation(button_close);
                fab2.startAnimation(button_open);
                fab1.setClickable(true);
                fab2.setClickable(true);
                isButtonOpen = true;
                Log.d("Raj","open");
            }
        }
    }
 
                       
                    
0 Comment(s)