Android Sliding Panel with Scrollview

Question

I'm trying to use a Sliding Panel from the link here and I'm facing the problem shown in the image:

My idea is to have custom content when the user swipes the bottom menu up, and have the possibility to scroll this content. But when the panel goes to anchored state, it seems like the content height is not set correctly, because some piece of the content doesn`t show up.

I downloaded the sample in the link above, and the problem already occurs. i made a minor change, adding the scrollview.

Am I missing something? any help would be much appreciated.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".DemoActivity" >

<com.sothree.slidinguppanel.SlidingUpPanelLayout
    xmlns:sothree="http://schemas.android.com/apk/res-auto"
    android:id="@+id/sliding_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="bottom"
    sothree:collapsedHeight="68dp"
    sothree:dragView="@+id/name"
    sothree:shadowHeight="4dp" >

    <TextView
        android:id="@+id/main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clickable="true"
        android:focusable="false"
        android:focusableInTouchMode="true"
        android:gravity="center"
        android:text="Main Content"
        android:textSize="16sp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#eee"
        android:clickable="true"
        android:focusable="false"
        android:orientation="vertical" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="68dp"
            android:orientation="horizontal" >

            <TextView
                android:id="@+id/name"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center_vertical"
                android:paddingLeft="10dp"
                android:textSize="14sp" />

            <Button
                android:id="@+id/follow"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:gravity="center_vertical|right"
                android:paddingLeft="10dp"
                android:paddingRight="10dp"
                android:textSize="14sp" />
        </LinearLayout>

        <ScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent" >

            <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="wrap_content"
                    android:background="@drawable/graphic" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:text="teste" />

                <ImageView
                    android:id="@+id/image"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@drawable/graphic" />

                <ImageView
                    android:id="@+id/image"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@drawable/graphic" />
            </LinearLayout>
        </ScrollView>
    </LinearLayout>
</com.sothree.slidinguppanel.SlidingUpPanelLayout>
</RelativeLayout>

Answer 1

This problem occurs because the sliding view is fully measured and then placed partially off the screen. As you slide the view up, its size doesn't change, just its position. This means that the ScrollView isn't fully visible when anchored.

The solution I came up with is to use the PanelSlideListener events to resize the ScrollView as the position of the sliding view changes. Just give your ScrollView an ID of "@+id/scroll_view" and use this modified section of the onCreate() code below from the AndroidSlidingUpPanel demo app.

final float anchorPoint = 0.5f;
final ScrollView scrollView = (ScrollView) findViewById(R.id.scroll_view);
final SlidingUpPanelLayout layout = (SlidingUpPanelLayout) findViewById(R.id.sliding_layout);
layout.setAnchorPoint(anchorPoint);
layout.setPanelSlideListener(new PanelSlideListener() {
    @Override
    public void onPanelSlide(View panel, float slideOffset) {
        Log.i(TAG, "onPanelSlide, offset " + slideOffset);
        setActionBarTranslation(layout.getCurrentParalaxOffset());
        resizeScrollView(panel, slideOffset);
    }

    @Override
    public void onPanelExpanded(View panel) {
        Log.i(TAG, "onPanelExpanded");
        resizeScrollView(panel, 0.0f);
    }

    @Override
    public void onPanelCollapsed(View panel) {
        Log.i(TAG, "onPanelCollapsed");
    }

    @Override
    public void onPanelAnchored(View panel) {
        Log.i(TAG, "onPanelAnchored");
        resizeScrollView(panel, anchorPoint);
    }

    private void resizeScrollView(View panel, float slideOffset) {
        // The scrollViewHeight calculation would need to change based on
        // what views you have in your sliding panel. The calculation below
        // works because your layout has 2 child views.
        // 1) The row with the drag view which is layout.getPanelHeight() high.
        // 2) The ScrollView.
        final int scrollViewHeight =
            (int) ((panel.getHeight() - layout.getPanelHeight()) * (1.0f - slideOffset));
        scrollView.setLayoutParams(
            new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,
                                          scrollViewHeight));
    }
});