FloatingActionButton of Material Design Components

Material Design design guidelines were introduced at Google I/O 2014. This design concept was loved by many developers as it focuses on creating a paper-like and tangible design that brings design closer to the real world. It aims to provide smooth and continuous interaction and user experience. This design guideline promotes the development of the Android ecosystem. To achieve this, Google provides a series of controls that adhere to the Material Design style, such as FloatingActionButton, Snackbar, TabLayout, etc. Although these components are frequently used in development, I haven't documented them yet. I plan to start documenting the usage of these components from scratch. Today, I will talk about the knowledge related to CoordinatorLayout and FloatingActionButton. The main content is as follows:

CoordinatorLayout
FloatingActionButton
Properties of FloatingActionButton
Simple usage

CoordinatorLayout#

CoordinatorLayout is an enhanced version of FrameLayout. This means that if no restrictions are added, the child views inside CoordinatorLayout will appear in the top-left corner by default. CoordinatorLayout has two main usage scenarios:

As the top-level layout of an application
As a container for interacting with one or more child views

Behavior can be specified for the child views inside CoordinatorLayout, providing various interaction effects within a single parent layout. Child views can also interact with each other. CoordinatorLayout can use the CoordinatorLayout.DefaultBehavior annotation to specify the default behavior of child views. In short, different scrolling effects can be achieved with the help of CoordinatorLayout.

FloatingActionButton#

FloatingActionButton is a button control of the Material Design type. It is generally displayed as a floating circular icon on top of the UI. It has its own behavior and can be anchored.

FloatingActionButton has two sizes: normal (56dp) and mini (40dp). The default size is mini (40dp). The size can be specified using the fabSize attribute. Of course, fabSize can also be set to auto, and the system will choose the appropriate size based on the screen size.

FloatingActionButton indirectly inherits from ImageView, and the icon can be set in code using the following methods:

// Set icon
fab.setImageDrawable(getResources().getDrawable(R.drawable.fab));
fab.setImageResource(R.drawable.fab);

The background color of FloatingActionButton is set to the value represented by the theme's colorAccent by default. The background color of FloatingActionButton can be modified in code using the following method:

// Set background color
fab.setBackgroundTintList(ColorStateList.valueOf(Color.parseColor("#000000")));

The size of FloatingActionButton can be set using the following method:

// Set size
fab.setSize(FloatingActionButton.SIZE_MINI);

So, how to customize the size of FloatingActionButton? The size is determined by the dimensions defined in the source code of FloatingActionButton. Specifically, it is determined by design_fab_size_mini and design_fab_size_normal. The code snippet is as follows:

// Source code
private int getSizeDimension(@Size final int size) {
    final Resources res = getResources();
    switch (size) {
        case SIZE_AUTO:
            // If we're set to auto, grab the size from resources and refresh
            final int width = res.getConfiguration().screenWidthDp;
            final int height = res.getConfiguration().screenHeightDp;
            return Math.max(width, height) < AUTO_MINI_LARGEST_SCREEN_WIDTH
                    ? getSizeDimension(SIZE_MINI)
                    : getSizeDimension(SIZE_NORMAL);
        case SIZE_MINI:
            return res.getDimensionPixelSize(R.dimen.design_fab_size_mini);
        case SIZE_NORMAL:
        default:
            return res.getDimensionPixelSize(R.dimen.design_fab_size_normal);
    }
}

To customize the size of FloatingActionButton, create a dimens folder and redefine the values of design_fab_size_mini and design_fab_size_normal. The code snippet is as follows:

/**dimens.xml**/
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">
    <dimen name="design_fab_size_mini" tools:override="true">20dp</dimen>
    <dimen name="design_fab_size_normal" tools:override="true">100dp</dimen>
</resources>

Since FloatingActionButton indirectly inherits from ImageView, some properties of ImageView can also be used. I won't go into detail here.

Properties of FloatingActionButton#

Here are some commonly used properties:

android:src             // Set icon (24dp)
app:backgroundTint      // Set icon background color
app:rippleColor         // Set ripple color when clicked
app:elevation           // Set shadow size
app:fabSize             // Set size
app:pressedTranslationZ // Set distance from Z-axis when pressed
app:layout_anchor       // Set anchor
app:layout_anchorGravity// Set position relative to anchor

Regarding the properties, it is helpful to observe the effects after setting them.

Simple usage#

I think it's better to have a visual effect when taking notes, so let's take a look at the specific effect of using CoordinatorLayout and FloatingActionButton. The layout is as follows:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context="com.manu.materialdesignsamples.samples.SampleActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rvData"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="12dp"
        android:layout_marginEnd="12dp"
        android:visibility="visible"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="12dp"
        android:layout_gravity="bottom|end"
        android:src="@drawable/fab"
        android:scaleType="center"
        app:backgroundTint="@color/colorAccent"
        app:backgroundTintMode="src_in"
        app:elevation="5dp"
        app:rippleColor="#000000"
        app:fabSize="auto"
        app:pressedTranslationZ="10dp"/>

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

Then, set the click event for FloatingActionButton in code, as follows:

findViewById(R.id.fab).setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Snackbar.make(v,"I am a Snackbar...",Snackbar.LENGTH_SHORT)
                .setAction("Cancel", new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Toast.makeText(SampleActivity.this, "Cancel", Toast.LENGTH_SHORT).show();
                    }
                }).show();
    }
});

Let's start with an effect image, as follows:

As can be seen, FloatingActionButton automatically leaves space for Snackbar to avoid covering FloatingActionButton when Snackbar pops up. This is because FloatingActionButton has already implemented the corresponding Behavior for Snackbar. CoordinatorLayout automatically adjusts the position of child views based on the specific behavior of the corresponding Behavior. In this case, it adjusts the position of FloatingActionButton. You can try setting the root layout to RelativeLayout, etc. Of course, when Snackbar pops up, it will cover FloatingActionButton. As the name suggests, CoordinatorLayout is a layout for coordinating. The part about Behavior will be covered later. That's all for today.