ViewPager in CoordinatorLayout then scroll tablayout offscreen not working

Question

I have a viewpager in CoordinatorLayout like this:

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

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|enterAlways"
        app:popupTheme="@style/AppTheme"/>

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="scrollable"/>
</android.support.design.widget.AppBarLayout>

<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

and in viewpager, each fragment is a webview.

The code can be run but when I scroll my webview. the tablayout offscreen not working. it just at the header.

UPDATE:

I try to use relativelayout to content my views and use NestedScrollView as the relativelayout's parent but the webview disappeared(progressbar showed fine). Is a bug???

here is my fragment layout:

<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/nestedScrollView"
android:layout_width="match_parent"
android:layout_height="match_parent">

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:minHeight="300dp">

    <ProgressBar
        android:id="@+id/pb"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="fill_parent"
        android:layout_height="2dp"
        android:indeterminateOnly="false"
        android:max="100"
        android:progressDrawable="@drawable/progress_bar_states"></ProgressBar>

    <com.handmark.pulltorefresh.library.PullToRefreshWebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/pb" />
</RelativeLayout>

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

score 2 · Answer 1 · answered Jan 06 '16 at 16:37

For those having issue with content not showing when using NestedScrollView,add "fillViewport" to xml:

<android.support.v4.widget.NestedScrollView
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/nestedScrollView"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:fillViewport="true">

score 0 · Answer 2 · answered Jul 15 '15 at 09:21

0

Try like this:

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/home_coordinator_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/home_appbar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:elevation="2dp"
        app:paddingEnd="0dp"
        app:paddingStart="0dp">

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

        <android.support.design.widget.TabLayout
            android:id="@+id/home_tab_layout"
            style="@style/TabLayoutStyle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabContentStart="2dp"
            app:tabGravity="fill"
            app:tabIndicatorColor="@android:color/white"
            app:tabIndicatorHeight="2dp"
            app:tabMinWidth="24dp"
            app:tabMode="fixed"
            app:tabPadding="1dp"
            app:tabSelectedTextColor="@android:color/tab_indicator_text"
            app:tabTextColor="@android:color/darker_gray" />
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/home_view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        app:paddingEnd="0dp"
        app:paddingStart="0dp" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_home"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:src="@drawable/arrow_toggle"
        app:borderWidth="1dp"
        app:elevation="3dp"
        app:fabSize="normal"
        app:layout_anchor="@+id/home_coordinator_layout"
        app:layout_anchorGravity="bottom|right|end"
        app:pressedTranslationZ="2dp"
        app:rippleColor="@color/swipe_refresh_color_scheme_green" />

</android.support.design.widget.CoordinatorLayout>

It works well in my project.

answered Jul 15 '15 at 09:21

SilentKnight

13,761
19
49
78

What contents in your viewpager? Mine is a Relativelayout and a progressbar and webview in it. I have checked if NestedScrollView in viewpager. It works fine. – Swifty Jul 15 '15 at 13:14
It's just a `RecyclerView` in pages. – SilentKnight Jul 16 '15 at 01:44
1

RecyclerView or NestedScrollView will work normally. I try to put a Relativelayout into NestedScrollView but the Webview cannot show, I also find others have the same problem. – Swifty Jul 16 '15 at 01:55
Sorry, I didn't try `WebView` – SilentKnight Jul 16 '15 at 01:57
@Swifty Did you find any solution for this? I have `Webview` in `ViewPager`. But coordinator layout didn't scroll while scrolling. – Rethinavel Jul 21 '15 at 13:19
@RethinavelPillai not yet. Is it a bug? I have tried this workaround http://stackoverflow.com/a/30705844/3847215 but it doesn't work in my app. – Swifty Jul 22 '15 at 04:31
@Swifty Actually it is working fine for me with `android.support.v4.widget.NestedScrollView` – Rethinavel Jul 22 '15 at 07:30
@RethinavelPillai you put just Weview into the NestedScrollView and the WebView can work normally? – Swifty Jul 22 '15 at 09:12
@RethinavelPillai can you show me the xml Layout? Thank you very much. – Swifty Jul 23 '15 at 03:09
1

@Swifty. Sorry my requirement is that i need to show two tabs (webview 1 and webview2) So I used viewpager to load the fragment. I just Put Webview inside nested scrollview and render using viewpager adapter. [layout code](http://pastebin.com/dz4SjVF0) and [webview adapter code](http://pastebin.com/ySZPMcxE) – Rethinavel Jul 23 '15 at 07:44
I've similar issue. webview inside frame inside relative inside nestedscroll and my webiew is not shown. When i remove the nestedscroll, the webview is visible but i cant scroll the toolbar out with the relative layout as the single scrollable view. Any solution ? – onusopus Nov 11 '15 at 07:21

score 0 · Answer 3 · edited May 23 '17 at 12:26

0

Probably the problem is with app:layout_behavior="@string/appbar_scrolling_view_behavior". You will find some more info here: Android - footer scrolls off screen when used in CoordinatorLayout

edited May 23 '17 at 12:26

Community

1
1

answered Apr 29 '17 at 20:51

AppiDevo

3,195
3
33
51

ViewPager in CoordinatorLayout then scroll tablayout offscreen not working

3 Answers3