How can I make my button look more like the Floating Action Button from Android JellyBean (v21)?

Question

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?

Answer 1

Result:

---

Button in a layout:

    ...

    
        
    

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

res/drawables/add_button_selector.xml:

res/drawables/add_button.xml:

res/drawables/add_button_selected.xml:

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