How Can I Make My Button Look More Like The Floating Action Button From Android Jellybean (v21)?

How do I make my button look more like the Floating Action Button? My button so far looks close but as yet, doesn't look the same. What other changes would you suggest? An image of

Solution 1:

Result:

---

Button in a layout:

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent">
    ...

    <RelativeLayoutxmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="bottom|end"><Buttonandroid:id="@+id/add_button"android:layout_width="50dp"android:layout_height="50dp"android:layout_margin="10dp"android:background="@drawable/add_button_selector"android:gravity="center"android:stateListAnimator="@null"android:text="+"android:textSize="25sp"android:elevation="3dp"android:fontFamily="sans-serif-light"android:textColor="#FFF"tools:ignore="HardcodedText,UnusedAttribute"/></RelativeLayout></LinearLayout>

Explanation:

• RelativeLayout, overlays everything and places the button at the bottom-right corner.
• margin provides some space for the elevation
• gravity centers the background drawable and the text
• stateListAnimator set to null so it doesn't mess with elevation (it can be animated via this)

---

res/drawables-v21/add_button_selector.xml

<ripplexmlns:android="http://schemas.android.com/apk/res/android"android:color="#b0372c"><item><shapeandroid:shape="oval"><solidandroid:color="#da4336" /></shape></item></ripple>

res/drawables/add_button_selector.xml:

<selectorxmlns:android="http://schemas.android.com/apk/res/android"><itemandroid:state_selected="true"android:drawable="@drawable/add_button_selected"/><itemandroid:state_pressed="true"android:drawable="@drawable/add_button_selected"/><itemandroid:drawable="@drawable/add_button"/></selector>

res/drawables/add_button.xml:

<shapexmlns:android="http://schemas.android.com/apk/res/android"android:shape="oval"><solidandroid:color="#da4336" /></shape>

res/drawables/add_button_selected.xml:

<shapexmlns:android="http://schemas.android.com/apk/res/android"android:shape="oval"><solidandroid:color="#b0372c" /></shape>

Explanation:

• Since API 21 you can use the ripple effect:
• However for older versions you'll have to stick with the good old color selector

---

Notes

• There may be a user-made ripple library for lower APIs, that might be worth checking out
• Lower APIs may need to use shadow and/or a custom drawable instead of elevation, haven't tested that since I don't have a proper device

Solution 2:

I build this kind of button in my app using this code

Code in Fragment.xml

<Button
    android:id="@+id/contact_list_add_button"
    android:layout_width="65dip"
    android:layout_height="65dip"
    android:layout_alignParentBottom="true"
    android:layout_alignParentEnd="true"
    android:layout_alignParentRight="true"
    android:layout_marginBottom="20dip"
    android:layout_marginEnd="20dip"
    android:layout_marginRight="20dip"
    android:background="@drawable/round_button_shape"
    android:text="@string/action_plus"
    android:textColor="@android:color/white"
    android:textSize="35sp" />

Code for drawable (round_button_shape)

<?xml version="1.0" encoding="utf-8"?><layer-listxmlns:android="http://schemas.android.com/apk/res/android" ><item><shapeandroid:shape="oval"><solidandroid:color="@android:color/transparent"/><strokeandroid:width="2dip"android:color="#44aaaaaa"/><paddingandroid:left="2dip"android:right="2dip"android:top="2dip"android:bottom="2dip"
                /></shape></item><item><shapeandroid:shape="oval"><solidandroid:color="@android:color/transparent"/><strokeandroid:width="2dip"android:color="#90aaaaaa"/><paddingandroid:left="2dip"android:right="2dip"android:top="2dip"android:bottom="2dip"
                /></shape></item><item><shapeandroid:shape="oval"><solidandroid:color="@android:color/transparent"/><strokeandroid:width="2dip"android:color="#ffaaaaaa"/><paddingandroid:left="1dip"android:right="1dip"android:top="1dip"android:bottom="1dip"
                /></shape></item><itemandroid:drawable="@drawable/round_shape"android:left="1dip"android:top="1dip"android:right="1dip"android:bottom="1dip"/></layer-list>

Code for round shape Drawable

<?xml version="1.0" encoding="utf-8"?><shapexmlns:android="http://schemas.android.com/apk/res/android"android:shape="oval" ><solidandroid:color="@color/red_dark"/></shape>

Additionaly i would recommend to use this code within a selector to provide feedback if the user interact with the button

Solution 3:

I have been using the following library for my app (I'm not the author). It seems to work very well, looks just like a FAB and even can be easily attached to a listview to autohide when you scroll down. The library is easy to add through gradle too. The image/animation on the github page makes the button look low quality but it isn't in real life and looks exactly like the google versions.

https://github.com/makovkastar/FloatingActionButton