1

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

2
  • No entiendo que es lo que deseabas lograr, solo agregar botones? En la segunda imagen aparenta que quieres mostrar los botones en forma de satelite.
    – Jorgesys
    Commented el 6 dic. 2016 a las 15:10
  • Sí, quería crear un Botón flotante circular. Antes no sabía como se llamaba pero ahora sí, y por eso he editado la pregunta. Así se queda como fuente de información Commented el 6 dic. 2016 a las 15:30

1 respuesta 1

1

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

2
  • Veo que FloatingActionButton es una librería, aunque no veo un ejemplo de como realizar la distribución en un arco de los botones, github.com/Clans/FloatingActionButton suena interesante si en verdad se puede realizar esto.
    – Jorgesys
    Commented el 6 dic. 2016 a las 15:42
  • No entiendo muy bien el comentario. Ya resolví el cómo hacerlo. He publicado el código necesario Commented el 6 dic. 2016 a las 23:44

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.