Skip to content

Instantly share code, notes, and snippets.

@simonesestito
Created August 5, 2018 16:22
Show Gist options
  • Star 11 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save simonesestito/edf434544ed8bf6ef23ae5e9af625149 to your computer and use it in GitHub Desktop.
Save simonesestito/edf434544ed8bf6ef23ae5e9af625149 to your computer and use it in GitHub Desktop.
Extended FAB using Material Components on Android
<?xml version="1.0" encoding="utf-8"?><!--
~ Use Extended FAB on Android even if Material Components doesn't support it yet
~ See https://github.com/material-components/material-components-android/issues/79
~
~ Created by Simone Sestito
-->
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Change this view with your content -->
<View
android:id="@+id/fragmentContent"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<com.google.android.material.bottomappbar.BottomAppBar
android:id="@+id/bottomAppBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentBottom="true"
android:elevation="4dp"
app:layout_anchor="@+id/fragmentContent"
app:layout_anchorGravity="bottom|center" />
<!-- It will NOT work without the style applied -->
<com.google.android.material.button.MaterialButton
android:id="@+id/fab"
style="@style/Widget.MaterialComponents.Button.TextButton.IconButton"
android:layout_width="wrap_content"
android:layout_height="64dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="24dp"
android:elevation="6dp"
android:paddingStart="20dp"
android:paddingEnd="20dp"
android:text="@string/fab_text"
android:textAllCaps="true"
android:textColor="@android:color/white"
android:textSize="14sp"
app:backgroundTint="?attr/colorAccent"
app:cornerRadius="32dp"
app:icon="@drawable/ic_fab"
app:iconPadding="12dp"
app:iconSize="24dp"
app:iconTint="@android:color/white"
app:layout_anchor="@+id/bottomAppBar"
app:layout_anchorGravity="top|center" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
@Sottti
Copy link

Sottti commented Sep 17, 2018

paddingStart should be "12dp"

@Sottti
Copy link

Sottti commented Sep 17, 2018

The visual height of the fab should be 48dp according to the Material Spec, but given yours is more around 52dp. Setting the total height to 60dp instead of 64dp makes it 48dp.

@Sottti
Copy link

Sottti commented Sep 17, 2018

I think style="@style/Widget.MaterialComponents.Button.TextButton.IconButton"
has changed to
style="@style/Widget.MaterialComponents.Button.TextButton.Icon"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment