Skip to content

Instantly share code, notes, and snippets.

@gabrielemariotti
Last active November 27, 2022 09:27
Show Gist options
  • Save gabrielemariotti/d1baf785c2444d29819c to your computer and use it in GitHub Desktop.
Save gabrielemariotti/d1baf785c2444d29819c to your computer and use it in GitHub Desktop.
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
Copy link

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
Copy link

ysong commented Sep 5, 2014

nice work!

@smanikandan14
Copy link

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

@notnotnithin
Copy link

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