ViewPager inside ScrollView not working

Question

I want to put a ViewPager inside a CoordinatorLayout withing a NestedScrollView. The viewpager houses 3 fragments.

Problem is the fragments aren't visible. Tabs show up and the rest of the layout is visible and scrolls accordingly.

Below is the code for my layout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:orientation="vertical">

    <include layout="@layout/toolbar" />

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/coordinatorLayout"
        android:layout_below="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/DarkBodyBackground"
        android:fitsSystemWindows="true"
        android:orientation="vertical">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/app_bar_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fitsSystemWindows="true"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/collapsing_toolbar"
                android:layout_width="match_parent"
                android:layout_height="500dp"
                android:background="@color/DarkBodyBackground"
                android:fitsSystemWindows="true"
                app:contentScrim="?attr/colorPrimary"
                app:expandedTitleMarginEnd="64dp"
                app:expandedTitleMarginStart="48dp"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

                <include layout="@layout/artist_header" />

            </android.support.design.widget.CollapsingToolbarLayout>
        </android.support.design.widget.AppBarLayout>

        <android.support.v4.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <include layout="@layout/loading_indicator" />

                <android.support.design.widget.TabLayout
                    android:id="@+id/tabLayout"
                    style="@style/TabLayoutStyle"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    app:layout_scrollFlags="scroll|enterAlways"
                    app:tabGravity="fill"
                    app:tabMode="fixed" />

                <android.support.v4.view.ViewPager
                    android:id="@+id/viewpager"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:visibility="gone" />

            </RelativeLayout>
        </android.support.v4.widget.NestedScrollView>
    </android.support.design.widget.CoordinatorLayout>

</RelativeLayout>

Know it's silly, but are you handling `visibility = "gone"` ? — not_again_stackoverflow, Sep 20 '16 at 07:44
@not_again_stackoverflow I am loading some content through a network call and toggle the visibility to `visible` after it's done loading. — Alex Kombo, Sep 20 '16 at 07:49
@KanishR I need the toolbar to be fixed at the top and not scroll through with the rest of the content, hence the `CoordinatorLayout` is not the parent. — Alex Kombo, Sep 20 '16 at 07:53
I'm guessing this should be able to help you fix your issue -- http://stackoverflow.com/questions/30580954/viewpager-in-a-nestedscrollview — not_again_stackoverflow, Sep 20 '16 at 08:36
Possible duplicate of [Is it possible to have a ViewPager inside of a ScrollView?](https://stackoverflow.com/questions/7381360/is-it-possible-to-have-a-viewpager-inside-of-a-scrollview) — Henry, Nov 28 '17 at 10:37

score 31 · Accepted Answer · answered Sep 20 '16 at 08:40

31

Try adding this piece of code before loading your viewPager

NestedScrollView scrollView = (NestedScrollView) findViewById (R.id.nest_scrollview);
scrollView.setFillViewport (true);

Let me know if it helped fix the issue.

answered Sep 20 '16 at 08:40

not_again_stackoverflow

1,285
1
13
27

1

Yes it did. Thanks! – Alex Kombo Sep 20 '16 at 08:58
5

You can specify it from XML also -> use android:fillViewport="true" – Mohamed Nageh Aug 07 '18 at 12:40
Thanks a lot brother, that worked and saved my hours – Obtice May 20 '19 at 04:54

score 13 · Answer 2 · edited Oct 03 '17 at 10:42

13

Use android:fillViewport="true" in ScrollView

edited Oct 03 '17 at 10:42

Vasily Kabunov

6,511
13
49
53

answered Jun 06 '17 at 04:04

Om Infowave Developers

1,525
15
40

This should be the selected answer. – Chris Gomez Jan 16 '18 at 07:11

score 11 · Answer 3 · answered Mar 06 '19 at 19:29

The accepted answer resulted in my fragments now being visible. However, it left me with the problem that my NestedScrollView would no longer scroll!

To overcome this, I have created a custom ViewPager (based on this article) that calculates it's height in the required manner.

Here is full code for my CustomViewPager:

package org.example;

import android.content.Context;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.View;

public class CustomViewPager extends ViewPager {

    public CustomViewPager(@NonNull Context context) {
        super(context);
    }

    public CustomViewPager(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

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

        try {
            int numChildren = getChildCount();
            for (int i = 0; i < numChildren; i++) {
                View child = getChildAt(i);
                if (child != null) {
                    child.measure(widthMeasureSpec, MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED));
                    int h = child.getMeasuredHeight();
                    heightMeasureSpec = Math.max(heightMeasureSpec, MeasureSpec.makeMeasureSpec(h, MeasureSpec.EXACTLY));
                }
            }

        }
        catch (Exception e) {
            e.printStackTrace();
        }

        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }
}

In your layout xml, you'd then just replace android.support.v4.view.ViewPager with org.example.CustomViewPager.

(I also removed the new android:fillViewport="true" attribute from my NestedScrollView element as it seems this is now no longer needed.)

Hi +1 for your solution. it is works!, but the problem is the margin bottom somehow is missing. How i can restore the margin bottom after onMeasure? — Yohanim, Aug 31 '21 at 04:24

score 0 · Answer 4 · edited Jan 31 '20 at 14:00

No need to use ScrollView and NestedScroolview Just use SliderLayout it will work perfectly.

add below dependency inside build.gradle (app level)
```
implementation 'ru.noties:scrollable:1.3.0'
```

layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/cardview_light_background"
    android:fitsSystemWindows="true"
    android:orientation="vertical">

    <include layout="@layout/toolbar" /> <!-- its toolbar -->
    <ru.noties.scrollable.ScrollableLayout
        android:id="@+id/scrollable_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:scrollable_autoMaxScroll="true"
        app:scrollable_defaultCloseUp="true">

        <!-- what ever you want you can add here, its like tabs header part -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:weightSum="1">

            <ImageView
                android:id="@+id/imageViewProfilePic"
                android:layout_width="match_parent"
                android:layout_height="60dp"
                android:layout_gravity="center"
                android:layout_marginLeft="10dp"
                android:layout_marginTop="10dp"
                android:layout_marginBottom="10dp"
                android:layout_weight=".75"
                android:src="@drawable/hashtag" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginTop="10dp"
                android:layout_marginRight="10dp"
                android:layout_marginBottom="10dp"
                android:layout_weight=".25"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/textviewTagName"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginLeft="5dp"
                    android:fontFamily="@font/roboto_medium"
                    android:text=""
                    android:textColor="#000"
                    android:textSize="12sp"
                    android:textStyle="bold" />
                />

                <TextView
                    android:id="@+id/textViewNoofPosts"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/textviewFollow"
                    android:layout_marginLeft="5dp"
                    android:fontFamily="@font/roboto"
                    android:text="(University name)"
                    android:textSize="11dp" />

            </LinearLayout>
        </LinearLayout>

        <!--
            <ru.noties.scrollable.sample.SampleHeaderView
                style="@style/HeaderStyle"
                app:shv_title="@string/sample_title_fragment_pager"/>
        -->

        <android.support.design.widget.TabLayout
            android:id="@+id/tablayout"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:layout_gravity="bottom|center_horizontal|center_vertical"
            app:tabIndicatorColor="@color/appcolor"
            app:tabMode="fixed"
            app:tabSelectedTextColor="@color/appcolor" />

        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="?attr/actionBarSize" />

    </ru.noties.scrollable.ScrollableLayout>
</LinearLayout>

Activity code:

public class TabActivity extends AppCompatActivity {
    TabLayout tabLayout;
    private SectionsPagerAdapter mSectionsPagerAdapter;
    private ViewPager mViewPager;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tab);
        Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(mToolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setDisplayShowHomeEnabled(true);//back arrow on toolbar
        getSupportActionBar().setDisplayShowTitleEnabled(false);

        mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());

        mViewPager = (ViewPager) findViewById(R.id.viewpager);
        mViewPager.setAdapter(mSectionsPagerAdapter);
        tabLayout = (TabLayout) findViewById(R.id.tablayout);
        tabLayout.setupWithViewPager(mViewPager);

    }

    @Override
    public boolean onOptionsItemSelected(MenuItem menuItem) {
        if (menuItem.getItemId() == android.R.id.home) {
            onBackPressed();
        }

    }

    @Override
    public void onBackPressed() {
        this.finish();
        super.onBackPressed();
    }


    public class SectionsPagerAdapter extends FragmentPagerAdapter {

        public SectionsPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            switch (position) {
                case 0:
                    return new frag1();

                case 1:
                    return new frag2();
            }
            return null;
        }

        @Override
        public int getCount() {
            // Show 2 total pages.
            return 2;
        }

        @Override
        public CharSequence getPageTitle(int position) {
            switch (position) {
                case 0:
                    return "one";
                case 1:
                    return "two";
            }
            return null;
        }
    }
}

score -1 · Answer 5 · answered Mar 07 '19 at 05:45

-1

Use nestedScrollview and set the property of nestedscrollenabled as true and I think you will do it.

answered Mar 07 '19 at 05:45

raj kavadia

926
1
10
30

Thanks, Raj, but using `android:nestedScrollingEnabled="true"` is only available from API 21, which is too high for me to try. – ban-geoengineering Mar 08 '19 at 09:55

score -2 · Answer 6 · answered Sep 20 '16 at 08:38

So let me do it for you : the correct hierarchy as suggested by google blogspot it is working fine for me:Check this out

      <?xml version="1.0" encoding="utf-8"?>
 <android.support.design.widget.CoordinatorLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:orientation="vertical"
  android:id="@+id/cl_parent"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
  <android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="256dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">
        <ImageView
            android:id="@+id/img_backdrop"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:fitsSystemWindows="true"
            android:src="@drawable/coverimage"
            app:layout_collapseMode="parallax" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:tabGravity="center"
            android:layout_gravity="bottom"
            app:tabMode="scrollable"
            app:tabContentStart="72dp" />

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_collapseMode="pin">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/my_cloud_tv"
            android:textColor="#fff"
            android:textSize="18sp" />
 </android.support.v7.widget.Toolbar>
    </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

<android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

let me know if it helps

ViewPager inside ScrollView not working

6 Answers6