1) Make Sure This Library is Added In Your gradle.build file
implementation 'com.android.support:design:28.0.0'
2) Activity.XML
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginEnd="16dp"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:gravity="center_horizontal"
android:layout_marginRight="16dp">
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_three"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
app:fabSize="mini"
android:tint="#ffffff"
android:layout_marginTop="5dp"
app:srcCompat="@drawable/add_photo"
tools:ignore="VectorDrawableCompat" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/photos"
android:text="Photos"
android:textAlignment="center"
android:textSize="15sp"
android:textStyle="bold"
android:textColor="@android:color/white"
android:background="@drawable/shape_lable"/>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_two"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="true"
app:fabSize="mini"
android:tint="#ffffff"
android:layout_marginTop="5dp"
app:srcCompat="@drawable/music"
tools:ignore="VectorDrawableCompat" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/music"
android:text="Music"
android:textAlignment="center"
android:textSize="15sp"
android:textStyle="bold"
android:textColor="@android:color/white"
android:background="@drawable/shape_lable"/>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
app:fabSize="mini"
android:tint="#ffffff"
android:layout_marginTop="5dp"
app:srcCompat="@drawable/done"
tools:ignore="VectorDrawableCompat" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/done"
android:text="Done"
android:textAlignment="center"
android:textSize="15sp"
android:textStyle="bold"
android:textColor="@android:color/white"
android:background="@drawable/shape_lable"/>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
app:fabSize="normal"
android:tint="#ffffff"
app:srcCompat="@drawable/add"
tools:ignore="VectorDrawableCompat"
android:layout_marginTop="10dp"/>
</LinearLayout>
</android.support.constraint.ConstraintLayout>
3) Activity.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.OvershootInterpolator;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity implements View.OnClickListener{
FloatingActionButton fab, fab_one, fab_two, fab_three;
TextView photo, music, done;
Float translationY = 100f;
OvershootInterpolator interpolator = new OvershootInterpolator();
Boolean isMenuOpen = false;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
fab = (FloatingActionButton) findViewById(R.id.fab);
fab_one = (FloatingActionButton) findViewById(R.id.fab_one);
fab_two = (FloatingActionButton) findViewById(R.id.fab_two);
fab_three = (FloatingActionButton) findViewById(R.id.fab_three);
photo = (TextView) findViewById(R.id.photos);
music = (TextView) findViewById(R.id.music);
done = (TextView) findViewById(R.id.done);
fab_one.setAlpha(0f);
photo.setAlpha(0f);
fab_two.setAlpha(0f);
music.setAlpha(0f);
fab_three.setAlpha(0f);
done.setAlpha(0f);
fab_one.setTranslationY(translationY);
photo.setTranslationY(translationY);
fab_two.setTranslationY(translationY);
music.setTranslationY(translationY);
fab_three.setTranslationY(translationY);
done.setTranslationY(translationY);
fab.setOnClickListener(this);
fab_one.setOnClickListener(this);
fab_two.setOnClickListener(this);
fab_three.setOnClickListener(this);
}
private void openMenu() {
isMenuOpen = !isMenuOpen;
fab.animate().setInterpolator(interpolator).rotation(45f).setDuration(300).start();
fab_one.animate().translationY(0f).alpha(1f).setInterpolator(interpolator).setDuration(300).start();
photo.animate().translationY(0f).alpha(1f).setInterpolator(interpolator).setDuration(300).start();
fab_two.animate().translationY(0f).alpha(1f).setInterpolator(interpolator).setDuration(300).start();
music.animate().translationY(0f).alpha(1f).setInterpolator(interpolator).setDuration(300).start();
fab_three.animate().translationY(0f).alpha(1f).setInterpolator(interpolator).setDuration(300).start();
done.animate().translationY(0f).alpha(1f).setInterpolator(interpolator).setDuration(300).start();
}
private void closeMenu() {
isMenuOpen = !isMenuOpen;
fab.animate().setInterpolator(interpolator).rotation(0f).setDuration(300).start();
fab_one.animate().translationY(translationY).alpha(0f).setInterpolator(interpolator).setDuration(300).start();
photo.animate().translationY(translationY).alpha(0f).setInterpolator(interpolator).setDuration(300).start();
fab_two.animate().translationY(translationY).alpha(0f).setInterpolator(interpolator).setDuration(300).start();
music.animate().translationY(translationY).alpha(0f).setInterpolator(interpolator).setDuration(300).start();
fab_three.animate().translationY(translationY).alpha(0f).setInterpolator(interpolator).setDuration(300).start();
done.animate().translationY(translationY).alpha(0f).setInterpolator(interpolator).setDuration(300).start();
}
@Override
public void onClick(View view) {
switch (view.getId()) {
case R.id.fab:
if (isMenuOpen) {
closeMenu();
} else {
openMenu();
}
break;
case R.id.fab_one:
if (isMenuOpen) {
closeMenu();
} else {
openMenu();
}
break;
case R.id.fab_two:
if (isMenuOpen) {
closeMenu();
} else {
openMenu();
}
break;
case R.id.fab_three:
if (isMenuOpen) {
closeMenu();
} else {
openMenu();
}
break;
}
}
}
No comments:
Post a Comment