Floating Action Button

Floating action button Mini

From Google material design documentation:

Floating action buttons are used for a promoted action. They are distinguished by a circled icon floating above the UI and have motion behaviors that include morphing, launching, and a transferring anchor point.

How to add?

I. In your build.gradle, add latest appcompat and design libraries.

dependencies {  
    compile 'com.android.support:appcompat-v7:X.X.X' // where X.X.X version
    compile 'com.android.support:design:X.X.X' // where X.X.X version
}

II. Make your activity extend android.support.v7.app.AppCompatActivity.

public class MainActivity extends AppCompatActivity {  
    ...
}

III. Declare your FloatingActionButton inside any layout.xml file.

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

How to style

Floating action button Mini

Background color

I. Declare custom style in your values/styles.xml file.

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

II. Apply this style to your FloatingActionButton via android:theme attribute.

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

Ripple color

To change the color for the ripple effects when FloatingActionButton is pressed use app:rippleColor attribute.

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

Icon

To change FloatingActionButton icon use android:src attribute.

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

Size

From Google material design documentation:

Floating action buttons come in two sizes:

  • Default size: For most use cases
  • Mini size: Only used to create visual continuity with other screen elements

To change FloatingActionButton size use app:fabSize attribute with one of pre-defined constant values: mini or normal.

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