Hello Guys,
In this tutorial , we are going to create the floating action button with animations without any plugins or third-party libraries. We are going to create drawable animation files for our animations.
and
Feel free to visit my previous Animation tutorial.
Ripple Effect Button Animation
Floating Action Button App Main Screen looking like below picture:
Let's implemented floating action button with animation.
Step 1: Create the animation files.
- Go to res folder and create a new Android Resource Directory named "anim". And in the anim resource directory create new animation files. Here we create four animation files.
1. open.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true">
<scale
android:fromXScale="0.0"
android:fromYScale="0.0"
android:toXScale="0.8"
android:toYScale="0.8"
android:pivotX="50%"
android:pivotY="50%"
android:duration="300"
android:interpolator="@android:anim/linear_interpolator"/>
<alpha
android:fromAlpha="0.0"
android:toAlpha="1.0"
android:duration="300"
android:interpolator="@android:anim/accelerate_interpolator"/>
</set>
2. close.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true">
<scale
android:fromXScale="0.8"
android:fromYScale="0.8"
android:toXScale="0.0"
android:toYScale="0.0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="300"
android:interpolator="@android:anim/linear_interpolator"/>
<alpha
android:fromAlpha="1.0"
android:toAlpha="0.0"
android:duration="300"
android:interpolator="@android:anim/accelerate_interpolator"/>
</set>
3. rotate_forward.xml
<?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>
4. rotate_backward.xml
<?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 2: Design the activity_main.xml file.
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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">
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/fab1"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
android:src="@drawable/ic_baseline_add_24"/>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/fab2"
android:layout_gravity="bottom|end"
android:layout_marginBottom="90dp"
android:layout_marginEnd="16dp"
android:src="@drawable/ic_baseline_edit_24"
android:visibility="invisible"/>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/fab3"
android:layout_gravity="bottom|end"
android:layout_marginBottom="162dp"
android:layout_marginEnd="16dp"
android:src="@drawable/ic_baseline_duo_24"
android:visibility="invisible"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Step 3: Implement MainActivity.java class file.
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Toast;
import com.google.android.material.floatingactionbutton.FloatingActionButton;
public class MainActivity extends AppCompatActivity {
FloatingActionButton fab1 , fab2 , fab3;
Animation open , close , rotate_forward , rotate_backward;
boolean isOpen = false;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
fab1 = findViewById(R.id.fab1);
fab2 = findViewById(R.id.fab2);
fab3 = findViewById(R.id.fab3);
open = AnimationUtils.loadAnimation(this ,
R.anim.open);
close = AnimationUtils.loadAnimation(this ,
R.anim.close);
rotate_forward = AnimationUtils.loadAnimation(this ,
R.anim.rotate_forward);
rotate_backward = AnimationUtils.loadAnimation(this ,
R.anim.rotate_backward);
fab1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
animateFAB();
}
});
fab2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
animateFAB();
Toast.makeText(getApplicationContext() ,
"Edit Button Clicked" ,
Toast.LENGTH_SHORT).show();
}
});
fab3.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
animateFAB();
Toast.makeText(getApplicationContext() ,
"Duo Button Clicked" ,
Toast.LENGTH_SHORT).show();
}
});
}
private void animateFAB() {
if (isOpen){
fab1.startAnimation(rotate_backward);
fab2.startAnimation(close);
fab3.startAnimation(close);
fab2.setClickable(false);
fab3.setClickable(false);
isOpen = false;
}
else {
fab1.startAnimation(rotate_forward);
fab2.startAnimation(open);
fab3.startAnimation(open);
fab2.setClickable(true);
fab3.setClickable(true);
isOpen = true;
}
}
}
Output:
If you liked this post do comment ,share and promote the post 🙏 . Please stay with us and support. 🙏
){kind=link}
0 Comments