Botón flotante circular – Creación

publicado por: Anonymous

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í

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

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

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í

¿Alguno sabe como implementarla?
Gracias

solución

Finalmente he resuelto mi problema.
He implementado el botón flotante de la siguiente manera:

Código Java:

   public void creacion_fab(){
        ImageView icon = new ImageView(this);
        icon.setImageResource(R.drawable.logofinal);

        FloatingActionButton fab_rankit;
        fab_rankit = (FloatingActionButton) findViewById(R.id.fab_rankit);

        SubActionButton.Builder itemBuilder = new SubActionButton.Builder(this);
        FrameLayout.LayoutParams params=new FrameLayout.LayoutParams(130,130);
        itemBuilder.setLayoutParams(params);

        ImageView fab_home = new ImageView(this);
        fab_home.setImageResource(R.mipmap.fab_home);

        ImageView fab_buscar = new ImageView(this);
        fab_buscar.setImageResource(R.mipmap.fab_buscar);

        ImageView fab_publicar = new ImageView(this);
        fab_publicar.setImageResource(R.mipmap.fab_publicar);



        SubActionButton button1 = itemBuilder.setContentView(fab_publicar).build();
        SubActionButton button2 = itemBuilder.setContentView(fab_buscar).build();
        SubActionButton button3 = itemBuilder.setContentView(fab_home).build();

        //attach the sub buttons to the main button
        FloatingActionMenu actionMenu = new FloatingActionMenu.Builder(this)
                .addSubActionView(button1)
                .addSubActionView(button2)
                .addSubActionView(button3)
                .attachTo(fab_rankit)
                .build();
    }

Este es el resultado final:

introducir la descripción de la imagen aquí

Espero que a alguien le sea últil

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *