I could declare each FloatingActionButton in the layout individually with its animations and placements, but does it have another medium? Does anyone have a clue how I can do it?
Example below:
How to do this FloatingActionButton? [closed]
1
Hello, in my project I would like to be able to do a FloatingActionButton that by clicking on it it will disappear the background screen and displays above 3 FloatingActionButton with its respective caption on the side. As if the other 3 FloatingActionButtons were subbutions of the first.
asked by anonymous 17.11.2017 / 05:11
1 answer
1
Basically you will have to define all the FABs in xml, but leave only one visible, and when the user clicks on the visible FAB, you show the others. Here is an example:
Creating the layout
...
<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/colorAccent"
app:elevation="6dp"
app:pressedTranslationZ="12dp"
android:src="@drawable/ic_done" />
<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/colorAccent"
app:pressedTranslationZ="12dp"
android:src="@drawable/ic_message" />
<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/ic_add" />
...
Defining the animation
res / anim / fab_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="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>
res / anim / fab_close.xml
<?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>
res / anim / 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>
res / anim / 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>
Activity
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.util.Log;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
public class MainActivity extends AppCompatActivity implements View.OnClickListener{
private Boolean isFabOpen = false;
private FloatingActionButton fab,fab1,fab2;
private Animation fab_open,fab_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);
fab2 = (FloatingActionButton)findViewById(R.id.fab2);
fab_open = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.fab_open);
fab_close = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.fab_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.fab2:
Log.d("Raj", "Fab 2");
break;
}
}
public void animateFAB(){
if(isFabOpen){
fab.startAnimation(rotate_backward);
fab1.startAnimation(fab_close);
fab2.startAnimation(fab_close);
fab1.setClickable(false);
fab2.setClickable(false);
isFabOpen = false;
Log.d("Raj", "close");
} else {
fab.startAnimation(rotate_forward);
fab1.startAnimation(fab_open);
fab2.startAnimation(fab_open);
fab1.setClickable(true);
fab2.setClickable(true);
isFabOpen = true;
Log.d("Raj","open");
}
}
}
This complete tutorial you can access in this link.
18.11.2017 / 16:12