Recently, I read these posts:
But, none of them give me a detail example about creating a new FloatingActionButton
. It's so hard to understand, which is why I am asking this question.
Can anyone give me an example about it?
I just found some issues on FloatingActionButton
(FAB), and I want to improve another answer. See my answer below.
This question is related to
android
android-support-library
floating-action-button
android-design-library
FloatingActionButton
extends ImageView
. So, it's simple as like introducing an ImageView
in your layout. Here is an XML sample.
<android.support.design.widget.FloatingActionButton xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/somedrawable"
android:layout_gravity="right|bottom"
app:borderWidth="0dp"
app:rippleColor="#ffffff"/>
app:borderWidth="0dp"
is added as a workaround for elevation issues.
I just found some issues on FAB and I want to enhance another answer.
So, the issue will come once you set the ripple color (FAB color on pressed) programmatically through setRippleColor
. But, we still have an alternative way to set it, i.e. by calling:
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
ColorStateList rippleColor = ContextCompat.getColorStateList(context, R.color.fab_ripple_color);
fab.setBackgroundTintList(rippleColor);
Your project need to has this structure:
/res/color/fab_ripple_color.xml
And the code from fab_ripple_color.xml
is:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:color="@color/fab_color_pressed" />
<item android:state_focused="true" android:color="@color/fab_color_pressed" />
<item android:color="@color/fab_color_normal"/>
</selector>
Finally, alter your FAB slightly:
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_action_add"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
app:fabSize="normal"
app:borderWidth="0dp"
app:elevation="6dp"
app:pressedTranslationZ="12dp"
app:rippleColor="@android:color/transparent"/> <!-- set to transparent color -->
For API level 21 and higher, set margin right and bottom to 24dp:
...
android:layout_marginRight="24dp"
android:layout_marginBottom="24dp" />
As you can see on my FAB xml code above, I set:
...
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
app:elevation="6dp"
app:pressedTranslationZ="12dp"
...
By setting these attributes, you don't need to set layout_marginTop
and layout_marginRight
again (only on pre-Lollipop). Android will place it automatically on the right corned side of the screen, which the same as normal FAB in Android Lollipop.
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
Or, you can use this in CoordinatorLayout
:
android:layout_gravity="end|bottom"
elevation
and 12dp pressedTranslationZ
, according to this guide from Google.If you already added all libraries and it still doesn't work use:
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/ic_add"
/>
instead of:
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/ic_add"
/>
And all will work fine :)
for AndroidX use like
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/ic_add" />
Source: Stackoverflow.com