Transfer scroll event from sliding view to ScrollView - Sliding panel with ScrollView like Google Maps

Jakob picture Jakob · Oct 27, 2013 · Viewed 8.1k times · Source

So I'm using the Sliding Up Panel Library in my application, and I'm trying to implement a ScrollView inside the sliding panel. Since both the sliding panel and the ScrollView are controlled by vertical scrolls, this is causing me some issues.

I've partially got it to work by switching the panel's dragview once the panel has been slid all the way up, and when the ScrollView has been scrolled to the top.

enter image description here

The problem I'm facing now is that, when scrolling the panel to top the scrolling doesn't transfer to the ScrollView, like it does in Google Maps. Little hard to explain, so look at the video here: www.youtube.com/watch?v=9MUsmQzusX8&feature=youtu.be

This is the panel slide listener:

...
slidePanel.setEnableDragViewTouchEvents(true);
slidePanel.setPanelSlideListener(new SlidingUpPanelLayout.PanelSlideListener() {

    @Override
    public void onPanelSlide(View panel, float slideOffset) {

            // Change the dragview to panelheader when panel is fully expanded
            // I'm doing this here instead of in onPanelExpanded, 
            // because onPanelExpanded first gets called once scroll 
            // is released. 
            if (slideOffset <= 0) {
                slidePanel.setDragView(layoutPanelTop);
            } 

            // If the panel is not fully expanded set the whole 
            // panel as dragview
            else if(slideOffset > 0) {
                slidePanel.setDragView(layoutPanel);
            }
        }
    }

    @Override
    public void onPanelExpanded(View panel) {
        // layout.setDragView(layoutPanelTop);

        panelCollapsed = false;
        panelExpanded = true;
        panelAnchored = false;

        Log.v("TAG, "panelExpanded");

    }

    @Override
    public void onPanelCollapsed(View panel) {
        slidePanel.setDragView(layoutPanel);

        panelCollapsed = true;
        panelExpanded = false;
        panelAnchored = false;

        Log.v(TAG, "panelCollapsed");
    }

    @Override
    public void onPanelAnchored(View panel) {
        slidePanel.setDragView(layoutPanel);

        panelCollapsed = false;
        panelExpanded = false;
        panelAnchored = true;

        Log.v(TAG, "panelAnchored");
    }
});

And I have managed to create a fully working scrollview listener by extending scrollview, which can detect scroll direction and onDown and onUp motion events:

private boolean atScrollViewTop = false;

@Override
public void onScrollChanged(int scrollY) {
    scrollY = Math.min(mMaxScrollY, scrollY);
    if (scrollY <= 0) {
        Log.v("myTag", "You at scrollview top");
        atScrollViewTop = true;

    } else {
        atScrollViewTop = false;
    }
    mScrollSettleHandler.onScroll(scrollY);

    switch (mState) {
        case STATE_SCROLL_UP:
            if (panelExpanded && atScrollViewTop) {
                slidePanel.setDragView(layoutPanel);
            } else {
                slidePanel.setDragView(layoutPanelTop);
            }
            Log.v("myTag", "scrolling up");
            break;
        case STATE_SCROLL_DOWN:
            slidePanel.setDragView(layoutPanelTop);
            Log.v("myTag", "scrolling down");
            break;
    }
}

@Override
public void onDownMotionEvent() {

}

@Override
public void onUpOrCancelMotionEvent() {

}

I've been struggling with this the last two days.. So really hope on some pointer at least. Thanks very much in advance. Regards Jakob Harteg.

Answer

Fabrizio Billeci picture Fabrizio Billeci · Nov 13, 2013

Sorry for delay.. i find the solution.

image = (ImageView) findViewById(R.id.image); //Layout to slide  

SlidingUpPanelLayout layout = (SlidingUpPanelLayout)
findViewById(R.id.sliding_layout); 

layout.setDragView(image); 
/*This method sets the layout to be used only
 in the sliding panel, while all layouts children
 are able to perform other functions such as scrolling */  

And this is the layout

<..SlidingUpPanelLayout
    android:id="@+id/sliding_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:gravity="center" />

        <LinearLayout
            android:id="@+id/slide_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <ImageView 
                android:id="@+id/image"
                android:layout_width="match_parent"
                android:layout_height="35dp"
                android:background="@drawable/ec_image"/>

            <!-- FINALLY SCROLLVIEW -->
            <ScrollView .... />

Hope it is useful.