How to add a Floating Action Button, without AppCompat?

Question

I'm looking to make a new app, using only API 21.

To follow the Material Design, I'm trying to use a FAB, but I cannot find any decent information on how to use the one now included in the Design Library.

So far, I have added the library the the build.gradle file, and added a FAB to my view (code below)

<android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:src="@android:drawable/ic_menu_add"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        app:elevation="5dp"
        app:borderWidth="0dp"
        app:fabSize="mini"/>

(This is in a RelativeLayout)

When I launch the app, I get:

android.view.InflateException: Binary XML file line #15: Error inflating class android.support.design.widget.FloatingActionButton

I found one answer on SO that says I need to use an AppCompat theme, but I'd rather just use pure Material/API21 stuff.

How can I use a FAB without AppCompat (support libraries)?

Answer 1

The FAB is built into the new Design Compat library - which will work on devices as early as API 7. You will need to include it as a dependency to use it (and shouldn't hesitate to do so).

If you want to avoid using a library (or any external code) you will need to draw the FAB yourself (using a Shape Drawable).

Bottom line, using the Design Compat lib is the preferred method for supporting a FAB, and you should use it. The Design Compat lib IS the "pure/Material API21 stuff".

There is NOT a FAB implementation implemented for any API other then the one in the Design support lib. You have to include the lib, or implement the code entirely yourself.

The Design lib has a dependency on AppCompat, so if you are planning on using the native fab, you will also need to include the dependency for AppCompat.

From the official blog post: "Note that as the Design library depends on the Support v4 and AppCompat Support Libraries, those will be included automatically when you add the Design library dependency."

Answer 2

The Material Design library has a dependency with AppCompat. Check the @Booger answer. It reports the official blog.

How to use a FAB.

Add the dependency to your build.gradle:

compile 'com.android.support:design:22.2.0'

Just add the FAB to your design:

<android.support.design.widget.FloatingActionButton
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|right"
            android:src="@drawable/ic_add"
            android:layout_marginBottom="@dimen/fab_margin_bottom"
            android:layout_marginRight="@dimen/fab_margin_right"
            app:elevation="6dp"
            app:borderWidth="0dp"
            app:fabSize="normal" />

Currently there are some bugs.

You have to define app:borderWidth="0dp" to display the shadow with API21+.

Also you have to define different margins for API 21+ and older devices.

res/values/dimens.xml

<dimen name="fab_margin_right">0dp</dimen>
<dimen name="fab_margin_bottom">0dp</dimen>

res/values-v21/dimens.xml

<dimen name="fab_margin_right">16dp</dimen>
<dimen name="fab_margin_bottom">16dp</dimen>

FAB uses the accent color and you could override with app:backgroundTint attribute.

Finally you can set a ClickListener with:

fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        //do something
    }
});