Android
Botón de acción flotante

Introducción

Parámetros

Observaciones

dependencies {
    compile 'com.android.support:design:25.1.0'
}

Cómo agregar el FAB al diseño

Para usar un FloatingActionButton, simplemente agregue la dependencia en el archivo build.gradle como se describe en la sección de comentarios.

A continuación, agregue al diseño:

 <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@drawable/my_icon" />

Un ejemplo:

Color

El color de fondo de esta vista se establece de manera predeterminada en el colorAccent de su tema.

En la imagen de arriba, si el src solo apunta al ícono + (por defecto, 24x24 dp), para obtener el color de fondo del círculo completo puede usar la app:backgroundTint="@color/your_colour"

Si desea cambiar el color en el código que puede utilizar,

myFab.setBackgroundTintList(ColorStateList.valueOf(your color in int));

Si desea cambiar el color de FAB en estado presionado

mFab.setRippleColor(your color in int);

Posicionamiento

Se recomienda colocar un mínimo de 16dp desde el borde en el móvil y un mínimo de 24dp en la tableta / escritorio.

Nota : una vez que establezca un src excepto para cubrir el área completa de FloatingActionButton asegúrese de tener el tamaño correcto de esa imagen para obtener el mejor resultado.

El tamaño predeterminado del círculo es 56 x 56dp

Mini tamaño de círculo: 40 x 40dp

Si solo desea cambiar solo el icono Interior, use un icono de 24 x 24dp para el tamaño predeterminado

Mostrar y ocultar el botón de acción flotante al deslizar

Para mostrar y ocultar un FloatingActionButton con la animación predeterminada, simplemente llame a los métodos show() y hide() . Es una buena práctica mantener un FloatingActionButton en el diseño de la actividad en lugar de colocarlo en un fragmento, esto permite que las animaciones predeterminadas funcionen cuando se muestran y ocultan.

Aquí hay un ejemplo con un ViewPager :

• Tres pestañas
• Mostrar FloatingActionButton para la primera y tercera pestaña
• Ocultar el FloatingActionButton de FloatingActionButton en la pestaña central

public class MainActivity extends AppCompatActivity {

    FloatingActionButton fab;
    ViewPager viewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        fab = (FloatingActionButton) findViewById(R.id.fab);
        viewPager = (ViewPager) findViewById(R.id.viewpager);

        // ...... set up ViewPager ............

        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {

            @Override
            public void onPageSelected(int position) {
                if (position == 0) {
                    fab.setImageResource(android.R.drawable.ic_dialog_email);
                    fab.show();
                } else if (position == 2) {
                    fab.setImageResource(android.R.drawable.ic_dialog_map);
                    fab.show();
                } else {
                    fab.hide();
                }
            }

            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}

            @Override
            public void onPageScrollStateChanged(int state) {}
        });

        // Handle the FloatingActionButton click event:
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                int position = viewPager.getCurrentItem();
                if (position == 0) {
                    openSend();
                } else if (position == 2) {
                    openMap();
                }
            }
        });

    }
}

Resultado:

Mostrar y ocultar el botón de acción flotante en el desplazamiento

A partir de la biblioteca de soporte, versión 22.2.1, es posible mostrar y ocultar un FloatingActionButton del comportamiento de desplazamiento utilizando una clase secundaria FloatingActionButton.Behavior que aprovecha los métodos show() y hide() .

Tenga en cuenta que esto solo funciona con un CoordinatorLayout junto con las vistas internas que admiten el desplazamiento anidado, como RecyclerView y NestedScrollView .

Esta clase ScrollAwareFABBehavior proviene de las Guías de Android en Codepath _^(se requiere _{^{cc-wiki con atribución)}}

public class ScrollAwareFABBehavior extends FloatingActionButton.Behavior {
    public ScrollAwareFABBehavior(Context context, AttributeSet attrs) {
        super();
    }

    @Override
    public boolean onStartNestedScroll(final CoordinatorLayout coordinatorLayout, final FloatingActionButton child,
                                       final View directTargetChild, final View target, final int nestedScrollAxes) {
        // Ensure we react to vertical scrolling
        return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL
                || super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target, nestedScrollAxes);
    }

    @Override
    public void onNestedScroll(final CoordinatorLayout coordinatorLayout, final FloatingActionButton child,
                               final View target, final int dxConsumed, final int dyConsumed,
                               final int dxUnconsumed, final int dyUnconsumed) {
        super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed);
        if (dyConsumed > 0 && child.getVisibility() == View.VISIBLE) {
            // User scrolled down and the FAB is currently visible -> hide the FAB
            child.hide();
        } else if (dyConsumed < 0 && child.getVisibility() != View.VISIBLE) {
            // User scrolled up and the FAB is currently not visible -> show the FAB
            child.show();
        }
    }
}

En el xml de diseño de FloatingActionButton, especifique la app:layout_behavior con el nombre de clase completamente calificado de ScrollAwareFABBehavior :

app:layout_behavior="com.example.app.ScrollAwareFABBehavior"

Por ejemplo, con este diseño:

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/main_layout"
    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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:elevation="6dp">
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:background="?attr/colorPrimary"
            android:minHeight="?attr/actionBarSize"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:elevation="0dp"
            app:layout_scrollFlags="scroll|enterAlways"
            />

        <android.support.design.widget.TabLayout
            android:id="@+id/tab_layout"
            app:tabMode="fixed"
            android:layout_below="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            app:elevation="0dp"
            app:tabTextColor="#d3d3d3"
            android:minHeight="?attr/actionBarSize"
            />

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

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_below="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        app:layout_behavior="com.example.app.ScrollAwareFABBehavior"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_email" />

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

Aquí está el resultado:

Ajuste del comportamiento de FloatingActionButton

Puede establecer el comportamiento de la FAB en XML.

Por ejemplo:

<android.support.design.widget.FloatingActionButton    
   app:layout_behavior=".MyBehavior" />

O puedes configurar programáticamente usando:

CoordinatorLayout.LayoutParams p = (CoordinatorLayout.LayoutParams) fab.getLayoutParams();
p.setBehavior(xxxx);
fab.setLayoutParams(p);