CODEWITHSUNDEEP
androidandroid-fragmentsandroid-viewpager
Alex Kombo
Alex Kombo

Reputation: 3356

ViewPager inside ScrollView not working

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>

Upvotes: 10

Views: 17813

Answers (6)

Kishore Reddy
Kishore Reddy

Reputation: 2454

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

  1. add below dependency inside build.gradle (app level)

    implementation 'ru.noties:scrollable:1.3.0'

  2. 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>

  3. 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;
        }
    }
}

Upvotes: 0

raj kavadia
raj kavadia

Reputation: 1073

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

Upvotes: 0

Boycott A.I.
Boycott A.I.

Reputation: 18871

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.)

Upvotes: 11

Om Infowave Developers
Om Infowave Developers

Reputation: 1565

Use android:fillViewport="true" in ScrollView

Upvotes: 13

not_again_stackoverflow
not_again_stackoverflow

Reputation: 1323

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.

Upvotes: 31

DevKRos
DevKRos

Reputation: 432

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

Upvotes: -1

Related Questions