library - floating action menu android studio

Ejemplo de FloatingActionButton con biblioteca de soporte

Question

Recientemente, leí estas publicaciones:

Biblioteca de soporte de diseño de Android

Biblioteca de soporte de Android, revisión 22.2.0

FloatingActionButton

Pero ninguno de ellos me da un ejemplo detallado sobre la creación de un nuevo FloatingActionButton . Tan difícil de entender, hago esta pregunta.

¿Alguien puede darme un ejemplo al respecto?

Cualquier ayuda será muy apreciada. Gracias por adelantado.

EDITAR

Acabo de encontrar algunos problemas en FloatingActionButton (FAB), y quiero mejorar otra respuesta. Vea mi respuesta a continuación.

Answer 1

Acabo de encontrar algunos problemas en FAB y quiero mejorar otra respuesta.

problema setRippleColor

Entonces, el problema vendrá una vez que configure el color de ondulación (color FAB al presionar) mediante programación mediante setRippleColor . Pero, todavía tenemos una forma alternativa de configurarlo, es decir, llamando:

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
ColorStateList rippleColor = ContextCompat.getColorStateList(context, R.color.fab_ripple_color);
fab.setBackgroundTintList(rippleColor);

Su proyecto debe tener esta estructura:

/res/color/fab_ripple_color.xml

Y el código de fab_ripple_color.xml es:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:color="@color/fab_color_pressed" />
    <item android:state_focused="true" android:color="@color/fab_color_pressed" />
    <item android:color="@color/fab_color_normal"/>
</selector>

Finalmente, modifique su FAB ligeramente:

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_action_add"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    app:fabSize="normal"
    app:borderWidth="0dp"
    app:elevation="6dp"
    app:pressedTranslationZ="12dp"
    app:rippleColor="@android:color/transparent"/> <!-- set to transparent color -->

Para API nivel 21 y superior, configure el margen derecho e inferior a 24dp:

...
android:layout_marginRight="24dp"
android:layout_marginBottom="24dp" />

Guías de diseño de FloatingActionButton

Como puede ver en mi código XML FAB anterior, configuré:

        ...
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        app:elevation="6dp"
        app:pressedTranslationZ="12dp"
        ...

• Al configurar estos atributos, no necesita establecer layout_marginTop y layout_marginRight nuevamente (solo en pre-Lollipop). Android lo colocará automáticamente en el lado derecho de la pantalla, lo mismo que FAB normal en Android Lollipop.

      android:layout_alignParentBottom="true"
      android:layout_alignParentRight="true"

O bien, puede usar esto en CoordinatorLayout :

        android:layout_gravity="end|bottom"

• Necesitas tener 6dp de elevation y 12dp pressedTranslationZ , de acuerdo con esta guía de Google.

Answer 2

Entonces, en su archivo build.gradle , agregue esto:

compile ''com.android.support:design:27.1.1''

Nota de AndroidX: Google está introduciendo nuevas bibliotecas de extensiones de AndroidX para reemplazar las bibliotecas de soporte más antiguas. Para usar AndroidX, primero asegúrese de haber actualizado su archivo gradle.properties , editado build.gradle para establecer compileSdkVersion en 28 (o superior), y use la siguiente línea en lugar de la compile anterior.

implementation ''com.google.android.material:material:1.0.0''

A continuación, en themes.xml o styles.xml o lo que sea, asegúrese de configurar esto, es el color de acento de su aplicación, y el color de su FAB a menos que lo anule (consulte a continuación):

        <item name="colorAccent">@color/floating_action_button_color</item>

En el XML del diseño:

<RelativeLayout
 ...
 xmlns:app="http://schemas.android.com/apk/res-auto">

       <android.support.design.widget.FloatingActionButton
            android:id="@+id/myFAB"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_plus_sign"
            app:elevation="4dp"
            ... />

</RelativeLayout>

O si está utilizando la biblioteca de materiales de AndroidX anterior, en su lugar usaría esto:

<RelativeLayout
 ...
 xmlns:app="http://schemas.android.com/apk/res-auto">

       <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/myFAB"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:srcCompat="@drawable/ic_plus_sign"
            app:elevation="4dp"
            ... />

</RelativeLayout>

Puede ver más opciones en los FloatingActionButton ( FloatingActionButton material aquí) ( setRippleColor , etc.), pero uno de nota es:

    app:fabSize="mini"

Otro interesante: para cambiar el color de fondo de un solo FAB, agregue:

    app:backgroundTint="#FF0000"

(por ejemplo, para cambiarlo a rojo) al XML anterior.

De todos modos, en código, después de que la vista de Actividad / Fragmento se infla ...

    FloatingActionButton myFab = (FloatingActionButton)  myView.findViewById(R.id.myFAB);
    myFab.setOnClickListener(new View.OnClickListener() {
        public void onClick(View v) {
            doMyThing();
        }
    });

Observaciones:

• Si tiene uno de esos botones que está en una "costura" que divide dos vistas (usando un diseño relativo, por ejemplo) con, por ejemplo, un margen de diseño inferior negativo para superponer el borde, notará un problema: el tamaño del FAB es en realidad muy diferente en lollipop vs. pre-lollipop. De hecho, puede ver esto en el editor de diseño visual de AS cuando cambia de una API a otra; de repente, se "hincha" cuando cambia a pre-lollipop. La razón del tamaño extra parece ser que la sombra expande el tamaño de la vista en todas las direcciones. Por lo tanto, debe tener esto en cuenta cuando ajuste los márgenes de la FAB si está cerca de otras cosas.

• Aquí hay una manera de eliminar o cambiar el relleno si hay demasiado:

  if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
      RelativeLayout.LayoutParams p = (RelativeLayout.LayoutParams) myFab.getLayoutParams();
      p.setMargins(0, 0, 0, 0); // get rid of margins since shadow area is now the margin
      myFab.setLayoutParams(p);
  }

• Además, iba a colocar programáticamente la FAB en la "costura" entre dos áreas en un diseño relativo tomando la altura de la FAB, dividiéndola por dos y utilizándola como compensación de margen. Pero myFab.getHeight () devolvió cero, incluso después de que la vista se infló, al parecer. En su lugar, utilicé un ViewTreeObserver para obtener la altura solo después de que se presenta y luego establecer la posición. Vea este consejo here . Se veía así:

      ViewTreeObserver viewTreeObserver = closeButton.getViewTreeObserver();
      if (viewTreeObserver.isAlive()) {
          viewTreeObserver.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
              @Override
              public void onGlobalLayout() {
                  if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) {
                      closeButton.getViewTreeObserver().removeGlobalOnLayoutListener(this);
                  } else {
                      closeButton.getViewTreeObserver().removeOnGlobalLayoutListener(this);
                  }
                  // not sure the above is equivalent, but that''s beside the point for this example...
                  RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) closeButton.getLayoutParams();
                  params.setMargins(0, 0, 16, -closeButton.getHeight() / 2); // (int left, int top, int right, int bottom)
                  closeButton.setLayoutParams(params);
              }
          });
      }

  No estoy seguro si esta es la forma correcta de hacerlo, pero parece funcionar.

• Parece que puede reducir el espacio de sombra del botón disminuyendo la elevación.

• Si desea el FAB en una "costura", puede usar layout_anchor y layout_anchorGravity Aquí hay un ejemplo:

  <android.support.design.widget.FloatingActionButton
      android:layout_height="wrap_content"
      android:layout_width="wrap_content"
      app:layout_anchor="@id/appbar"
      app:layout_anchorGravity="bottom|right|end"
      android:src="@drawable/ic_discuss"
      android:layout_margin="@dimen/fab_margin"
      android:clickable="true"/>

Recuerde que puede hacer que el botón salte del camino automáticamente cuando aparezca un Snackbar envolviéndolo en un CoordinatorLayout .

Más:

• Página de la biblioteca de soporte de diseño de Google
• FloatingActionButton
• Charla "Material Now" de Google I / O 2015 - Introducción de la biblioteca de diseño de soporte a las 17m22s
• Biblioteca / muestra de soporte de diseño

Answer 3

para AndroidX use como

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:srcCompat="@drawable/ic_add" />

Answer 4

FloatingActionButton extiende ImageView . Por lo tanto, es simple como introducir un ImageView en su diseño. Aquí hay una muestra XML.

<android.support.design.widget.FloatingActionButton   xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/somedrawable"
    android:layout_gravity="right|bottom"
    app:borderWidth="0dp"
    app:rippleColor="#ffffff"/>

app:borderWidth="0dp" como solución alternativa para problemas de elevación.