Create a gist now

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.

Show comment
Hide comment
@pratyushtewari

pratyushtewari 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.

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.

Show comment
Hide comment
@ysong

ysong Sep 5, 2014

nice work!

ysong commented Sep 5, 2014

nice work!

@smanikandan14

This comment has been minimized.

Show comment
Hide comment
@smanikandan14

smanikandan14 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).

@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.

Show comment
Hide comment
@nithin2889

nithin2889 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?

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