Start with the final rendering (the image is not very clear):

The top ad uses ConvenientBanner, which has little to do with this article. Only show the effect.

In fact, we use NestedScrollView to achieve the above effect. There are several problems when nesting viewpagers with NestedScrollView:

• 1. Fragment s in viewpager are not displayed
• 2. Dragging the ViewPager up and down cannot scroll vertically

1. Fragment s in viewpager are not displayed

Set the android:fillViewport="true" attribute to ScrollView in xml. This allows the content in the ViewPager to be displayed.
As the name implies, this property allows components in NestedScrollView to fill it.

<android.support.v4.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fillViewport="true">

            <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@color/com_bg_gray_eeeeee"

                android:descendantFocusability="blocksDescendants"
                android:orientation="vertical">

                <com.bigkoo.convenientbanner.ConvenientBanner
                    android:id="@+id/acty_main_cbanner"
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/comm_dim_150" />

                <android.support.design.widget.TabLayout
                    android:id="@+id/acty_main_tab"
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/comm_dim_40"
                    android:layout_alignParentBottom="true"
                    app:tabBackground="@drawable/selector_tab_bg"
                    app:tabIndicatorHeight="0dp"
                    app:tabSelectedTextColor="@color/com_tv_white_ffffff"
                    app:tabTextAppearance="@style/tab_txtSize"
                    app:tabTextColor="@color/com_tv_black_333333" />

                <android.support.v4.view.ViewPager
                    android:id="@+id/acty_main_vp"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />

            </LinearLayout>


        </android.support.v4.widget.NestedScrollView>

2. Dragging the ViewPager up and down cannot scroll vertically

The default ViewPager used at the beginning can't slide up and down. Then, by finding someone else's solution, NestedScrollView nesting ViewPager, if the fragment height in ViewPager is too long, it will be found that it can't slide. You need to customize ViewPager and measure the height of ViewPager

public class WrapContentHeightViewPager extends ViewPager {
    public WrapContentHeightViewPager(Context context) {
        super(context);  
    }  

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

    @Override  
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);  

        int height = 0;  
        for (int i = 0; i < getChildCount(); i++) {  
            View child = getChildAt(i);
            child.measure(widthMeasureSpec, MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED));  
            int h = child.getMeasuredHeight();  
            if (h > height) height = h;  
        }  
        heightMeasureSpec = MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY);  
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);  
    }  
}  

Then replace the ViewPager of the xml layout with our custom ViewPager

        <android.support.v4.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fillViewport="true">

            <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@color/com_bg_gray_eeeeee"

                android:descendantFocusability="blocksDescendants"
                android:orientation="vertical">

                <com.bigkoo.convenientbanner.ConvenientBanner
                    android:id="@+id/acty_main_cbanner"
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/comm_dim_150" />

                <android.support.design.widget.TabLayout
                    android:id="@+id/acty_main_tab"
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/comm_dim_40"
                    android:layout_alignParentBottom="true"
                    app:tabBackground="@drawable/selector_tab_bg"
                    app:tabIndicatorHeight="0dp"
                    app:tabSelectedTextColor="@color/com_tv_white_ffffff"
                    app:tabTextAppearance="@style/tab_txtSize"
                    app:tabTextColor="@color/com_tv_black_333333" />

                <com.aoben.qproj.widget.WrapContentHeightViewPager
                    android:id="@+id/acty_main_vp"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />

            </LinearLayout>


        </android.support.v4.widget.NestedScrollView>

Reference article:

[Android learning notes] NestedScrollView cannot slide after nesting ViewPager

NestedScrollView nested ViewPager

ScrollView nesting ViewPager,ViewPager content does not display problems