I am using a TabLayout with 5 different fragments. On 3 of these fragments a android.support.design.widget.FloatingActionButton
should appear. Right now I simply set the visibility of the FAB when the tab changes, but I would like to have an animation, where the FAB comes in and out.
How can I achieve this in Android?
Android Support Library, revision 22.2. 0. FloatingActionButton.
The Android floating action button displays on the bottom right of the screen, and can be tapped to fire a specific action. The material design guidelines include the concept of promoted actions, that can be triggered with the floating action button.
To change the shape of the Floating action button: You can use the shape property of FloatingActionButton() widget class. Implement BeveledRectangleBorder( ) on this property. The output will be a square floating action button, increase the border-radius value to make a circular type shape.
The hide/show animation for shrink/pop are automatically handled by the new version of the Support Library.(22.2.1) Then OnTabChange listener show or hide the floating action button using show/hide methods provided by the new library.
fab.show(); or fab.hide();
The design support library revision 22.2.1 (July 2015) added the hide()
and show()
methods to the FloatingActionButton
class, so you can use these from now on.
http://developer.android.com/tools/support-library/index.html
You want something like this? But instead of animating it on onScrollListener
you can animate it on onCreateView
or onCreate
method. Follow this --> Implement Floating Action Button – Part 2
Basically the code sums up only to this
Animate to Hide
FloatingActionButton floatingActionButton = (FloatingActionButton) getActivity().findViewById(R.id.fab);
floatingActionButton.animate().translationY(floatingActionButton.getHeight() + 16).setInterpolator(new AccelerateInterpolator(2)).start();
and
Animate back to Show
FloatingActionButton floatingActionButton = (FloatingActionButton) getActivity().findViewById(R.id.fab);
floatingActionButton.animate().translationY(0).setInterpolator(new DecelerateInterpolator(2)).start();
but we dont want it to animate just to hide it so, 'Animate to Hide' will just be something like this
FloatingActionButton floatingActionButton = (FloatingActionButton) getActivity().findViewById(R.id.fab);
floatingActionButton.setTranslationY(floatingActionButton.getHeight() + 16);
On 'Animate to Hide' put that on the onCreateView
or onCreate
method so that on your FAB is hidden when you create this fragment and you could then add a handler and runnable that will trigger 'Animate back to Show' after a second or two to show your animation
or you could use a time for short animations
int mShortAnimationDuration = getResources().getInteger(
android.R.integer.config_shortAnimTime);
I tried this one on onScroll but haven't tried on onCreateView
or onCreate
but I guess it should work
--EDIT--
Try this code ;)
public class DummyFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
int mShortAnimationDuration = getResources().getInteger(
android.R.integer.config_shortAnimTime);
FloatingActionButton floatingActionButton = (FloatingActionButton) getActivity().findViewById(R.id.fab);
floatingActionButton.setTranslationY(floatingActionButton.getHeight() + 16);
new Handler().postDelayed(new Runnable() {
@Override
public void run() {
FloatingActionButton floatingActionButton = (FloatingActionButton) getActivity().findViewById(R.id.fab);
floatingActionButton.animate().translationY(0).setInterpolator(new DecelerateInterpolator(2)).start();
}, mShortAnimationDuration);
}
}
}
The easiest way is to extend the FloatingActionButton class and override setVisibility. Like this:
public void setVisibility(final int visibility) {
if (getVisibility() != View.VISIBLE && visibility == View.VISIBLE && inAnim != null) {
animator = // create your animator here
super.setVisibility(visibility);
} else if (getVisibility() == View.VISIBLE && visibility != View.VISIBLE) {
AnimatorListenerAdapter listener = new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animator) {
Button.super.setVisibility(visibility);
}
});
animator = // create your animator here
animator.addListener(listener);
}
}
The code above is taken from the Button class from my library. You can find sample implementations in sources.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With