Tem uma abordagem melhor para implementar o menu FAB de animação sem usar nenhuma biblioteca ou para escrever um enorme código xml para animações. espero que isso ajude no futuro para alguém que precise de uma maneira simples de implementar isso.
Apenas usando a animate().translationY()função, você pode animar qualquer visualização para cima ou para baixo, exatamente como fiz no meu código abaixo, verifique o código completo no github . Caso esteja procurando o mesmo código no kotlin, você pode fazer o checkout do menu de animação do FAB do repositório de códigos kotlin .
primeiro defina todas as suas FAB no mesmo local para que elas se sobreponham; lembre-se de que a FAB deve ser o que você deseja clicar e mostrar a outra. por exemplo:
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab3"
android:layout_width="@dimen/standard_45"
android:layout_height="@dimen/standard_45"
android:layout_gravity="bottom|end"
android:layout_margin="@dimen/standard_21"
app:srcCompat="@android:drawable/ic_btn_speak_now" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab2"
android:layout_width="@dimen/standard_45"
android:layout_height="@dimen/standard_45"
android:layout_gravity="bottom|end"
android:layout_margin="@dimen/standard_21"
app:srcCompat="@android:drawable/ic_menu_camera" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab1"
android:layout_width="@dimen/standard_45"
android:layout_height="@dimen/standard_45"
android:layout_gravity="bottom|end"
android:layout_margin="@dimen/standard_21"
app:srcCompat="@android:drawable/ic_dialog_map" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="@dimen/fab_margin"
app:srcCompat="@android:drawable/ic_dialog_email" />
Agora, na sua classe java, basta definir todo o seu FAB e executar o clique como mostrado abaixo:
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab1 = (FloatingActionButton) findViewById(R.id.fab1);
fab2 = (FloatingActionButton) findViewById(R.id.fab2);
fab3 = (FloatingActionButton) findViewById(R.id.fab3);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
if(!isFABOpen){
showFABMenu();
}else{
closeFABMenu();
}
}
});
Use o animation().translationY()para animar o seu FAB, prefiro que você use o atributo desse método no DP, pois apenas o uso de um int afetará a compatibilidade de exibição com resolução mais alta ou mais baixa. como mostrado abaixo:
private void showFABMenu(){
isFABOpen=true;
fab1.animate().translationY(-getResources().getDimension(R.dimen.standard_55));
fab2.animate().translationY(-getResources().getDimension(R.dimen.standard_105));
fab3.animate().translationY(-getResources().getDimension(R.dimen.standard_155));
}
private void closeFABMenu(){
isFABOpen=false;
fab1.animate().translationY(0);
fab2.animate().translationY(0);
fab3.animate().translationY(0);
}
Agora defina a dimensão acima mencionada em res-> values-> dimens.xml, como mostrado abaixo:
<dimen name="standard_55">55dp</dimen>
<dimen name="standard_105">105dp</dimen>
<dimen name="standard_155">155dp</dimen>
Esperamos que esta solução ajude as pessoas no futuro, que estão procurando uma solução simples.
EDITADO
Se você quiser adicionar um rótulo ao FAB, basta pegar um LinearLayout horizontal e colocar o FAB com textview como rótulo e animar os layouts se encontrar algum problema, verifique o meu código de exemplo no github, eu lidei com toda a compatibilidade com versões anteriores problemas nesse código de exemplo. verifique meu código de exemplo para o FABMenu no Github
para fechar o FAB no Backpress, substitua onBackPress () conforme mostrado abaixo:
@Override
public void onBackPressed() {
if(!isFABOpen){
this.super.onBackPressed();
}else{
closeFABMenu();
}
}
A captura de tela tem o título também com a FAB, porque eu a retiro do meu exemplo de aplicativo presente ingithub
