BottomAppBar Animaciones

 

Continuando con la parte dos veremos como hacer las animaciones cuando clicamos el FloatingActionButton y el navigationIcon de nuestro BottomAppBar.

Si deseamos ocultar nuestro Fab al clicarlo, deberemos hacer lo siguiente

Primero declaramos el BottomAppBar

BottomAppBar bottomAppBar;

En nuestro onCreate()

bottomAppBar = findViewById(R.id.bottomBar);
setSupportActionBar(bottomAppBar);

Luego implementaremos el click y mostraremos el fab o lo ocultaremos, para esto creamos un boolean que manejara dos clicks en el mismo boton, por lo tanto, cuando lo apretemos nos escondera el fab y cuando lo volvamos a apretar lo volvera a mostrar

Cremos una variable booleana inicializada en falso

boolean esconderFab = false;

Luego implementamos el setNavigationOnClickListener en nuestro BottomAppBar con el siguiente código

bottomAppBar.setNavigationOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        if(esconderFab){
            floatingActionButton.show();
            esconderFab = false;
        }else{
            floatingActionButton.hide();
            esconderFab = true;
        }


    }
});

El resultado es el siguiente

 

Si queremos mover el boton de fab del centro hacia la derecha hacemos lo siguiente, de la misma forma creamos un boolean para hacer dos clicks en el mismo fab y reproducir las dos animaciones.

boolean moverFab = false;

Luego implementamos el onClickListener del fab al igual que el BottomAppBar

floatingActionButton.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        if(moverFab){
            bottomAppBar.setFabAlignmentMode(BottomAppBar.FAB_ALIGNMENT_MODE_CENTER);
            moverFab = false;
        }else{
            bottomAppBar.setFabAlignmentMode(BottomAppBar.FAB_ALIGNMENT_MODE_END);
            moverFab = true;
        }
    }
});

Recordemos que el fab debe ser inicializado de la misma forma que el BottomAppBar

floatingActionButton = findViewById(R.id.fabBottomBar);

El resultado es el siguiente

 

Para mas información de como implementarlo podes ver el siguiente video

Links útiles

Bottom App Bars: https://material.io/develop/android/components/bottom-app-bar/