Android L FAB Button shadow

Question

In the Material Design guidelines Google presented a new style of button, the FAB Button. I found instructions how to make it but I have trouble adding the shadow. How can this be achieved?

Chyack

Set the elevation on the button, using setElevation(float). – Corina

Yes I've already made it but my button is a circle and here the shadow is a square. THX for your answer – Chyack

android.graphics.Outline and View.setOutline(Outline) should do the trick for you according the L documentation. – Nina

I saw it but I didn't success to use it... Can you give me an example please ? – Chyack

there is well-formed library com.shamanland:fab:0.0.3, it supports shadow automatically, check this post: https://mcmap.net/q/94838/-how-can-i-add-the-new-quot-floating-action-button-quot-between-two-widgets-layouts – Janeejaneen

Thanks it works too, i'll see it later – Chyack

Answer 1

Check out the "activity.java", there is probably the code you need.

I made the Fab - Button like this:

layout.xml

    <Button
    style="?android:attr/buttonStyleSmall"
    android:layout_width="56dp"
    android:layout_height="56dp"
    android:text="+"
    android:textSize="40sp"
    android:background="@drawable/ripple"
    android:id="@+id/fabbutton"
    android:layout_margin="@dimen/activity_horizontal_margin"
    android:elevation="3dp"
    android:paddingBottom="16dp"
    android:fontFamily="sans-serif-light"
    android:layout_alignParentEnd="true"
    android:layout_gravity="right|bottom" />

ripple.xml

<?xml version="1.0" encoding="utf-8"?>
 <ripple android:color="#ffb300" xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:drawable="@drawable/fab"></item>
</ripple>

fab.xml

<?xml version="1.0" encoding="utf-8"?>
  <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
  <solid android:color="@color/accentColor" />
</shape>

Activity.java

    import android.graphics.Outline;
    ...
    Button fab = (Button) rootView.findViewById(R.id.fabbutton);

    Outline mOutlineCircle;
    int shapeSize = getResources().getDimensionPixelSize(R.dimen.shape_size);
    mOutlineCircle = new Outline();
    mOutlineCircle.setRoundRect(0, 0, shapeSize, shapeSize, shapeSize / 2);

    fab.setOutline(mOutlineCircle);
    fab.setClipToOutline(true);

This code will be shown as error in android studio v0.8.1, so as other android l components. It will be fixed in the next version.

Result:

Conation

This is what I searched !! what is the OutlineHelper ? – Chyack

Thanks a lot, just put 112 in R.dimen.shape_size – Chyack

android:elevation ? – Kaffraria

@VishalVijay This is used, that the button gets the small shadow. If you set it higher, the shadow will be wider. – Conation

@theyanu android:elevation available only in android L ? – Kaffraria

@VishalVijay Yeah, it was invented with Android L & in the developer preview, it'll only work with L. – Conation

@theyanu, fab.setOutline(mOutlineCircle); gives error in Android 5.0 Lollipop. Any suggestion regarding that? – Philpott

hi guys! do you know a library to use the ripple effect on pre-L Android releases? Something like Pushtime ebta does, for example? – Haugen

Answer 2

You can use a Button:

<ImageButton
        android:id="@+id/fab"
        android:background="@drawable/ripple"
        android:stateListAnimator="@anim/anim"
        android:src="@drawable/ic_action_add"
        android:elevation="4dp"
        />

where the ic_action_add is your icon.

drawable/ripple.xml is:

<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="?android:colorControlHighlight">
    <item>
        <shape android:shape="oval">
            <solid android:color="?android:colorAccent" />
        </shape>
    </item>
</ripple>

anim/anim.xml is:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_enabled="true"
        android:state_pressed="true">
        <objectAnimator
            android:duration="@android:integer/config_shortAnimTime"
            android:propertyName="translationZ"
            android:valueFrom="@dimen/button_elevation"
            android:valueTo="@dimen/button_press_elevation"
            android:valueType="floatType" />
    </item>
    <item>
        <objectAnimator
            android:duration="@android:integer/config_shortAnimTime"
            android:propertyName="translationZ"
            android:valueFrom="@dimen/button_press_elevation"
            android:valueTo="@dimen/button_elevation"
            android:valueType="floatType" />
    </item>
</selector>

Dimens.xml is

<resources>
    <dimen name="fab_size">56dp</dimen>

    <dimen name="button_elevation">2dp</dimen>
    <dimen name="button_press_elevation">4dp</dimen>
</resources>

With the elevation attribute you should set the Outline via code:

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.layoutfab);

        //Outline            
        Button fab = (Button) findViewById(R.id.fab)

        ViewOutlineProvider viewOutlineProvider = new ViewOutlineProvider() {
          @Override
              public void getOutline(View view, Outline outline) {
                 // Or read size directly from the view's width/height
                 int size = getResources().getDimensionPixelSize(R.dimen.fab_size);
                 outline.setOval(0, 0, size, size);
              }
        };
        fab.setOutlineProvider(viewOutlineProvider);
    }        
}

Roselane

Do you know if there's a standard android plus icon that can be used? I tried to find 'ic_action_add' in the android drawables but found nothing. – Tracheitis

@Gabriele Mariotti Great answer! Just a ping to let you know that .setOutline() here should be replaced with the .setOutlineProvider(), as you mentioned in https://mcmap.net/q/95535/-how-to-use-setoutlineprovider-instead-of-setoutline-in-lollipop. – Keening

@TheHungryAndroider did you find it? – Holsworth

@GabrieleMariotti Your forgot to Change Button to ImageButton in your Activity – Grigri

Answer 3

The problem with the circular shadow can be easily solved without any tricks with Outline: just add these properties to the button in the XML layout (in addition to the custom background):

android:elevation="5dp"
android:stateListAnimator="@null"

Although Android Studio may display it wrong in the layout preview, it works fine when launched on a device.

Begonia