Vertically Scrollable SlidingUpPanel (like ScrollView) - feature request/how to

[electricsunny]

Hi,

Firstly, thanks to all contributors for an awesome library, very much appreciated.

I have the need to make the content in the Sliding Up Panel vertically scrollable, that is, when there is too much content to fit in the maximum height of the panel, it is scrollable, just like ScrollView. I have experimented with ScrollView, but am having no joy, I presume that it is not that easy.

Is anyone able to advise, or provide guidance, or an example as to how to implement this feature? It is becoming more and more common e.g. Etsy app...

many thanks

[electricsunny]

Others are trying to implement the same feature: http://stackoverflow.com/questions/19619964/transfer-scroll-event-from-sliding-view-to-scrollview-sliding-panel-with-scrol

[aegis1980]

Hey,
I was trying to get a ScrollView (and ListView) working a couple of days ago. I asked the question here #112. The solutions the guys provided worked a treat. Changing the bottom padding dynamically in the onPanelSlide() produced a bit of jitter in the otherwise smooth sliding panel so I only change it between anchored and expanded state, mind you I have some transparency in my panel and some stuff behind.
Oh, and I set the draggable view in the Sliding panel layout to my header (see diagrams in my question).
Hope this gets you somewhere.

[kjones]

I had the same need and solved it by resizing my ScrollView in response to PanelSlideListener events:

private void resizeScrollView(final float slideOffset) {
    // The scrollViewHeight calculation would need to change based on what views are
    // in the sliding panel. The calculation below works because the layout has
    // 2 views. 1) The row with the drag view which is layout.getPanelHeight() high.
    // 2) The ScrollView.
    logger.d("resizeScrollView - height %d  panelHeight %d  slideOffset %f", slidingPanel.getHeight(), slidingPanel.getPanelHeight(), slideOffset);
    final int scrollViewHeight = (int) ((slidingPanel.getHeight() - slidingPanel.getPanelHeight()) * (1.0f - slideOffset));
    final ViewGroup.LayoutParams currentLayoutParams = scrollView.getLayoutParams();
    currentLayoutParams.height = scrollViewHeight;
    scrollView.setLayoutParams(currentLayoutParams);
}

You would call this from your PanelSlideListener event handler. e.g.

slidingPanel.setPanelSlideListener(new SlidingUpPanelLayout.PanelSlideListener() {
    @Override
    public void onPanelSlide(View panel, float slideOffset) {
        resizeScrollView(slideOffset);
    }

    @Override
    public void onPanelCollapsed(View panel) {
    }

    @Override
    public void onPanelExpanded(View panel) {
        resizeScrollView(0.0f);
    }

    @Override
    public void onPanelAnchored(View panel) {
        resizeScrollView(ANCHOR_POINT);
    }
});

[artworkad]

@kjpublic01 doing the resize in onPanelSlide will cause lagging on older devices. I tested on galaxy II and on nexus 4. While nexus 4 was fine, gII was not smooth at all.

@aegis1980 your solution is fine but it has one disadvantage. The slide between anchored and expanded state will reveal a transparent gap at the bottom until the view is expanded. Any thoughts on this?

[mpkuth]

Piggybacking off of the other answers... The following is working well for me. No jitter, just put in a check to ensure that bottom padding only gets set when it needs to. The single reset is enough to ensure that sliding up from the anchor point doesn't leave a gap.

@Override
public void onPanelSlide(View panel, float slideOffset) {
    if (panel.getPaddingBottom() != 0) {
        panel.setPadding(panel.getPaddingLeft(),
                panel.getPaddingTop(), panel.getPaddingRight(), 0);
    }
}

@Override
public void onPanelAnchored(View panel) {
    int paddingPx = (int) getPixels(TypedValue.COMPLEX_UNIT_DIP, headerHeightDp);
    panel.setPadding(panel.getPaddingLeft(),
            panel.getPaddingTop(), panel.getPaddingRight(), paddingPx);
}

public static float getPixels(int unit, float size) {
    DisplayMetrics metrics = Resources.getSystem().getDisplayMetrics();
    return TypedValue.applyDimension(unit, size, metrics);
}

[NeoRaidenX]

@mpkuth I have a question about the answer you gave. How can I get the value for "headerHeightDp" parameter you send to getPixels method?
Sorry about that but this is my first android project and I'm still learning, in other words I'm newby as an Android Developer. Thank you.

[mpkuth]

@NeoRaidenX From #112 (which also has a few pictures that help).

A suggestion is to programmatically add in a bottom margin equal to the gap above the panel in the anchored state, when the panel is anchored. In the anchored state, the bottom panel height is equal to that of the fully expanded panel height, which is why you're not seeing your footer view.

[jonneymendoza]

What was the proper fix for this? sounds like there are different sorts of ways to do it? some not so efficent etc?

[tokudu]

I'm gonna try to add proper support for scrollable views in the next release of the library 3.1.0

[elikohen]

Hello! I already used a fork from your library that does exactly that: https://github.com/arbuzz/AndroidSlidingUpPanel-ScrollView
I was getting back to your repo to see if you already added it too, maybe you can take a look on it. If you already know about that fork, you can just delete this message :D

Thanks for the great job btw!

[jjhesk]

@elikohen what is lines and options did u add? any attr declarations?

[elikohen]

@jjhesk that is not my repo, I just found it one year ago when I was building an android app that required that. What worked for me (as a client) is that it adds a method called setScrollableView that 'fixes' the problem with scrollviews.
Anyway that fork is based on this other fork:
https://github.com/dlukashev/AndroidSlidingUpPanel

And here you can see dlukashev blog post about the fix:
http://android.amberfog.com/?p=915

I hope that helps!

[qbait]

@tokudu when can we expect version 3.1.0 with ScrollView support?

[KingWu]

Face the same issue, Can support it now?

[tokudu]

Work in progress in https://github.com/umano/AndroidSlidingUpPanel/tree/3.1

[KingWu]

Awesome. Will update for Gradle?

[tokudu]

Fixed in master. Provide umanoScrollableView attribute to indicate your scrollable child. Gradle will be updated soon