Circular Floating Button - Creation

I am starting to work with floating buttons (Fab) and I would like to answer a question.

When implementing them I have no problems, but I would like to change the layout of the buttons when pressing the main button.

I attached an image to explain better:

• This is what I have coded so far:

  • Java

For this, I have followed the following code

 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

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" />

However, what I am looking for is the following button layout: (what I am attaching is just an image designed through Paint. It is not coded)

Does anyone know how to implement it? Thank you