DEV/material-components_material-components-android

mirror of https://github.com/material-components/material-components-android.git synced 2026-02-20 08:39:55 +08:00

travisc ab2fec6da4 Move lib/src/ to lib/java/, and lib/jvmtests/javatests/ to lib/javatests/.

Bazel is happier if Java/Java test roots are named 'java' and 'javatests', and
this will mean that once we create a BUILD file for
android/support/design/{widget,internal}/ we'll no longer need a custom package
specified in our build (which tends to cause build problems that manifest quite
weirdly). This commit doesn't attempt to refactor the build at all yet, and is
just a pure move.

PiperOrigin-RevId: 178060739

2018-01-11 10:50:18 -05:00

3.9 KiB

Raw Blame History

Floating Action Buttons

FloatingActionButton displays the primary action in an application. It is a round icon button that's elevated above other page content. Floating action buttons come in a default and mini size.

Floating action buttons provide quick-access to important or common actions within an app. They have a variety of uses, including:

Performing a common action, such as starting a new email in a mail app.
Displaying additional related actions.
Update or transforming into other UI elements on the screen.

Floating action buttons adjust their position and visibility in response to other UI elements on the screen. For example, if a Snackbar appears, the floating action button shifts its position to stay fully visible. Or if a bottom sheet partially covers the floating action button, it may hide itself.

Design & API Documentation

Usage

The FloatingActionButton widget provides a complete implementation of Material Design's floating action button component. Example code of how to include the widget in your layout:

<android.support.design.widget.CoordinatorLayout
    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">

  <!-- Main content -->

  <android.support.design.widget.FloatingActionButton
      android:id="@+id/floating_action_button"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="bottom|right"
      android:layout_margin="16dp"/>

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

Note: If the FloatingActionButton is a descendant of a CoordinatorLayout, you get certain behaviors for free. It will automatically shift so that any displayed Snackbars do not cover it, and will automatially hide when covered by an AppBarLayout or BottomSheetBehavior.

Change the icon in the floating action button with:

app:srcCompat attribute
setImageDrawable method

Change the size of the widget with:

app:fabSize attribute
setSize method

Your theme's colorAccent provides the default background color of the widget. Change the background color with:

app:backgroundTint attribute
setBackgroundTintList method

Change the elevation of the widget with:

app:elevation attribute
setCompatElevation method

Handling Clicks

FloatingActionButton handles clicks in the same way as all views:

FloatingActionButton floatingActionButton =
    (FloatingActionButton) findViewById(R.id.floating_action_button);

floatingActionButton.setOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View v) {
        // Handle the click.
    }
});

Visibility

Use the show and hide methods to animate the visibility of a FloatingActionButton. The show animation grows the widget and fades it in, while the hide animation shrinks the widget and fades it out.

CoordinatorLayout

3.9 KiB Raw Blame History