UI components

Floating action button: Android design support library

Alex Zhukovich 2 min read
Floating action button: Android design support library
Table of Contents

In this post we will talk about Floating Action Button.

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.

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
Different sizes of Floating Action Buttons

For change size of button need to use fabSize attribute with value: mini or normal.

Firstly need to add library or add dependency for gradle.

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

Next step is adding floating action button to layout.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_margin="16dp"
        android:src="@drawable/abc_ic_menu_moreoverflow_mtrl_alpha" />
</RelativeLayout>

After it, we need to update Activity.

public class FABActivity 
    extends ActionBarActivity 
    implements View.OnClickListener {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.fab_layout);

        ((FloatingActionButton)findViewById(R.id.fab)).setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        Snackbar
        .make(
            findViewById(R.id.main_content), 
            "TEST", 
            Snackbar.LENGTH_SHORT
        )
        .show();
    }
}

Unfortunately Snackbar overlaps floating action button.

Different sizes of Floating Action Buttons

We need to use CoordinatorLayout for fixing this issue.

<?xml version="1.0" encoding="utf-8"?><br />
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/main_content"
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|right"
            android:layout_margin="16dp"
            android:src="@drawable/abc_ic_menu_moreoverflow_mtrl_alpha"
            app:layout_anchorGravity="bottom|right|end"/>
    </android.support.design.widget.CoordinatorLayout>
</RelativeLayout>

After it all works correctly.

Different sizes of Floating Action Buttons

Mobile development with Alex

A blog about Android development & testing, Best Practices, Tips and Tricks

Share
More from Mobile development with Alex
Jetpack Compose: Divider
Jetpack Compose

Jetpack Compose: Divider

This article covers using and customizing the “Dividers” components from the "Material 2" and "Material 3" libraries in the Jetpack Compose. In addition to that, we will explore the difference between implementation of the Divider, HorizontalDivider and VerticalDivider.
Alex Zhukovich 4 min read
Jetpack Compose: Switch
Jetpack Compose

Jetpack Compose: Switch

This article covers creating and customizing the "Switch" component in Jetpack Compose for enabling/disabling features. It explores differences between "Material" and "Material 3" libraries, and how to interact with and verify the Switch component's state in UI tests.
Alex Zhukovich 8 min read

Great! You’ve successfully signed up.

Welcome back! You've successfully signed in.

You've successfully subscribed to Mobile development with Alex.

Success! Check your email for magic link to sign-in.

Success! Your billing info has been updated.

Your billing was not updated.