Floating Action Button (requires Android-L preview)
Last active
November 27, 2022 09:27
-
-
Save gabrielemariotti/d1baf785c2444d29819c to your computer and use it in GitHub Desktop.
Floating Action Button (requires Android-L preview)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<resources> | |
<dimen name="fab_size">56dp</dimen> | |
<dimen name="button_elevation">2dp</dimen> | |
<dimen name="button_press_elevation">4dp</dimen> | |
</resources> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
nice work!
@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).
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
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.