How to create a floating action button (FAB) in android, using AppCompat v21?

Question

I would like to create a floating action button (to add items to a listview), like google calendar, maintaining compatibility with pre-lollipop Android versions (before 5.0).

I created this layout:

Activity main_activity.xml:

<LinearLayout ... >

     <include
         layout="@layout/toolbar"/>

     <RelativeLayout ... >

     <!-- My rest of the layout -->

          <!-- Floating action button -->
          <ImageButton style="@style/AppTheme"
                     android:layout_width="60dp"
                     android:layout_height="60dp"
                     android:text="New Button"
                     android:id="@+id/button"
                     android:src="@drawable/ic_fab"
                     android:background="@drawable/fab"
                     android:layout_alignParentBottom="true"
                     android:layout_alignParentRight="true"
                     android:layout_marginBottom="24dp"
                     android:layout_marginRight="24dp"/>

     </RelativeLayout>

 </LinearLayout>

Drawable fab.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="oval">
    <solid android:color="#ffa48bc0"/>
</shape>

Style styles.xml

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">#ff1d79b1</item>
        <item name="colorPrimaryDark">#ff084d95</item>
    </style>
</resources>

The result is similar, but there isn't the shading, a characteristic of material design:

Calendar's floating action button:

Calendar's floating action button

My app's floating action button:

My app's floating action button

How can I add the shading to my button?

I have already used the attribute elevation, but does not work

The elevation API is Lollipop-only, did you try on a Lollipop device? — Marc Plano-Lesay, Nov 21 '14 at 08:12
In fact, on my 4.4.2 Samsung Galaxy S III, the shadow is there, thanks to AppCompat. — FractalBob, Jul 25 '17 at 22:46

score 101 · Accepted Answer · answered Jun 16 '15 at 08:28

101

There is no longer a need for creating your own FAB nor using a third party library, it was included in AppCompat 22.

https://developer.android.com/reference/android/support/design/widget/FloatingActionButton.html

Just add the new support library called design in in your gradle-file:

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

...and you are good to go:

<android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:layout_margin="16dp"
        android:clickable="true"
        android:src="@drawable/ic_happy_image" />

answered Jun 16 '15 at 08:28

user1354603

4,034
4
31
43

1

how do you change the background color? – Jjang Jun 22 '15 at 17:35
3

By default the background color will be the "colorAccent" from your theme. However you can also use floatingActionButton.setRippleColor(color), don't let the name 'ripple' scare you, it works on pre-lollipop devices also. – user1354603 Jun 23 '15 at 08:16
I dont have colorAccent, and if I add one and set the color to something else it doesnt work - color sticks to green / turquise. – Jjang Jun 24 '15 at 15:03
I was using a third party for this. Really helped me a lot. Thanks. One issue with this is, it still feels like its not developed completely. – V_J Jul 17 '15 at 13:42
Does this work in android lollipop? Floating action bar hides at the bottom and working fine in lower version! Why is it so? – Rethinavel Aug 06 '15 at 11:48
Yes this works in lollipop. It's very difficult to help without seeing your code, I suggest you post a question with details about your implementation. @RethinavelPillai – user1354603 Aug 06 '15 at 12:23
Do you know how to make expanding up smaller buttons for sub-actions? – Pavel Biryukov Aug 13 '15 at 13:25
I Guess you could for instance put a bunch of mini FABs in a LinearLayout. Just make sure the size of the FABs match the material design pattern: https://www.google.com/design/spec/components/buttons-floating-action-button.html#buttons-floating-action-button-floating-action-button – user1354603 Aug 13 '15 at 13:32
Thx! any examples with animation on expand? :) (like in Evernote) – Pavel Biryukov Aug 13 '15 at 14:17
I'm afraid I have no examples at the moment. However, I think you should be able to make some cool animations with the help of a CoordinatorLayout and Behaviors, so keep an eye out for examples involving those. – user1354603 Aug 13 '15 at 14:24
yep, expandOrCollapse method works with LinearLayout filled with additional buttons from here: http://stackoverflow.com/a/23932782/2842750 – Pavel Biryukov Aug 13 '15 at 15:03
Here's a great example for using out-of-the-box widget for FAB http://www.technotalkative.com/part-1-floating-action-button/ – lini sax Nov 12 '15 at 19:28
1

@Jjang @user1354603 from docs `The background color of this view defaults to the your theme's colorAccent. If you wish to change this at runtime then you can do so via setBackgroundTintList(ColorStateList).` – Muhammad Babar Jan 14 '16 at 05:25
For changing background color, use app:backgroundTint="@color/yourcustomcolor" and not rippleColor – Rémy DAVID Mar 04 '16 at 17:10

score 43 · Answer 2 · answered Dec 16 '14 at 03:11

I've generally used xml drawables to create shadow/elevation on a pre-lollipop widget. Here, for example, is an xml drawable that can be used on pre-lollipop devices to simulate the floating action button's elevation.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="8px">
    <layer-list>
        <item>
            <shape android:shape="oval">
                <solid android:color="#08000000"/>
                <padding
                    android:bottom="3px"
                    android:left="3px"
                    android:right="3px"
                    android:top="3px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#09000000"/>
                <padding
                    android:bottom="2px"
                    android:left="2px"
                    android:right="2px"
                    android:top="2px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#10000000"/>
                <padding
                    android:bottom="2px"
                    android:left="2px"
                    android:right="2px"
                    android:top="2px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#11000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#12000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#13000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#14000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#15000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#16000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#17000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
    </layer-list>
</item>
<item>
    <shape android:shape="oval">
        <solid android:color="?attr/colorPrimary"/>
    </shape>
</item>
</layer-list>

In place of ?attr/colorPrimary you can choose any color. Here's a screenshot of the result:

enter image description here

Thank you for sharing this. I was dreading digging up the XML code again to re-create this. — Cookster, Feb 18 '15 at 17:16
I implemented just now and it is great, there is only one weird thing. It seems that when you rotate the phone the shadow/elevation is getting lost. Any thoughts on that? Thanks in advance Justin — Amilcar Andrade, Apr 12 '15 at 04:33
@AmilcarAndrade that's a good question. I have encountered similar things with other xml drawables, but I was actually extracting a bitmap from the drawable itself. To solve that, I essentially used the drawable as a singleton; set once so it isn't drawn again. Perhaps you can get the drawable as a static variable and set it as the background in onCreate? — Justin Pollard, Apr 12 '15 at 04:36
Also I added an enhancement you can add a riple effect really easy, below is the code. — Amilcar Andrade, Apr 12 '15 at 04:37
Thanks Justin, I will try your suggestion. Thanks again mate. — Amilcar Andrade, Apr 12 '15 at 04:41
For future references, this is a great example for avoiding the shadows and elevations --> http://www.curious-creature.com/2008/12/18/avoid-memory-leaks-on-android/comment-page-1/ — Amilcar Andrade, Apr 12 '15 at 05:13
i notice the shadow issue only happen to lolipop, could you provide some example for this problem? — Eric, May 25 '15 at 15:50
@Eric I'm not exactly sure what you're asking for. Can you elaborate? — Justin Pollard, May 26 '15 at 17:06
The last 7 shapes are at same location from all sides i.e 1 px. isn't the first 6 shapes get hide by the seventh one i.e `` Can you please the purpose of creating seven ovals layers at same position? — Muhammad Babar, Jan 14 '16 at 05:30
@MuhammadBabar it's kind of interesting how the `` attribute works in a layer list. Rather than each shape acting as a sibling to the others, each subsequently defined shape acts as a child of the previously defined shape when it comes to padding. In additional, each subsequently defined shape is drawn above the previously defined shape. So padding of 1px on the first shape means that its borders will be 1px outside the borders of the next shape even though the next shape is drawn above it. — Justin Pollard, Jan 16 '16 at 01:32

score 20 · Answer 3 · edited Jun 20 '20 at 09:12

20

There are a bunch of libraries out there add a FAB(Floating Action Button) in your app, Here are few of them i Know.

makovkastar's FAB

futuersimple's Composite FAB

Material Design library which includes FAB too

All these libraries are supported on pre-lollipop devices, minimum to api 8

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 05 '14 at 14:19

QAMAR

2,684
22
28

Vladyslav Baidak · Answer 4 · 2016-10-30T21:24:57.620

8

Here is one aditional free Floating Action Button library for Android It has many customizations and requires SDK version 9 and higher

enter image description here

Full Demo Video

edited Oct 30 '16 at 21:24

answered Feb 06 '15 at 11:45

Vladyslav Baidak

348
3
5

5

Please read: http://meta.stackexchange.com/questions/57497/limits-for-self-promotion-in-answers – nkjt Feb 06 '15 at 12:12

Amilcar Andrade · Answer 5 · 2015-04-12T04:50:29.393

@Justin Pollard xml code works really good. As a side note you can add a ripple effect with the following xml lines.

    <item>
    <ripple
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="?android:colorControlHighlight" >
        <item android:id="@android:id/mask">
            <shape android:shape="oval" >
                <solid android:color="#FFBB00" />
            </shape>
        </item>
        <item>
            <shape android:shape="oval" >
                <solid android:color="@color/ColorPrimary" />
            </shape>
        </item>
    </ripple>
</item>

score 2 · Answer 6 · edited May 23 '17 at 12:26

2

Try this library, it supports shadow, there is minSdkVersion=7 and also supports android:elevation attribute for API-21 implicitly.

Original post is here.

edited May 23 '17 at 12:26

Community

1
1

answered Nov 26 '14 at 21:59

Oleksii K.

5,359
6
44
72

score 0 · Answer 7 · answered Nov 16 '14 at 23:22

0

Add padding and elevation:

 android:elevation="10dp"
 android:padding="10dp"

answered Nov 16 '14 at 23:22

Simas

43,548
10
88
116

How to create a floating action button (FAB) in android, using AppCompat v21?

7 Answers7

Linked