Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to create Floating Action Button Animation in android

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 936
    Comment on it

     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)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: