How to change the shape of Floating Action Button (FAB) on android?

Question

In our android app we need to create a floating action button which isn't the default circle but a square with with three rounded corners. The fab looks like in the image below:

I managed to create such a form but don't know how to apply it to my fab, or if it's even possible. The xml file for the shape looks like this:

   <shape xmlns:android="http://schemas.android.com/apk/res/android"
      android:shape="rectangle">
    <solid android:color="@color/red" />
    <corners
      android:topLeftRadius="90dp"
      android:topRightRadius="90dp"
      android:bottomRightRadius="90dp"/>
   </shape>

I tried to change the form with

android:src="@drawable/my_shape"

but this changes only the icon inside my button. I think I need to extend FloatingActionButton but I have no idea how.

Is there a way to change the shape of the fab? If someone has already achieved this I would appreciate to see a sample.

Though I found another solution, I think that the answer provided by @JediBurrell is the better approach and works just fine. — AthaMit, Sep 18 '18 at 06:28

score 15 · Accepted Answer · answered Sep 18 '18 at 05:15

The FloatingActionButton provided by the support libraries can not be extended as the methods that would need to be replaced are set to private. Material Components (which is the official AndroidX replacement for the support library) has Shape Theming on the roadmap for ~October-December, which will let you do just that officially and easily (without having to extend the view).

But it's not available just yet, so in the meantime, I forked customFloatingActionButton by robertlevonyan, and with some slight modifications, it allows you to use your own custom shape. The source code is available here.

To add it to your project with Gradle, you'll need to use jitpack. You can add it like this:

allprojects {
   repositories {
       ...
       maven { url 'https://jitpack.io' }
   }
}

Then implement my fork:

implementation 'com.github.JediBurrell:customFloatingActionButton:-SNAPSHOT'

Next we'll create the shape, the one you created should work fine.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <corners
        android:topLeftRadius="@dimen/fab_circle_radius"
        android:topRightRadius="@dimen/fab_circle_radius"
        android:bottomRightRadius="@dimen/fab_circle_radius" />
    <solid android:color="@color/colorAccent" />
</shape>

Then finally add it to your layout (more FAB options are listed in the Github repo):

<com.jediburrell.customfab.FloatingActionButton
    android:id="@+id/floating_action_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|right"
    android:layout_margin="16dp"
    app:fabType="custom"
    app:fabShape="@drawable/fab_teardrop"
    app:fabIcon="@drawable/ic_add_24dp"
    app:fabColor="@color/red" />

And here's how that looks:

Actually, as I've read, it should be possible now: https://issuetracker.google.com/issues/133389626 . https://developer.android.com/reference/com/google/android/material/floatingactionbutton/FloatingActionButton#setshapeappearance https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/floatingactionbutton/FloatingActionButton.java .Problem is, I don't see much samples and tutorials about it. Do you know how to use it?Can you please show how to make something basic like rounded corners horizontal FAB (like in contact-details screen)? — android developer, Jul 07 '19 at 14:46

score 15 · Answer 2 · answered Jul 04 '20 at 06:28

With the Material Components Library you can use the shapeAppearanceOverlay:

<com.google.android.material.floatingactionbutton.FloatingActionButton
    app:shapeAppearanceOverlay="@style/fab_3_rounded"
    .../>

with:

<style name="fab_3_rounded">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item>
    <item name="cornerSizeBottomLeft">0dp</item>
</style>

score 1 · Answer 3 · answered Feb 09 '21 at 09:28

No need to update any external library update your Gradle file from

implementation 'com.google.android.material:material:1.1.0'

to

implementation 'com.google.android.material:material:1.3.0'

this will give you access to

  <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

then you can change its properties just like a normal button

score -1 · Answer 4 · edited Mar 14 '18 at 02:42

-1

What you're looking for is changing the background of your button

android:background="@drawable/my_shape"

edited Mar 14 '18 at 02:42

creativecreatorormaybenot

114,516
58
291
402

answered Mar 13 '18 at 16:14

Saurabh Lalwani

9
1

1

You should edit your answer to have the sample code part formatted. – Vidmantas Blazevicius Mar 13 '18 at 16:22

How to change the shape of Floating Action Button (FAB) on android?

4 Answers4

Linked