Skip to main content
2 de 3
cuerpo editado

Animación con un botón flotante - Floating action Button (Fab)

Estoy empezando a trabajar con los botones flotantes (Fab) y me gustaría resolver una duda.

A la hora de implementarlos no tengo problemas, pero si que me gustaría cambiar la disposición de los botones al pulsar el botón principal.

Adjunto una imagen para explicarme mejor:

  • Esto es lo que he codificado hasta ahora:

    • Java

[![introducir la descripción de la imagen aquí][1]][1]

Para ello, he seguido el siguiente código

 public void creacion_fab() {
    fab_rankit = (FloatingActionButton) findViewById(R.id.fab_rankit);
    fab_buscar = (FloatingActionButton) findViewById(R.id.fab_buscar);
    fab_cambioActividad = (FloatingActionButton) findViewById(R.id.fab_cambioActividad);
    fab_home = (FloatingActionButton) findViewById(R.id.fab_home);

    FabOpen = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.fab_open);
    FabClose = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.fab_close);
    FabClockwise = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.rotate_anticlockwise);
    FabAnticlockwise = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.rotate_clockwise);

    fab_rankit.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            if (isOpen) {
                fab_home.startAnimation(FabClose);
                fab_cambioActividad.startAnimation(FabClose);
                fab_buscar.startAnimation(FabClose);
                fab_rankit.startAnimation(FabClockwise);
                fab_home.setClickable(false);
                fab_buscar.setClickable(false);
                fab_cambioActividad.setClickable(false);
                isOpen = false;

            } else {
                fab_home.startAnimation(FabOpen);
                fab_cambioActividad.startAnimation(FabOpen);
                fab_buscar.startAnimation(FabOpen);
                fab_rankit.startAnimation(FabAnticlockwise);
                fab_home.setClickable(true);
                fab_buscar.setClickable(true);
                fab_cambioActividad.setClickable(true);
                isOpen = true;
            }
        }
    }); } }
  • XML

<android.support.design.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:id="@+id/id_principalActivity"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="mario.rankit.Principal_Activity">


<include layout="@layout/content_principal_" />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab_home"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end"
    android:backgroundTint="#0089D5"
    android:elevation="6dp"
    android:src="@drawable/home"
    android:visibility="invisible"
    app:fabSize="normal"
    app:layout_anchor="@+id/fab_buscar"
    app:layout_anchorGravity="top"
    app:pressedTranslationZ="12dp"

    />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab_buscar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end"
    android:backgroundTint="#0089D5"
    android:elevation="6dp"
    android:src="@drawable/fab_buscar"
    android:visibility="invisible"
    app:fabSize="normal"
    app:layout_anchor="@+id/fab_cambioActividad"
    app:layout_anchorGravity="top"
    app:pressedTranslationZ="12dp"

    />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab_cambioActividad"

    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end"
    android:backgroundTint="#0089D5"
    android:elevation="6dp"
    android:src="@drawable/fab_publicar"
    android:visibility="invisible"
    app:fabSize="normal"
    app:layout_anchor="@+id/fab_rankit"
    app:layout_anchorGravity="top"
    app:pressedTranslationZ="12dp" />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab_rankit"
    android:layout_width="75dp"
    android:layout_height="74dp"
    android:layout_gravity="bottom|end"
    android:layout_margin="@dimen/fab_margin"
    android:backgroundTint="#0089D5"
    android:elevation="6dp"
    android:icon="@mipmap/ic_launcher"
    android:src="@drawable/logofinal"
    app:fabSize="normal"
    app:pressedTranslationZ="12dp"

    />


<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorToolbar"
        android:title="@string/titulo_principal"
        app:popupTheme="@style/AppTheme.PopupOverlay" />

</android.support.design.widget.AppBarLayout>

<ImageView
    android:layout_width="42dp"
    android:layout_height="42dp"
    android:layout_marginLeft="310dp"
    android:layout_marginTop="6dp"
    android:background="@drawable/buscar" />

<ImageView
    android:id="@+id/bt_alertas"
    android:layout_width="42dp"
    android:layout_height="42dp"
    android:layout_marginLeft="250dp"
    android:layout_marginTop="6dp"
    app:srcCompat="@drawable/alertas" />

</android.support.design.widget.CoordinatorLayout>

Sin embargo, lo que estoy buscando es la siguiente disposición de botones: (lo que adjunto no es sino tan sólo una imagen diseñada a través de Paint. No esta codificado)

[![introducir la descripción de la imagen aquí][2]][2]

¿Alguno sabe como implementarla? Gracias [1]: https://i.sstatic.net/OZ0uY.png [2]: https://i.sstatic.net/MOkP0.png