i'm using a floating button on my application but i want to do the conversion to toolbar like show on the video, somebody have a sample for that?, if don't have don't worry i'm start to develop but i want a guide, thanks
i have this option:
ViewCompat.animate(view).setDuration(1000).scaleYBy(1).scaleXBy(1).start();
or this option:
ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation(activity, transitionView, EXTRA_IMAGE);
sample video
i founded the solution, i don't have the same result, but works for me, i post my code:
private void animateBottomToolbar() {
AnimatorSet set = new AnimatorSet().setDuration(500L);
if(bottomToolbarShowing) {
//hide toolbar
set.playTogether(
ObjectAnimator.ofFloat(toolbarBottom, "scaleY", 1.0f, 0.0f),
ObjectAnimator.ofFloat(addButton, "scaleY", 0.0f, 1.0f)
);
set.addListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationEnd(Animator animation) {
super.onAnimationStart(animation);
addButton.setVisibility(View.VISIBLE);
toolbarBottom.setVisibility(View.GONE);
animation.removeAllListeners();
}
});
set.setInterpolator(new OvershootInterpolator());
set.start();
bottomToolbarShowing = false;
} else {
//show toolbar
if (floatMenuOpen) animateFloatingMenu();
set.playTogether(
ObjectAnimator.ofFloat(toolbarBottom, "scaleY", 0.0f, 1.0f),
ObjectAnimator.ofFloat(addButton, "scaleY", 1.0f, 0.0f)
);
set.addListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationStart(Animator animation) {
super.onAnimationStart(animation);
addButton.setVisibility(View.GONE);
toolbarBottom.setVisibility(View.VISIBLE);
animation.removeAllListeners();
inflateMenuOnBottomToolbar();
}
});
set.setInterpolator(new OvershootInterpolator());
set.start();
bottomToolbarShowing = true;
}
}
Related
I have an Activity with a button. If user clicks Button, I start a service and finish this Activity. I want to fade out it. How to do it? I tried some ways but they seems not to work.
the smallest and best way i found is to put code:
finish();
overridePendingTransition(0, android.R.anim.fade_out);
into OnClickListener, or where ever you want to finish activity with fade.
I think I solved my problem with ObjectAnimator.
ObjectAnimator objAnimator = ObjectAnimator.ofFloat(mainView, View.ALPHA, 1.0f, 0.0f);
obj.setDuration(2000).addListener(new AnimatorListener() {
#Override
public void onAnimationStart(Animator animation) {
}
#Override
public void onAnimationRepeat(Animator animation) {
}
#Override
public void onAnimationEnd(Animator animation) {
finish();
}
#Override
public void onAnimationCancel(Animator animation) {
}
});
objAnimator.start();
Fade out and Fadein using Android(java)
Animation fadeIn = new AlphaAnimation(0, 1); // fadein
fadeIn.setInterpolator(new DecelerateInterpolator()); //add this
fadeIn.setDuration(1000);
Animation fadeOut = new AlphaAnimation(1, 0);//Fadeout
fadeOut.setInterpolator(new AccelerateInterpolator()); //and this
fadeOut.setStartOffset(1000);
fadeOut.setDuration(1000);
AnimationSet animation = new AnimationSet(false); //change to false
animation.addAnimation(fadeIn);
animation.addAnimation(fadeOut);
this.setAnimation(animation);
I trust this is helpful to you for more refer this link
So I have a textview at the top of my screen and eight buttons in the middle. What I would like to happen is for the textview to slide in from the right (animation) and then whenever the user clicks a button it makes the textview fade out, changes the text, and then fade back in with the new text. The fading back in and changing the text works fine, but instead of fading out the textview just disappears. The textview also has a problem with the slide in from the left animation in onCreate so i figured it may be something I am missing to do with the textview. Here is my code, someone please help mehh!!
private void AnimationMethodForButtons(TextView TitleArea, int explanation){
ObjectAnimator fadeOut = ObjectAnimator.ofFloat(TitleArea, "alpha", 1.0f, 0.0f);
fadeOut.setDuration(3000);
fadeOut.start();
ObjectAnimator fadeIn = ObjectAnimator.ofFloat(TitleArea, "alpha", 0.0f, 1.0f);
fadeIn.setDuration(3000);
TitleArea.setText(explanation);
fadeIn.start();
}
The start() call is asynchronous. You should be using an AnimatorListener if you want to do something at the end of an animation.
private void AnimationMethodForButtons(final TextView title, final int explaination){
ObjectAnimator fadeOut = ObjectAnimator.ofFloat(title, "alpha", 1.0f, 0.0f);
fadeOut.setDuration(3000);
final ObjectAnimator fadeIn = ObjectAnimator.ofFloat(title, "alpha", 0.0f, 1.0f);
fadeIn.setDuration(3000);
fadeOut.addListener(new Animator.AnimatorListener() {
#Override
public void onAnimationStart(Animator animation) {
}
#Override
public void onAnimationEnd(Animator animation) {
title.setText(explaination);
fadeIn.start();
}
#Override
public void onAnimationCancel(Animator animation) {
}
#Override
public void onAnimationRepeat(Animator animation) {
}
});
fadeOut.start();
}
I want to vibrate a view with scaleX and scaleY, and I am doing it with this code, but the problem is that sometimes the view is not correctly reset, and it shows with the scale applied...
I want that when the animation ends, the view must be seen with its original status always
this is the code:
ObjectAnimator scaleX = ObjectAnimator.ofFloat(view, "scaleX", 1f, 0.9f);
scaleX.setDuration(50);
scaleX.setRepeatCount(5);
scaleX.setRepeatMode(Animation.REVERSE);
ObjectAnimator scaleY = ObjectAnimator.ofFloat(view, "scaleY", 1f, 0.9f);
scaleY.setDuration(50);
scaleY.setRepeatCount(5);
scaleY.setRepeatMode(Animation.REVERSE);
set.play(scaleX).with(scaleY);
set.start();
Thanks
For ValueAnimator and ObjectAnimator can be like this a try:
animator.addListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationEnd(Animator animation) {
animation.removeListener(this);
animation.setDuration(0);
((ValueAnimator) animation).reverse();
}
});
UPDATE
On Android 7 it doesn't work.
Best way use the interpolator.
public class ReverseInterpolator implements Interpolator {
private final Interpolator delegate;
public ReverseInterpolator(Interpolator delegate){
this.delegate = delegate;
}
public ReverseInterpolator(){
this(new LinearInterpolator());
}
#Override
public float getInterpolation(float input) {
return 1 - delegate.getInterpolation(input);
}
}
In your code
animator.addListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationEnd(Animator animation) {
animation.removeListener(this);
animation.setDuration(0);
animation.setInterpolator(new ReverseInterpolator());
animation.start();
}
});
According to the docs(Property Animation):
The property animation system can animate Views on the screen by changing the actual properties in the View objects. In addition, Views also automatically call the invalidate() method to refresh the screen whenever its properties are changed.
so you can use AnimatorListener to listen the animation event, then just reset the view property you animate. let's say cancel event and scaleX property:
scaleAnimator.setListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationCancel(Animator animation) {
scaleView.setScaleX(0)
}
});
Hope this can help a bit.
You can add an AnimatorListener, to be notified when the animation ends:
scaleY.addListener(new AnimatorListener() {
#Override
public void onAnimationEnd(Animator animation) {
// TODO Restore view
}
#Override
public void onAnimationStart(Animator animation) {
}
#Override
public void onAnimationRepeat(Animator animation) {
}
#Override
public void onAnimationCancel(Animator animation) {
}
});
I've implemented a small animation on a button placed over a list view.
Basically it's like a quick action button to add/refresh the list.
What I want to do is to animate the button once the user has clicked on it and display a popup. Once the popup has been dismissed, the button should go back to its initial state.
I've made the followning code:
final PopupWindow popup = new PopupWindow(getContext());
// Attach layout
LayoutInflater layoutInflater = (LayoutInflater) getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View layout = layoutInflater.inflate(R.layout.core_popup_quickactions, new LinearLayout(getContext()));
// Creating the PopupWindow
popup.setContentView(layout);
popup.setHeight(WindowManager.LayoutParams.WRAP_CONTENT);
popup.setWidth(WindowManager.LayoutParams.WRAP_CONTENT);
popup.setOutsideTouchable(true);
popup.setFocusable(true);
popup.setBackgroundDrawable(new BitmapDrawable());
popup.setOnDismissListener(new OnDismissListener() {
#Override
public void onDismiss()
{
// Rotate back
RotateAnimation animation = new RotateAnimation(-45.0f, 0.0f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
animation.setDuration(300);
animation.setRepeatCount(0);
animation.setFillAfter(true);
animation.setFillBefore(true);
animation.setFillEnabled(true);
startAnimation(animation);
animation.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation arg0)
{
QuickActionButton.this.setClickable(false);
}
#Override
public void onAnimationEnd(Animation arg0)
{
QuickActionButton.this.setClickable(true);
}
#Override
public void onAnimationRepeat(Animation arg0)
{
}
});
}
});
popup.setTouchable(false);
popup.showAsDropDown(this, 0, -dpToPx(350));
// Rotate the icon
RotateAnimation animation = new RotateAnimation(0.0f, -45.0f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
animation.setDuration(300);
animation.setRepeatCount(0);
animation.setFillAfter(true);
animation.setFillBefore(true);
animation.setFillEnabled(true);
startAnimation(animation);
animation.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation arg0)
{
popup.setTouchable(false);
}
#Override
public void onAnimationEnd(Animation arg0)
{
popup.setTouchable(true);
}
#Override
public void onAnimationRepeat(Animation arg0)
{
}
});
The problem now is that when I scroll the view and press the quick action button, the animation starts and is reseted after a few miliseconds.
Is that a normal behaviour because of the Popup ?
Finally, I've found a dirty way to solve this issue:
handler.postDelayed(new Runnable() {
#Override
public void run()
{
if (!popup.isShowing())
{
handler.postDelayed(this, 100);
return;
}
// Rotate the icon
RotateAnimation animation = new RotateAnimation(0.0f, -45.0f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
animation.setDuration(300);
animation.setRepeatCount(0);
animation.setFillAfter(true);
animation.setFillBefore(true);
animation.setFillEnabled(true);
startAnimation(animation);
animation.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation arg0)
{
popup.setTouchable(false);
}
#Override
public void onAnimationEnd(Animation arg0)
{
popup.setTouchable(true);
}
#Override
public void onAnimationRepeat(Animation arg0)
{
}
});
}
}, 100);
It's just a delayed until the popup has been completely shown.
I'm trying to use the new property animations to play layout animations when I'm toggling between two components in one container.
I simply call this code:
public void onClick(View v) {
if (componentOneVisible) {
componentOne.setVisibility(View.GONE);
componentTwo.setVisibility(View.VISIBLE);
} else {
componentTwo.setVisibility(View.GONE);
componentOne.setVisibility(View.VISIBLE);
}
componentOneVisible = !componentOneVisible;
}
My animations are set as following:
final ObjectAnimator testIn = ObjectAnimator.ofPropertyValuesHolder(
componentContainer,
PropertyValuesHolder.ofFloat("scaleX", 0, 1f),
PropertyValuesHolder.ofFloat("scaleY", 0, 1f),
PropertyValuesHolder.ofFloat("alpha", 0f, 1f));
testIn.addListener(new AnimatorListenerAdapter() {
public void onAnimationEnd(Animator anim) {
View view = (View) ((ObjectAnimator) anim).getTarget();
view.setScaleX(1f);
view.setScaleY(1f);
view.setAlpha(1f);
}
});
testIn.setDuration(3000);
final ObjectAnimator testOut = ObjectAnimator.ofPropertyValuesHolder(
componentContainer,
PropertyValuesHolder.ofFloat("scaleX", 1f, 0),
PropertyValuesHolder.ofFloat("scaleY", 1f, 0),
PropertyValuesHolder.ofFloat("alpha", 1, 0f));
testOut.setDuration(3000);
testOut.addListener(new AnimatorListenerAdapter() {
public void onAnimationEnd(Animator anim) {
View view = (View) ((ObjectAnimator) anim).getTarget();
view.setScaleX(0f);
view.setScaleY(0f);
view.setAlpha(0f);
}
});
mTransitioner.setAnimator(LayoutTransition.APPEARING, testIn);
mTransitioner.setAnimator(LayoutTransition.DISAPPEARING, testOut);
mTransitioner.setDuration(5000);
mTransitioner.setDuration(LayoutTransition.APPEARING, 3000);
mTransitioner.setDuration(LayoutTransition.DISAPPEARING, 3000);
For some reason only the appearing animation is played when the components are switched. What I'm hoping to see is to first see disappearing animation and then appearing animation.
I also call this code to set the transitioner
mTransitioner = new LayoutTransition();
componentContainer.setLayoutTransition(mTransitioner);
Any ideas?