FAB translate animation not working

Question

I am trying to hide a Floating Action Button, when RecyclerView is scrolling, with animation such that FAB must move downwards from its actual position with translate animation. Same way when showing FAB I'm showing with animation such that it appears from bottom to its actual position. The showing of FAB from bottom to actual position is working fine. But hiding the FAB is not working. I'm also using alpha in my animation for "fade-in" and "fade-out" effect.

 // fab_show.xml <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:fillAfter="true"> <!--Move--> <translate android:duration="1000" android:fromXDelta="0%" android:fromYDelta="0%" android:interpolator="@android:anim/linear_interpolator" android:toXDelta="0%" android:toYDelta="200%"/> <!--Fade In--> <alpha android:duration="2000" android:fromAlpha="1.0" android:interpolator="@android:anim/decelerate_interpolator" android:toAlpha="0.0"/> </set> 

 //fab_hide.xml <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:fillAfter="true"> <!--Move--> <translate android:duration="1000" android:fromXDelta="0%" android:fromYDelta="200%" android:interpolator="@android:anim/linear_interpolator" android:toXDelta="0%" android:toYDelta="0%"/> <!--Fade Out--> <alpha android:duration="2000" android:fromAlpha="0.0" android:interpolator="@android:anim/accelerate_interpolator" android:toAlpha="1.0"/> </set> 

 public class MainActivity extends AppCompatActivity { FloatingActionButton fab; Animation show_fab; Animation hide_fab; private List<Movie> movieList = new ArrayList<>(); MyAdapter mAdapter; RecyclerView recycler; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); fab = (FloatingActionButton) findViewById(R.id.fab); show_fab = AnimationUtils.loadAnimation(getApplication(), R.anim.fab_show); hide_fab = AnimationUtils.loadAnimation(getApplication(), R.anim.fab_hide); recycler = (RecyclerView)findViewById(R.id.recycler); recycler.setLayoutManager(new LinearLayoutManager(MainActivity.this, LinearLayoutManager.VERTICAL, false)); recycler.setHasFixedSize(true); mAdapter = new MyAdapter(movieList); recycler.setAdapter(mAdapter); prepareMovieData(); recycler.addOnScrollListener(new RecyclerView.OnScrollListener() { @Override public void onScrolled(RecyclerView recyclerView, int dx, int dy) { super.onScrolled(recyclerView, dx, dy); if (dy > 0 && (fab.getVisibility() == View.VISIBLE)){ //fab.hide(); fab.startAnimation(hide_fab); } else if (dy < 0 && (fab.getVisibility() != View.VISIBLE)){ //fab.show(); fab.startAnimation(show_fab); } } }); } private void prepareMovieData() { Movie movie = new Movie("Mad Max: Fury Road", "Action & Adventure", "2015"); movieList.add(movie); movie = new Movie("Inside Out", "Animation, Kids & Family", "2015"); movieList.add(movie); movie = new Movie("Star Wars: Episode VII - The Force Awakens", "Action", "2015"); movieList.add(movie); movie = new Movie("Shaun the Sheep", "Animation", "2015"); movieList.add(movie); movie = new Movie("The Martian", "Science Fiction & Fantasy", "2015"); movieList.add(movie); movie = new Movie("Mission: Impossible Rogue Nation", "Action", "2015"); movieList.add(movie); movie = new Movie("Up", "Animation", "2009"); movieList.add(movie); movie = new Movie("Star Trek", "Science Fiction", "2009"); movieList.add(movie); movie = new Movie("The LEGO Movie", "Animation", "2014"); movieList.add(movie); movie = new Movie("Iron Man", "Action & Adventure", "2008"); movieList.add(movie); movie = new Movie("Aliens", "Science Fiction", "1986"); movieList.add(movie); movie = new Movie("Chicken Run", "Animation", "2000"); movieList.add(movie); movie = new Movie("Back to the Future", "Science Fiction", "1985"); movieList.add(movie); movie = new Movie("Raiders of the Lost Ark", "Action & Adventure", "1981"); movieList.add(movie); movie = new Movie("Goldfinger", "Action & Adventure", "1965"); movieList.add(movie); movie = new Movie("Guardians of the Galaxy", "Science Fiction & Fantasy", "2014"); movieList.add(movie); mAdapter.notifyDataSetChanged(); } public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder> { private List<Movie> moviesList; public MyAdapter(List<Movie> moviesList) { this.moviesList = moviesList; } @Override public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { View itemView = LayoutInflater.from(parent.getContext()) .inflate(R.layout.movie_list_row, parent, false); return new MyViewHolder(itemView); } @Override public void onBindViewHolder(MyViewHolder holder, int position) { Movie movie = moviesList.get(position); holder.title.setText(movie.getTitle()); holder.genre.setText(movie.getGenre()); holder.year.setText(movie.getYear()); } @Override public int getItemCount() { return moviesList.size(); } public class MyViewHolder extends RecyclerView.ViewHolder { public TextView title, year, genre; public MyViewHolder(View view) { super(view); title = (TextView) view.findViewById(R.id.title); genre = (TextView) view.findViewById(R.id.genre); year = (TextView) view.findViewById(R.id.year); } } } } 

Answer 1

Try like this inside XML

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:fab="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/layout_background"
    android:orientation="vertical">

  <com.malinskiy.superrecyclerview.SuperRecyclerView
        android:id="@+id/activity_marketplace_feed"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="@dimen/dp_56"
        app:layout_empty="@layout/emptyview"
        app:mainLayoutId="@layout/layout_recyclerview_verticalscroll"
        app:recyclerClipToPadding="false"
        app:scrollbarStyle="insideOverlay" />

    <com.github.clans.fab.FloatingActionMenu
            android:id="@+id/menu"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="bottom|end"
            fab:menu_animationDelayPerItem="50"
            fab:menu_backgroundColor="#3b000000"
            fab:menu_buttonSpacing="0dp"
            fab:menu_colorNormal="@color/colorAccent"
            fab:menu_colorPressed="#FFCA3D3E"
            fab:menu_colorRipple="#99FFFFFF"
            fab:menu_fab_hide_animation="@anim/hide_to_bottom"
            fab:menu_fab_label=""
            fab:menu_fab_show_animation="@anim/show_from_bottom"
            fab:menu_fab_size="normal"
            fab:menu_icon="@drawable/fab_add"
            fab:menu_labels_colorNormal="#333333"
            fab:menu_labels_colorPressed="#444444"
            fab:menu_labels_colorRipple="#66FFFFFF"
            fab:menu_labels_cornerRadius="3dp"
            fab:menu_labels_ellipsize="none"
            fab:menu_labels_hideAnimation="@anim/fab_slide_out_to_right"
            fab:menu_labels_margin="0dp"
            fab:menu_labels_maxLines="-1"
            fab:menu_labels_padding="8dp"
            fab:menu_labels_paddingBottom="4dp"
            fab:menu_labels_paddingLeft="8dp"
            fab:menu_labels_paddingRight="8dp"
            fab:menu_labels_paddingTop="4dp"
            fab:menu_labels_position="left"
            fab:menu_labels_showAnimation="@anim/fab_slide_in_from_right"
            fab:menu_labels_showShadow="true"
            fab:menu_labels_singleLine="false"
            fab:menu_labels_style="@style/MenuLabelsStyle"
            fab:menu_labels_textColor="#FFFFFF"
            fab:menu_labels_textSize="@dimen/sp_14"
            fab:menu_openDirection="up"
            fab:menu_shadowColor="#66000000"
            fab:menu_shadowRadius="4dp"
            fab:menu_shadowXOffset="1dp"
            fab:menu_shadowYOffset="3dp"
            fab:menu_showShadow="true">

</FrameLayout>

Resource file

hide_to_bottom

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="200"
    android:fromYDelta="0"
    android:interpolator="@android:interpolator/accelerate_quint"
    android:toYDelta="30%p" />

show_from_bottom

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="300"
    android:fromYDelta="30%p"
    android:interpolator="@android:interpolator/accelerate_cubic"
    android:toYDelta="0" />

fab_slide_out_to_right

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:interpolator/accelerate_quint">
    <alpha
        android:fromAlpha="1"
        android:toAlpha="0"
        android:duration="150" />
    <translate
        android:fromXDelta="0"
        android:toXDelta="30%p"
        android:duration="200" />
</set>

fab_slide_in_from_right

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:interpolator/overshoot">
    <alpha
        android:fromAlpha="0"
        android:toAlpha="1"
        android:duration="300" />
    <translate
        android:fromXDelta="15%p"
        android:toXDelta="0"
        android:duration="200" />
</set>

Style

 <style name="MenuLabelsStyle">
        <item name="android:background">@drawable/fab_label_background</item>
        <item name="android:textColor">#000</item>
        <item name="android:textSize">14sp</item>
        <item name="android:maxLines">1</item>
        <item name="android:ellipsize">end</item>
    </style>

Inside Oncreate

@BindView(R.id.menu) FloatingActionMenu fab_menu;
fab_menu.setClosedOnTouchOutside(true);

 feedRecyclerView.setOnScrollListener(new RecyclerView.OnScrollListener(){
            @Override
            public void onScrolled(RecyclerView recyclerView, int dx, int dy){
                if (dy > 0 ||dy<0 && fab_menu.isShown())
                    fab_menu.hideMenu(true);
            }

            @Override
            public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
                if (newState == RecyclerView.SCROLL_STATE_IDLE){
                    fab_menu.showMenu(true);
                }
                super.onScrollStateChanged(recyclerView, newState);
            }
        });

Answer 2

I used this link and its working good.

 recycler.addOnScrollListener(new RecyclerView.OnScrollListener() { @Override public void onScrolled(RecyclerView recyclerView, int dx, int dy) { if (dy > 0 ||dy<0 && fab.isShown()) { hideFab(); } } @Override public void onScrollStateChanged(RecyclerView recyclerView, int newState) { if (newState == RecyclerView.SCROLL_STATE_IDLE) { showFab(); } super.onScrollStateChanged(recyclerView, newState); } }); 

 private void hideFab() { if (isFabShowing) { isFabShowing = false; if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.ICE_CREAM_SANDWICH) { final Point point = new Point(); getWindow().getWindowManager().getDefaultDisplay().getSize(point); final float translation = fab.getY() - point.y; fab.animate().translationYBy(-translation).start(); } else { Animation animation = AnimationUtils.makeOutAnimation(MainActivity.this, true); animation.setFillAfter(true); animation.setAnimationListener(new Animation.AnimationListener() { @Override public void onAnimationStart(Animation animation) { } @Override public void onAnimationEnd(Animation animation) { fab.setClickable(false); } @Override public void onAnimationRepeat(Animation animation) { } }); fab.startAnimation(animation); } } } private void showFab() { if (!isFabShowing) { isFabShowing = true; if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.ICE_CREAM_SANDWICH) { fab.animate().translationY(0).start(); } else { Animation animation = AnimationUtils.makeInAnimation(MainActivity.this, false); animation.setFillAfter(true); animation.setAnimationListener(new Animation.AnimationListener() { @Override public void onAnimationStart(Animation animation) { } @Override public void onAnimationEnd(Animation animation) { fab.setClickable(true); } @Override public void onAnimationRepeat(Animation animation) { } }); fab.startAnimation(animation); } } }