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 the list), for example, a Google calendar, supporting compatibility with Android versions up to lollipop (up to 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 is no shading characteristic of material design:

Button floating action in the calendar:

My floating button application:

How to add shading to my button?

I already used attribute elevation but not working

Answer 1

There is no longer any need to create your own FAB or use a third-party library, it was included in AppCompat 22.

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

Just add a new support library called design to 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" /> 

Answer 2

I usually used xml drawables to create shadow / elevation on widgets in front of candy. Here, for example, is an xml drawable that can be used on devices with a preliminary lobe to simulate increasing the height of the floating action.

 <?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> 

Instead of ?attr/colorPrimary you can choose any color. Here is a screenshot of the result:

Answer 3

There are many libraries that have added the FAB (Floating Action Button) to your application. Here are a few of them that I know.

makovkastar fab

futuersimple Composite FAB

Material Library, which also includes FAB

All these libraries are supported on preinstalled devices, at least up to api 8

Answer 4

Here is one free, free floating point button library for Android. It has many settings and requires SDK version 9 and above.

Full demo video

Answer 5

@Justin Pollard xml code works very well. As an additional 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> 

Answer 6

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

Original post here .

Answer 7

Add add and height:

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