Make AppBarLayout respond to scrolling in WebView

Question

In the design support Library (from I/O) Google introduced the AppBarLayout. I'm trying to make the Toolbar animate out of the screen when the user scrolls through a website in a WebView in a Fragment. It does work when I put my WebView element inside a NestedScrollView, but that makes scrolling through the WebView buggy and makes pinch-to-zoom impossible. How can I make the AppBarLayout respond (animate away when scrolling down, return when scrolling up, just like in NestedScrollView) to the WebView? These are my XML files: The main layout:

<android.support.design.widget.CoordinatorLayout 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:id="@+id/main_coordinatorlayout">
<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    android:id="@+id/appBarLayout">
    <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:id="@+id/toolbar"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/Theme.AppCompat.Light"
        app:layout_scrollFlags="scroll|enterAlways"/>
    <android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tabLayout"/>
</android.support.design.widget.AppBarLayout>

<android.support.v4.view.ViewPager
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/viewPager"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_anchor="@id/viewPager"
    app:layout_anchorGravity="bottom|right|end"
    app:borderWidth="0dp"
    android:layout_margin="16dp"
    android:src="@drawable/ic_action_autorenew" />

The code of my fragment containing the webview:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">

<WebView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/webView"
    android:layout_gravity="center_horizontal"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

Thanks in advance!

Answer 1

Thanks to @torque203 for providing this answer. I'm reposting this to gather more attention to it.

You can extend webview and implement NestedScrollingChild. For example, you can use the NestedWebView object found in this Github project.

From there on, you can act like it's a normal View that supports Nested Scrolling, like a RecyclerView:

<your.package.name.NestedWebView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

In my use case, this worked fine.

Again, credits to @torque203 for finding this Github project.

Answer 2

@Rick de Vries the simplest way without any third party library is that after AppBarLayout make a NestedScrollView having the child as WebView only. Below is an example for the same -

        </com.google.android.material.appbar.AppBarLayout>

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

        <WebView
            android:id="@+id/webView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

This worked for me.

Answer 3

Things placed inside CoordinatorLayout must be designed and implemented to work with it or it will not coordinate with any other sibling views. But well ... Toolbar is not designed for that. AppBarLayout is just an component that is prepared to make Toolbar works perfectly with CoordinatorLayout.

LinearLayout is not designed to work with CoordinatorLayout.It is for more easy, you just need to add an attribute to the LinearLayout telling its scroll behavior

<LinearLayout
...
app:layout_behavior="@string/appbar_scrolling_view_behavior"
...
>

you can try make AppBarLayout respond to the WebView by this

app:layout_behavior="@string/appbar_scrolling_view_behavior"

since ScrollView is now a direct child of CoordinatorLayout.

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

ScrollView was not designed to work with CoordinatorLayout (again). You need to use the another one, NestedScrollView, provided in Android Support Library v4, which is designed to work with CoordinatorLayout since born.

And with the same reason, please note that the classic ListView doesn't work with CoordinatorLayout as well. Only RecyclerView works.