How to make whole screen scrollable in Viewpager Fragment

Question

I have grid view and Listview(including pagination) in scrollview.

This is resulting individual scroll but i need whole screen scrollable with pagination. i tried to use NestedListView & ExpandableHeightListView but not working properly.

Any suggestion would be grateful.

enter codXML::
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.SwipeRefreshLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/swipeContainer"
android:layout_width="match_parent"
android:layout_height="match_parent">

<ScrollView
    android:id="@+id/scrollView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:clipToPadding="false"
    android:fillViewport="true"
    android:paddingBottom="75dp">

    <RelativeLayout
        android:id="@+id/root_rl"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:descendantFocusability="beforeDescendants"
        android:focusable="true"
        android:focusableInTouchMode="true">

        <TextView
            android:id="@+id/all_tpcs_heading"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/bg_horizantal_magzine_listview"
            android:padding="@dimen/ten_dp"
            android:text="all topics"
            android:textAllCaps="true"
            android:textSize="14sp" />

        <com.healthyliving.live.utils.ExpandableHeightGridView
            android:id="@+id/topicsGrid"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/all_tpcs_heading"
            android:layout_marginTop="@dimen/six_dp"
            android:clipChildren="true"
            android:gravity="center"
            android:horizontalSpacing="@dimen/six_dp"
            android:isScrollContainer="false"
            android:numColumns="2"
            android:stretchMode="none"
            android:verticalSpacing="@dimen/six_dp" />

        <TextView
            android:id="@+id/rcnt_artcls_heading"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/topicsGrid"
            android:layout_marginTop="@dimen/six_dp"
            android:paddingBottom="@dimen/ten_dp"
            android:paddingLeft="@dimen/ten_dp"
            android:paddingRight="@dimen/ten_dp"
            android:paddingTop="@dimen/sixteen_dp"
            android:text="Recent articles"
            android:textAllCaps="true"
            android:textSize="14sp" />

        <ListView
            android:id="@+id/recent_articles_listview"
            android:layout_width="match_parent"
            android:layout_height="fill_parent"
            android:layout_below="@+id/rcnt_artcls_heading"
            android:dividerHeight="@dimen/list_view_divider" />

        <ProgressBar
            android:layout_centerHorizontal="true"
            android:layout_alignParentBottom="true"
            android:id="@+id/load_progreebar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:indeterminateDrawable="@drawable/my_progress_indeterminate"
            android:visibility="gone" />
    </RelativeLayout>
</ScrollView>

Fragment::

recentArticleAdapter = new ExploreRecentArtilcesAdapter(getActivity(),      featuredArticles);
    mRecentArticles.setAdapter(recentArticleAdapter);

Answer 1

Use below given custom list and grid view instead of default ListView and GridView in your layout xml file.

Custom ListView :-

public class CustomListView extends ListView {

    public CustomListView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public CustomListView(Context context) {
        super(context);
    }

    public CustomListView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int expandSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2,
                MeasureSpec.AT_MOST);
        super.onMeasure(widthMeasureSpec, expandSpec);
    }
}

Custom GridView :-

public class CustomGridView extends GridView {

    public CustomGridView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public CustomGridView(Context context) {
        super(context);
    }

    public CustomGridView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int expandSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2,
                MeasureSpec.AT_MOST);
        super.onMeasure(widthMeasureSpec, expandSpec);
    }
}

In this approach, if you find any difficulties in vertical scroll and horizontal swipe(As you have view pager) use below custom ScrollView class instead of default scroll view in your layout xml file.

public class VerticalScrollView extends ScrollView {

    private float xDistance, yDistance, lastX, lastY;
    public VerticalScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN:
                xDistance = yDistance = 0f;
                lastX = ev.getX();
                lastY = ev.getY();
                break;
            case MotionEvent.ACTION_MOVE:
                final float curX = ev.getX();
                final float curY = ev.getY();
                xDistance += Math.abs(curX - lastX);
                yDistance += Math.abs(curY - lastY);
                lastX = curX;
                lastY = curY;
                if(xDistance > yDistance)
                    return false;
        }

        return super.onInterceptTouchEvent(ev);
    }
}

Use all these custom view classes in a same way you used com.healthyliving.live.utils.ExpandableHeightGridView custom view in your current implementation. Hope this answer will help you.