FloatingActionButton shadow on pre-lollipop

问题

I want to make my FloatingActionButton much bigger with custom width and height. I find out that this is possible only if I add this as a child in FrameLayout or in CoordinatorLayout. On Lollipop and Marshmallow it looks good. But on pre-Lollipop the shadow from FloatingActionButton is very strange. Is it a bug from Android or I did something wrong?

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/help_layout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true">

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/my_btn"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_gravity="center"
        android:src="@mipmap/ic_launcher" />

</android.support.design.widget.CoordinatorLayout>

I also tried to add and app:borderWidth="0dp" but with no luck.

This is how it looks in Kitkat:

回答1:

Fab button is available under two default dimensions. Normal (56dp), Mini (40dp)

But you can override this values by adding followings code in dimens.xml (under values).

<dimen name="design_fab_size_normal">150dp</dimen>
<dimen name="design_fab_size_mini">30dp</dimen>

回答2:

I believe that this is caused by these two lines:

android:layout_width="150dp"
android:layout_height="150dp"

Try setting them to:

android:layout_width="match_parent"
android:layout_height="match_parent"

Then add:

app:fabSize="normal"

So the final xml will be:

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/help_layout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true">

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/my_btn"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:src="@mipmap/ic_launcher" 
        app:fabSize="normal"/>

</android.support.design.widget.CoordinatorLayout>

回答3:

You should set

android:layout_width= "wrap_content"
android:layout_height= "wrap_content"

and fabSize on mini(40dp) or normal(56dp). If you want different size of fab button you should scale the button.
E.g. if you want 48dp button size you should add

app:fabSize="mini"
android:scaleX=1.2
android:scaleY=1.2

Also if you want to keep image size set android:scaleType="center"

来源：https://stackoverflow.com/questions/37794443/floatingactionbutton-shadow-on-pre-lollipop

标签

android

Shadow

floating-action-button