如何将 FAB 塑造为圆角按钮（药丸形状），类似于联系人应用程序的联系人详细信息屏幕？

Question

Background

Initially, a FAB (floating action button) only had one shape : circle, and it only had the option to have an icon in it.

The problem

In the past year or so, Google added various screens in its apps, that show a FAB that changes its size. For example, if you open its Contacts app and choose a contact, you a FAB as such:

And if you scroll a bit, it gets to be a circle, with just the icon in it:

I want to know how to make such a FAB, and also use similar one with just an icon in the middle (without text), meaning a rounded corners one.

Something like that:

What I've tried and found

At first, I tried to just set the width of the FAB to be larger, but this didn't help, as it insisted on being a perfect circle (fit in a square, and without edges).

Seeing that maybe FAB can't handle this currently, I used MaterialCardViewinstead:

                <com.google.android.material.card.MaterialCardView

android:layout_width="60dp" android:layout_height="32dp" android:clickable="true" android:focusable="true" app:cardBackgroundColor="..." app:cardCornerRadius="16dp" >

                    <androidx.appcompat.widget.AppCompatImageView
                        android:layout_width="wrap_content" android:layout_height="wrap_content"
                        android:layout_gravity="center" app:srcCompat="..."/>
                </com.google.android.material.card.MaterialCardView>

This works, but the clicking effect is gone.

I also tried MaterialButton, but this doesn't support an icon in the middle, only on the various of the text inside.

Later, I've noticed that FAB actually does have a way to customize the shape of itself :

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

Also, as for the expanding FAB, I've found this:

https://developer.android.com/reference/com/google/android/material/floatingactionbutton/ExtendedFloatingActionButton

https://material.io/develop/android/components/extended-floating-action-button/

So looking at its code, I've found that it uses a shape of a pill, and I tried to do a similar thing to the normal FAB :

class PillFab @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0) :
    FloatingActionButton(context, attrs, defStyleAttr) {
    init {
        val shapeAppearanceModel =
            ShapeAppearanceModel(context, attrs, defStyleAttr, DEF_STYLE_RES, ShapeAppearanceModel.PILL)
        shapeAppearance = shapeAppearanceModel
    }

    companion object {
        private val DEF_STYLE_RES = R.style.Widget_MaterialComponents_FloatingActionButton
    }
}

Sadly, this didn't work at all. It's still in a circle shape.

The question

How can I set a FAB (with clicking effect) that has rounded corners and a single icon inside?

Answer 1

It is not the perfect answer because you are looking for an ExtendedFAB without text.

However you can obtain something similar using a MaterialButton changing the component's shape using the attribute shapeAppearanceOverlay .

<com.google.android.material.button.MaterialButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MyApp.Button.Rounded"
            app:icon="@drawable/outline_cached_black_18dp"
            app:iconPadding="0dp"
            app:iconGravity="textStart"
            />

using:

  <style name="ShapeAppearanceOverlay.MyApp.Button.Rounded" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item>
  </style>

Currenty the app:iconGravity doesn't support the center value. A workaround to center the icon is using these attrs:

            app:iconPadding="0dp"
            app:iconGravity="textStart"

If you would like to override some theme attributes from a default style now you can use new materialThemeOverlay attribute.

Something like:

<style name="MtButtonStyle"
 parent="Widget.MaterialComponents.Button">
   <item name=“materialThemeOverlay”>@style/MyButtonThemeOverlay</item>
</style>

<style name="MyButtonThemeOverlay">
  <item name="colorPrimary">@color/...</item>
  <item name="colorOnSurface">@color/....</item>
</style>

Answer 2

You can use ExtendedFloatingActionButton

for more information check 1.1.0-alpha06 Try this

Use below dependencies

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

SAMPLE CODE

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:background="@android:color/white"
    android:gravity="center"
    android:orientation="vertical">

    <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Nilu Pilu"
        app:icon="@drawable/ic_search_black" />

</LinearLayout>

OUTPUT

Answer 3

您可以使用CoordinatorLayout.Behavior在 Recyclerview 的滚动事件上将形状、效果应用于 android 中的任何视图。