Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Floating Action Button (requires Android-L preview)

Floating Action Button (requires Android-L preview)

public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.layoutfab);
//Outline
int size = getResources().getDimensionPixelSize(R.dimen.fab_size);
Outline outline = new Outline();
outline.setOval(0, 0, size, size);
findViewById(R.id.fab).setOutline(outline);
}
}
<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>
<resources>
<dimen name="fab_size">56dp</dimen>
<dimen name="button_elevation">2dp</dimen>
<dimen name="button_press_elevation">4dp</dimen>
</resources>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ImageButton
android:id="@+id/fab"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_width="@dimen/fab_size"
android:layout_height="@dimen/fab_size"
android:layout_gravity="bottom|right"
android:layout_marginRight="16dp"
android:layout_marginBottom="16dp"
android:background="@drawable/ripple"
android:stateListAnimator="@anim/anim"
android:src="@drawable/ic_action_add"
android:elevation="4dp"
/>
</RelativeLayout>
<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>
@pratyushtewari

This comment has been minimized.

Copy link

@pratyushtewari pratyushtewari commented Jul 8, 2014

Hi! Great example. I was able to make this in first trial, but for some reason button.setOutline(outline) stopped getting resolved all of a sudden and I get rectangle buttons. I am not able to figure out why. Any help would be appreciated.

@ysong

This comment has been minimized.

Copy link

@ysong ysong commented Sep 5, 2014

nice work!

@smanikandan14

This comment has been minimized.

Copy link

@smanikandan14 smanikandan14 commented Dec 4, 2014

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

    //Outline
    int size = getResources().getDimensionPixelSize(R.dimen.fab_size);
    Outline outline = new Outline();
    outline.setOval(0, 0, size, size);
    findViewById(R.id.fab).setOutline(outline);
}

Since setOutline is not available anymore on 5.0 SDK, it is recommended to use ViewOutlineProvider and set it as

findViewById(R.id.fab).setOutlineProvider(new ViewOutlineProvider() { 
            @Override
            public void getOutline(View view, Outline outline) {
                int size = getResources().getDimensionPixelSize(R.dimen.fab_size);
                outline.setOval(0,0,size,size);
            }
});
findViewById(R.id.fab).setClipToOutline(true).
@nithin2889

This comment has been minimized.

Copy link

@nithin2889 nithin2889 commented Aug 1, 2017

What about the design support library's new FloatingActionButton? Can you please show an example using the StateListAnimator to get the translationZ and the ripple effect?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.