TameHog
TameHog

Reputation: 950

Animating toolbar with ListView

currently I have a Toolbar and a ListView underneath it. I would like to make my content more immersive, and I wish to do this by making the toolbar scroll up out of the screen as you scroll the ListView, like the Google Play Store's top charts view. I am using https://github.com/ksoichiro/Android-ObservableScrollView to get when the list is scrolled, but now my question is how do I translate the toolbar as I scroll the list? I don't want to use the onUpOrCancelMotionEvent() method because that is only triggered when the user releases his/her finger, no as I scroll. The code I've gotten so far:

lv.setScrollViewCallbacks(new ObservableScrollViewCallbacks() {
        int last = -1;

        @Override
        public void onScrollChanged(int i, boolean b, boolean b2) {
            if (b2) {
                if (last == -1) {
                    last = i;
                } else {
                    int dy = i - last;

                    if(toolbar.getY() > -TOOLBAR_HEIGHT && dy > 0) {
                        if(toolbar.getY() - dy < -TOOLBAR_HEIGHT)
                            toolbar.setY(-TOOLBAR_HEIGHT);
                        else
                            toolbar.setY(toolbar.getY() - dy);

                        tabs.setY(toolbar.getY() + TOOLBAR_HEIGHT);
                    }else if(toolbar.getY() < 0 && dy < 0) {
                        if (toolbar.getY() - dy > 0)
                            toolbar.setY(0);
                        else
                            toolbar.setY(toolbar.getY() - dy);

                        tabs.setY(toolbar.getY() + TOOLBAR_HEIGHT);
                    }

                    last = i;
                }
            }
        }
        ...
}

Now this works, but a white rectangle is rendered where the original toolbar was, like so: http://i.imgur.com/akY7hly.gif (it's a gif).

How I can animate the toolbar with the listview / properly translate the toolbar?

Upvotes: 0

Views: 144

Answers (1)

Elltz
Elltz

Reputation: 10869

This is what i mean, when its time for the scrolling

Animation anim = AnimationUtils.loadAnimation(
                            getBaseContext(), R.anim.push_up_out)
yourtoolbar.startAnimation(anim);

remember to set a listener on your animation and set the Visibility to GONE that is to clear screen space, but the alpha on the animation will make it gone but fill space

this is R.anim.push_up_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

<translate
    android:duration="600"
    android:fromYDelta="0"
    android:toYDelta="-100%p" />

<alpha
    android:duration="600"
    android:fromAlpha="1.0"
    android:toAlpha="0.0" />

</set>

Upvotes: 1

Related Questions