CODEWITHSUNDEEP
androidmaterial-designandroid-support-design
pikanezi
pikanezi

Reputation: 1128

How to style the FloatingActionButton from the android.support.design

I'm trying to add a focus effect more noticeable to the FloatingActionButton of the android.support.design.

So far, I've tested to add a custom background to the button:

 <android.support.design.widget.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_done_24dp"
            android:background="@drawable/focus_gold"
            app:backgroundTint="#F7A200"
            app:pressedTranslationZ="12dp" />

With the drawable focus_gold being:

 <?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:state_focused="true" android:drawable="#ff9800"/>
 </selector>

Here is the result (the red background is normal):

unfocused: unfocused

focused: focused

Does anyone have an idea to set a nice and simple focus effect on a fab button with this library?

Thanks,

Vincent

Upvotes: 2

Views: 5737

Answers (2)

phxhawke
phxhawke

Reputation: 2611

My suggestion,

  1. Get rid of the android:background attribute.
  2. Move fab_gold.xml from res/drawable/ to res/color/ instead.
  3. Change backgroundTint to read as app:backgroundTint="@color/focus_gold"

Make sure to change focus_gold.xml to this

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:color="#ff9800" android:state_focused="true"/>
  <item android:color="#F7A200" />
</selector>

Upvotes: 15

Blunderer
Blunderer

Reputation: 994

you can try the unofficial FloatingActionButton library! Here is the github link: https://github.com/makovkastar/FloatingActionButton

Hope it helped!

Upvotes: 2

Related Questions