Floating Action Button animation Issue

Question

I was playing around with the fab in the support design library when I ran inti this issue. I replaced the onCreate method in the default Blank Activity template in Android Studio, this is what it looks like:

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.animation.TranslateAnimation;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        final FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                TranslateAnimation anim = new TranslateAnimation(0, -500, 0, -500);
                anim.setDuration(1000);
                anim.setFillEnabled(true);
                anim.setFillAfter(true);
                fab.startAnimation(anim);
            }
        });
        fab.setOnLongClickListener(new View.OnLongClickListener() {
            @Override
            public boolean onLongClick(View view) {
                TranslateAnimation anim = new TranslateAnimation(0, -500, 0, -500);
                anim.setDuration(1000);
                anim.setFillEnabled(true);
                anim.setFillAfter(true);
                fab.startAnimation(anim);
                return true;
            }
        });
    }
}

So basically, I added an onClickListener and an onLongClickListener that translate the fab by 500idks, but the problem is that it doesn't work like it's supposed to.

When I click on it normally nothing happens, which is weird to start with. Here's a video of it happening.

When I longPress on it, it animates like I should, but only if I keep pressing, and whenever I lift my finger it goes back to the original position regardless of whether the animation is complete or not even though I set setFillEnabled(true) and setFillAfter(true).

Here are videos of what happens when I lift my finger and when I leave my finger on the screen till the end and everything.

Why is this happening?

Answer 1

I don't know why you get this animation issue, but it looks like a bug. I checked your code and it works on my Android 6.0, but it doesn't work on Android Emulator with Android 4.4 on board (but my issue a little bit different then yours).

So my assumption it's a bug, because TranslateAnimation had (and maybe still has) some bugs like this one, two.

And my suggestion how you can avoid it is next. Use ViewPropertyAnimator to animate your views. And your code in this case should look like:

    fab.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            fab.animate()
                    .translationX(-500)
                    .translationY(-500)
                    .setDuration(1000)
                    .start();
        }
    });
    fab.setOnLongClickListener(new View.OnLongClickListener() {
        @Override
        public boolean onLongClick(View view) {
            fab.animate()
                    .translationX(-500)
                    .translationY(-500)
                    .setDuration(1000)
                    .start();
            return true;
        }
    });

I checked it on Android Emulator with Android 4.3, 4.4, 5.0, 6.0 and it works fine.

Update

Found solution for you. So you can use ViewPropertyAnimatorCompat from support library and your code would be similar to:

fab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
            ViewCompat.animate(fab)
                    .translationX(-500)
                    .translationY(-500)
                    .setDuration(1000)
                    .start();
    }
});
fab.setOnLongClickListener(new View.OnLongClickListener() {
    @Override
    public boolean onLongClick(View view) {
            ViewCompat.animate(fab)
                    .translationX(-500)
                    .translationY(-500)
                    .setDuration(1000)
                    .start();
        return true;
    }
});