Floating Action Button with Animation

Floating Action Button with Animation



Output Screen







MainActivity.java

import android.support.design.widget.FloatingActionButton;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
    FloatingActionButton main,gallery,camera;
    Animation open,close,clock,anti_clock;
    boolean status=false;
    @Override    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initViews();
        initAnims();
        main.setOnClickListener(new View.OnClickListener() {
            @Override            public void onClick(View v) {
                if(status) {
                    camera.startAnimation(close);
                    gallery.startAnimation(close);
                    camera.setClickable(false);
                    gallery.setClickable(false);
                    status=false;
                }else{
                    camera.startAnimation(open);
                    gallery.startAnimation(open);
                    camera.setClickable(true);
                    gallery.setClickable(true);
                    status=true;
                }
            }
        });
    }

    private void initViews(){
        main=(FloatingActionButton)findViewById(R.id.main);
        gallery=(FloatingActionButton)findViewById(R.id.gallery);
        camera=(FloatingActionButton)findViewById(R.id.camera);
        gallery.setOnClickListener(new View.OnClickListener() {
            @Override            public void onClick(View v) {
      Toast.makeText(MainActivity.this, "Gallery is Clicked !", Toast.LENGTH_SHORT).show();
            }
        });
        camera.setOnClickListener(new View.OnClickListener() {
            @Override            public void onClick(View v) {
      Toast.makeText(MainActivity.this, "Camera is Clicked !", Toast.LENGTH_SHORT).show();
            }
        });
    }

    private void initAnims(){
        open= AnimationUtils.loadAnimation(this,R.anim.open);
        close= AnimationUtils.loadAnimation(this,R.anim.close);
        clock= AnimationUtils.loadAnimation(this,R.anim.clock_rotate);
        anti_clock= AnimationUtils.loadAnimation(this,R.anim.anti_rotate);
    }
}






activity_main.xml

<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.support.design.widget.FloatingActionButton
android:id="@+id/gallery"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="160dp"
android:layout_gravity="bottom|end"
android:layout_marginRight="16dp"
android:visibility="invisible"
app:backgroundTint="@color/colorPrimary"
app:elevation="6dp"
app:pressedTranslationZ="12dp"
android:src="@drawable/gallerys" />

<android.support.design.widget.FloatingActionButton
android:id="@+id/camera"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="90dp"
android:layout_gravity="bottom|end"
android:layout_marginRight="16dp"
android:visibility="invisible"
app:elevation="6dp"
app:backgroundTint="@color/colorPrimary"
app:pressedTranslationZ="12dp"
android:src="@drawable/camera" />

<android.support.design.widget.FloatingActionButton
android:id="@+id/main"
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="16dp"
android:src="@android:drawable/ic_menu_upload_you_tube" />

</android.support.design.widget.CoordinatorLayout>







anti_rotate.xml

<set
xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true">
<rotate
android:duration="200"
android:fromDegrees="45"
android:toDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:interpolator="@android:anim/linear_interpolator">
</set>





clock_rotate.xml

<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true">
<rotate
android:duration="200"
android:fromDegrees="0"
android:toDegrees="45"
android:pivotX="50%"
android:pivotY="50%"
android:interpolator="@android:anim/linear_interpolator" />
</set>






close.xml

<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true">
<scale
android:duration="200"
android:fromXScale="0.9"
android:fromYScale="0.9"
android:toXScale="0.0"
android:toYScale="0.0"
android:pivotX="50%"
android:pivotY="50%"
android:interpolator="@android:anim/linear_interpolator" />

<alpha android:fromAlpha="1.0"
android:toAlpha="0.0"
android:duration="200"
android:interpolator="@android:anim/accelerate_interpolator" />

</set>






open.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true">
<scale
android:duration="200"
android:fromXScale="0.9"
android:fromYScale="0.9"
android:toXScale="0.0"
android:toYScale="0.0"
android:pivotX="50%"
android:pivotY="50%"
android:interpolator="@android:anim/linear_interpolator" />

<alpha android:fromAlpha="1.0"
android:toAlpha="0.0"
android:duration="200"
android:interpolator="@android:anim/accelerate_interpolator" />
</set>

No comments: