How to change the shape of Floating Action Button (FAB) on android?
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>
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: