Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android Floating Action Button animation

All I want is a simple animation, when the scrollview moves. I have tried some solution, but none of them worked perfectly/smoothly.If I scroll, I want to hide the fab with slide down animation and if nothing happens after 2 sec the fab shows with slide up animation. I know it is a basic question and I appreciate your patientence.

Thanks in advance.

final ScrollView scroll = (ScrollView) v.findViewById(R.id.sw);
scroll.setOnTouchListener(new View.OnTouchListener()){
   @Override
   public boolean onTouch(View v, Motionevent event){
      int action = event.getAction();
      if (action == Motionevent.ACTION_MOVE){

      //slide down animation here

      }else{
        new Handler().postDelayed(new Runnable(){
          public void run(){

          //slide up animation here

          }
        }, 2000);
      }
    return false;
  }
});
like image 494
t0thkr1s Avatar asked Aug 15 '15 09:08

t0thkr1s


1 Answers

Here's a tutorial , how to use the FAB button with scroll animation.

Basically:

  1. Use the v22.2.1 support v4 library, there is a show() and hide() method that performs the fade-in and fade-out animations for Floating Action Buttons
  2. You must place your ScrollView and the FAB inside a CoordinatorLayout.
  3. Set the FAB layout_anchor to the ScrollView's id
  4. Create a class and extend the FloatingActionButton.Behavior class and set it to the FAB's layout_behavior attribute in the layout xml
  5. Override your Behavior class onStartNestedScroll to check the is vertical
  6. Override your Behavior class onStopNestedScroll to call the child's(FAB) parameter hide() method on downscroll and postDelay a Runnable to show the FAB after 2 seconds

layout like:

<android.support.design.widget.CoordinatorLayout
... >
    <ScrollView
    android:id="@+id/myList"
    ...
    />
        <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        app:layout_anchor="@id/myList"
        app:layout_behavior="package.CustomScrollAwareBehavior"
        ...
        />
    </android.support.design.widget.CoordinatorLayout>

I suggest, to also create a Handler into the Behavior class to call the FAB's show() method. Behavior class like (not tested):

public class CustomScrollAwareBehavior extends FloatingActionButton.Behavior{

private Handler handler = new Handler();
private FloatingActionButton fab;

public CustomScrollAwareBehavior(Context context, AttributeSet attrs) {
    super();
}

@Override
public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout,
                                   FloatingActionButton child, View directTargetChild, View target, int nestedScrollAxes) {
    fab = child;
    return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL ||
            super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target,
                    nestedScrollAxes);
}



Runnable showRunnable = new Runnable() {
    @Override
    public void run() {
        fab.show();
    }
};


@Override
public void onNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child,
                           View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) {
    super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed,
            dyUnconsumed);
     if (dyConsumed > 0 && child.getVisibility() == View.VISIBLE) {
        handler.removeCallbacks(showRunnable);
        handler.postDelayed(showRunnable,2000);
        child.hide();
    } 
    }
}
like image 71
jkyree Avatar answered Oct 05 '22 12:10

jkyree