Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

android

xml

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

like image 631
devpelux Avatar asked Nov 16 '14 23:11

devpelux


People also ask

How do I add a floating action button?

Add the floating action button to your layoutThe size of the FAB, using the app:fabSize attribute or the setSize() method. The ripple color of the FAB, using the app:rippleColor attribute or the setRippleColor() method. The FAB icon, using the android:src attribute or the setImageDrawable() method.

How do I change the shape of the floating action button on Android?

To change the shape of the Floating action button: You can use the shape property of FloatingActionButton() widget class. Implement BeveledRectangleBorder( ) on this property. The output will be a square floating action button, increase the border-radius value to make a circular type shape.

Is Floating Action button docked?

You can dock a FloatingActionButton by specifying floatingActionButtonLocation in a Scaffold and using BottomAppBar .


1 Answers

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" /> 
like image 163
user1354603 Avatar answered Oct 05 '22 03:10

user1354603