Floating Action Button

Como se muestra en la documentación de Google sobre Material Design

Los botones de acción flotante son usados para promocionar una acción. Se distinguen por un icono circular flotando sobre la interfaz gráfica y tiene comportamientos de movimiento como transformaciones, lanzamientos y transferencias a un punto de anclaje.

¿Cómo se añade?

I. En tu archivo build.gradle, añade la última versión de las librerías: appcompat y design.

dependencies {  
    compile 'com.android.support:appcompat-v7:X.X.X' 
    compile 'com.android.support:design:X.X.X' 
    // X.X.X especifica la versión
}

II. Haz que tu activity extienda de: android.support.v7.app.AppCompatActivity.

public class MainActivity extends AppCompatActivity {  
    ...
}

III. Declara tu botón de acción flotante (FloatingActionButton) dentro de cualquier archivo de layout, layout.xml.

<android.support.design.widget.FloatingActionButton  
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_call" />

¿Cómo estilizarlo?

Color de fondo

I. Declara tu estilo personalizado en el archivo values/styles.xml.

<style name="MyFloatingButton" parent="Theme.AppCompat.Light">  
    <item name="colorAccent">@color/pink</item>
</style>  

II. Aplica este estilo a tu FloatingActionButton con el atributo android:theme.

<android.support.design.widget.FloatingActionButton  
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_call"
    android:theme="@style/MyFloatingButton" />

Color de Ripple

Para cambiar el color de los effectos de ripple cuando el FloatingACtionButton es presionado utiliza el atributo app:rippleColor.

<android.support.design.widget.FloatingActionButton  
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_call"
    app:rippleColor="@color/indigo" />

Icono

Para cambiar el icono de tu FloatingActionButton utiliza el atributo android:src.

<android.support.design.widget.FloatingActionButton  
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_favorite"/>

Tamaño

Como se muestra en la documentación de Google sobre Material Design

Los FloatingActionButtons tienen dos tamaños:

  • Tamaño por defecto: Para la mayoría de los casos
  • Tamaño mini: Solo se utiliza para mostrar una continuidad con otros elementos de la interfaz gráfica.

Para cambiar el tamaño del FloatingActionButton utiliza el atributo app:fabSize con uno de los siguientes valores constantes: mini o normal.

<android.support.design.widget.FloatingActionButton  
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_mini"
    app:fabSize="mini"/>

Escrito originalmente por Paresh Mayani en Material Doc