Skip to content

Instantly share code, notes, and snippets.

@simonesestito
Created August 5, 2018 16:22
Show Gist options
  • 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

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