show and hide a view with animation

ViewAnimation –

We can use the view animation system to perform tweened animation on Views. Tween animation calculates the animation with information such as the start point, end point, size, rotation, and other common aspects of an animation.

A sequence of animation instructions defines the tween animation, defined by either XML or Android code. The animation instructions define the transformations that we want to occur, when they will occur, and how long they should take to apply.

Show and hide a view- it is an important part of the application. Many of the cases we want to show and hide a view with user visibility, it is attractive part of visibility, so we need to add an animation to view that render on hiding and showing.

we can take an example- we want to show and hide a view when RecyclerView is scrolling (look once on view part).

How will we do?

Add our RecyclerView with listeners such as OnScrollListener

 RecyclerView.OnScrollListener listener = new RecyclerView.OnScrollListener(){
        public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
            if (newState == RecyclerView.TOUCH_SLOP_PAGING || newState != RecyclerView.SCROLL_STATE_IDLE) {
                hideViews();
            } else {
                mBinding.listCategoryContainer.animate().alpha(1.0f).translationY(0).setInterpolator(new DecelerateInterpolator(1)).start();
                showViews();
            }
        }
    };

RecyclerView.OnScrollListener listener = new RecyclerView.OnScrollListener(){

public void onScrollStateChanged(RecyclerView recyclerView, int newState) {

if (newState == RecyclerView.TOUCH_SLOP_PAGING || newState != RecyclerView.SCROLL_STATE_IDLE) {

hideViews();

} else {

mBinding.listCategoryContainer.animate().alpha(1.0f).translationY(0).setInterpolator(new DecelerateInterpolator(1)).start();

showViews();

}

};

recyclerView.addOnScrollListener(listner);

1	recyclerView.addOnScrollListener(listner);

add animation showView animation

 private void showViews() {
        // TODO uncomment this Hide Footer in android when Scrolling
        mBinding.categoryToolBar.animate().alpha(1.0f).translationY(0).setInterpolator(new DecelerateInterpolator(1.4f)).setListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {
                mBinding.categoryToolBar.setVisibility(View.VISIBLE);
            }
            @Override
            public void onAnimationEnd(Animator animation) {
                mBinding.categoryToolBar.setVisibility(View.VISIBLE);
            }
            @Override
            public void onAnimationCancel(Animator animation) {
            }
            @Override
            public void onAnimationRepeat(Animator animation) {
            }
        });
    }

private void showViews() {

// TODO uncomment this Hide Footer in android when Scrolling

mBinding.categoryToolBar.animate().alpha(1.0f).translationY(0).setInterpolator(new DecelerateInterpolator(1.4f)).setListener(new Animator.AnimatorListener() {

@Override

public void onAnimationStart(Animator animation) {

mBinding.categoryToolBar.setVisibility(View.VISIBLE);

}

@Override

public void onAnimationEnd(Animator animation) {

mBinding.categoryToolBar.setVisibility(View.VISIBLE);

}

@Override

public void onAnimationCancel(Animator animation) {

}

@Override

public void onAnimationRepeat(Animator animation) {

}

});

}

and HideViewAnimation-

 private void hideViews() {
        // TODO (+mToolbar)  plus means  2 view forward ho jaye or not visible to user
        mBinding.categoryToolBar.animate().alpha(0f).translationY(+mBinding.categoryToolBar.getHeight()).setInterpolator(new AccelerateInterpolator(1.4f)).setListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {
            }
            @Override
            public void onAnimationEnd(Animator animation) {
                mBinding.categoryToolBar.setVisibility(View.GONE);
            }
            @Override
            public void onAnimationCancel(Animator animation) {
            }
            @Override
            public void onAnimationRepeat(Animator animation) {
            }
        });
    }

private void hideViews() {

// TODO (+mToolbar) plus means 2 view forward ho jaye or not visible to user

mBinding.categoryToolBar.animate().alpha(0f).translationY(+mBinding.categoryToolBar.getHeight()).setInterpolator(new AccelerateInterpolator(1.4f)).setListener(new Animator.AnimatorListener() {

@Override

public void onAnimationStart(Animator animation) {

}

@Override

public void onAnimationEnd(Animator animation) {

mBinding.categoryToolBar.setVisibility(View.GONE);

}

@Override

public void onAnimationCancel(Animator animation) {

}

@Override

public void onAnimationRepeat(Animator animation) {

}

});

}

How it looks-

References: developer.android.com

ashwini gupta

7 Oct, 2017
Created by - ashwini gupta

. . .

2 comments

Sathish Valleru 5 years ago

how about hide view completely when we scroll up? can you share that logic

Sathish Valleru 5 years ago
is it possible hide the view completely when we scroll up?

Reply

show and hide a view with animation

ViewAnimation –

Leave a Comment Cancel Reply

2 comments

Message Sent!