How do I customize a Floating Action Button shape?

Question

I am trying to create a custom FAB with a custom shape. I have tried setting the android: background along with the shapeAppearanceOverlay and shapeAppearance property and still no luck.

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/edit_score_fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:shapeAppearance="@drawable/edit_score_fab"
            app:shapeAppearanceOverlay="@drawable/edit_score_fab"
            android:background="@drawable/edit_score_fab"/>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    >
    <size
        android:height="5dp"
        android:width="10dp"/>
    <corners android:bottomLeftRadius="4dp" />
    <solid android:color="@color/color_primary"/>
</shape>

My result

What I want

Answer 1

if you want an expandable fully customizable FAB :

First download my library Viper Pack and install it in your project.

Second, go to your activity onCreate cycle and add it using Lava.app.addLavaFab(...) methods from Lava class :

Simple Lava Fab :

Lava.app.addLavaFab(Context c, int imgres, String text, View.OnClickListener lis) lets you to add a simple image and text lava fab in your app, imgres is the fab image from resources and text is the fab text.

Lava.app.addLavaFab(Context c, int imgres, String text, String gravity, View.OnClickListener lis) lets you to add a simple image and text lava fab in your app, gravity is the fab position, can be Lava.FabPosition.LEFT or Lava.FabPosition.RIGHT or Lava.FabPosition.CENTER, imgres is the fab image from resources and text is the fab text.

Lava.app.addLavaFab(Context c, Drawable d, String text, View.OnClickListener lis) lets you to add a simple image and text lava fab in your app, d is the fab image as a drawable and text is the fab text.

Lava.app.addLavaFab(Context c, Drawable d, String text, String gravity, View.OnClickListener lis) lets you to add a simple image and text lava fab in your app, gravity is the fab position, its can be Lava.FabPosition.LEFT or Lava.FabPosition.RIGHT or Lava.FabPosition.CENTER, d is the fab image as a drawable and text is the fab text.

You can get simple lava fab textview and imageview using Lava.app.fabtext and Lava.app.fabimage.

Custom Lava Fab :

Lava.app.addLavaFab(Context c, View fixedview, View hiddenview, View.OnClickListener lis) lets you to add a custom lava fab in your app, fixedview is the always-appear view in fab, its can be an image, lottie animation, anything; hiddenview is the hidden view that is only appears when user press the fab, its can be a text or anything else.

Lava.app.addLavaFab(Context c, View fixedview, View hiddenview, String gravity, View.OnClickListener lis) lets you to add a custom lava fab in your app, fixedview is the always-appear view in fab, its can be an image, lottie animation, anything; hiddenview is the hidden view that is only appears when user press the fab, its can be a text or anything else, gravity is the fab position, its can be Lava.FabPosition.LEFT or Lava.FabPosition.RIGHT or Lava.FabPosition.CENTER.

You can get the lava fab itself as a LinearLayout by Lava.app.fab.

Very easy to add, give it a try ans share it to others :)

Answer 2

You can use the ExtendedFloatingActionButton with a custom shape appearance.
Something like:

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

with:

  <style name="ShapeAppearanceOverlayExtended" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">0dp</item>
    <item name="cornerSizeTopLeft">50%</item>
  </style>