TabLayout+ViewPager inside ScrollView

Question

I'm trying to make this page scroll down but right now only the content inside ViewPager is scrolling not the whole page. I want to make the whole page scroll down from top, but right now it only scrolls the ListViews inside ViewPager.

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:id="@+id/asa"
android:scrollbars="vertical"
android:layout_height="match_parent"
android:fillViewport="true">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:custom="http://schemas.android.com/apk/res-auto"
xmlns:mstb="http://schemas.android.com/apk/res-auto"

tools:context="geob.com.testjson.Profile">
<ImageView
    android:id="@+id/cover12"
    android:src="@drawable/asc"
    android:layout_width="fill_parent"
    android:layout_height="180dp"
    android:scaleType="fitXY" />

<ImageView
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:id="@+id/ddd"
    android:src="@android:drawable/star_big_on"
    android:layout_marginBottom="62dp"

    android:layout_above="@+id/tab_layout"
    android:layout_centerHorizontal="true" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Taaran"
    android:textColor="@android:color/white"
    android:id="@+id/dpname"
    android:layout_above="@+id/dpuname"
    android:layout_alignLeft="@+id/ddd" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="\@taaran"
    android:textColor="@android:color/white"
    android:id="@+id/dpuname"
    android:layout_above="@+id/tab_layout"
    android:layout_alignLeft="@+id/ddd"
    android:layout_alignStart="@+id/ddd"
    android:layout_marginBottom="32dp" />


<!-- <android.support.design.widget.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:minHeight="?attr/actionBarSize"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    android:layout_below="@+id/cover"
    android:layout_alignLeft="@+id/cover"
    android:layout_alignStart="@+id/cover" /> -->

<!-- View pager to swipe views -->
<!-- <android.support.v4.view.ViewPager
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="fill_parent"/>  -->
<!--<org.honorato.multistatetogglebutton.MultiStateToggleButton
    android:id="@+id/mstb_multi_id"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    mstb:values="@array/planets_array"
    mstb:mstbPrimaryColor="@android:color/holo_blue_dark"
    mstb:mstbSecondaryColor="@color/gray_very_light"
    android:layout_below="@+id/cover"

     />-->
<android.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:elevation="6dp"
    android:minHeight="?attr/actionBarSize"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    android:layout_below="@+id/cover12"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true" />

<android.support.v4.view.ViewPager
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="fill_parent"
    android:layout_below="@id/tab_layout"/>

<ListView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/l12"
    android:layout_below="@+id/tab_layout"
     />
<com.ashokvarma.bottomnavigation.BottomNavigationBar
    android:layout_gravity="bottom"
    android:id="@+id/bottom_navigation_bar3"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true" />

<Button
    style="?android:attr/buttonStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Follow"
    android:id="@+id/followButton"
    android:layout_above="@+id/tab_layout"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true" />

</RelativeLayout>
</ScrollView>

Use `NestedScrollView `instead of `ScrollView`. – farhan patel Sep 11 '16 at 18:14 — farhan patel, Sep 11 '16 at 18:14

score 2 · Answer 1 · answered Dec 10 '16 at 04:12

@Override
protected void onMeasure(int widthMeasureSpec, int 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);
}

I found this piece of code that solve my problem that when using SlidingTabLayout + ViewPager within ScrollView which does not display correctly, You only need override the default onMeasure(int, int) method of class ViewPager, and then using the rewritten MyMeasuredViewPager as the following:

                <MyMeasuredViewPager 
                    android:id="@+id/pager"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"/>

@link http://hellsam.com/2015/01/29/Android%E7%9A%84%E5%9D%91%E4%B9%8BScrollView%E5%B5%8C%E5%A5%97ViewPager/

score -1 · Answer 2 · answered Dec 10 '16 at 06:09

-1

Instead of a ScrollView, which is not comfortable handling a scrolling child, use NestedScrollView which can handle scrolling children.

answered Dec 10 '16 at 06:09

Otieno Rowland

2,182
1
26
34

TabLayout+ViewPager inside ScrollView

2 Answers2