Adding pull to refresh on webview for refreshing

Question

I will add pull to refresh on my webview so it refresh my webview. i have seen all questions on this page but i can't find the good way to add pull to refresh...

Mainactivity.java

package com.vvhvb.hesselfeenstra.vvheerenveenseboys;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        String url ="http://heerenveenseboys.nl/";
        WebView view=(WebView) this.findViewById(R.id.webView);
        view.getSettings().setJavaScriptEnabled(true);
        view.getSettings().setBuiltInZoomControls(true);
        view.getSettings().setDisplayZoomControls(false);
        view.setWebViewClient(new WebViewClient());
        view.loadUrl(url);

    }

}

content_main.xml

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.vvhvb.hesselfeenstra.vvheerenveenseboys.MainActivity"
    tools:showIn="@layout/activity_main">

    <WebView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/webView"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />
</RelativeLayout>

I hope anyone can help me and solve this problem for me.

Solution 1

You could wrap webview in Swipe refesh layout like this

<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="com.vvhvb.hesselfeenstra.vvheerenveenseboys.MainActivity"
tools:showIn="@layout/activity_main">

<android.support.v4.widget.SwipeRefreshLayout
    android:id="@+id/swipeContainer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

<android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <WebView
        android:id="@+id/webView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true" />

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

In java

package com.vvhvb.hesselfeenstra.vvheerenveenseboys;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends AppCompatActivity {
WebView view;
SwipeRefreshLayout mySwipeRefreshLayout;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    mySwipeRefreshLayout = (SwipeRefreshLayout)this.findViewById(R.id.swipeContainer);
    String url ="http://heerenveenseboys.nl/";
    view=(WebView) this.findViewById(R.id.webView);
    view.getSettings().setJavaScriptEnabled(true);
    view.getSettings().setBuiltInZoomControls(true);
    view.getSettings().setDisplayZoomControls(false);
    view.setWebViewClient(new WebViewClient());
    view.loadUrl(url);

    mySwipeRefreshLayout.setOnRefreshListener(
    new SwipeRefreshLayout.OnRefreshListener() {
    @Override
    public void onRefresh() {
        view.reload();
    }
    }
    );

}

}

Solution 2

I think the best solution is to use SwipeRefreshLayout but without NestedScrollView inside it as jitinsharma described, beacause this possible problem : webview height grows indefinitely inside a nestedScrollView.But there is another solution for scrolling problem as described by vizZ,to implement ViewTreeObserver.OnScrollChangedListener.So working solution shold be something like this:

<android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/swipeContainer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <RelativeLayout
            android:id="@+id/nonVideoLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:windowSoftInputMode="adjustResize">

            <WebView
                android:id="@+id/main_web_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginTop="5dp"
                android:windowSoftInputMode="adjustResize"
                app:layout_constraintDimensionRatio="1" />

        </RelativeLayout>


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

Activity parameters:

private WebView mWebView;
private SwipeRefreshLayout mySwipeRefreshLayout;
private ViewTreeObserver.OnScrollChangedListener mOnScrollChangedListener;   

on Activity onCreate:

mWebView = (WebView) findViewById(R.id.main_web_view);
mySwipeRefreshLayout = (SwipeRefreshLayout)this.findViewById(R.id.swipeContainer);

        mySwipeRefreshLayout.setOnRefreshListener(
                new SwipeRefreshLayout.OnRefreshListener() {
                    @Override
                    public void onRefresh() {
                        mWebView.reload();
                    }
                }
        );

and implements of activity:implements AdvancedWebView.Listener

on Activity onStop :

mySwipeRefreshLayout.getViewTreeObserver().removeOnScrollChangedListener(mOnScrollChangedListener);

and Activity onStart:

 mySwipeRefreshLayout.getViewTreeObserver().addOnScrollChangedListener(mOnScrollChangedListener =
                new ViewTreeObserver.OnScrollChangedListener() {
                    @Override
                    public void onScrollChanged() {
                        if (mWebView.getScrollY() == 0)
                            mySwipeRefreshLayout.setEnabled(true);
                        else
                            mySwipeRefreshLayout.setEnabled(false);

                    }
                });

Solution 3

activity_main.xml

<android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/swipeContainer"
        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="match_parent" app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="0dp"
        android:layout_marginLeft="0dp"
        android:layout_marginStart="0dp"
        android:layout_marginEnd="0dp"
        android:layout_marginRight="0dp"
        android:layout_marginBottom="0dp"
        app:layout_constraintBottom_toBottomOf="parent"/>
</android.support.v4.widget.SwipeRefreshLayout>

For Kotllin:

MainActivity.kt

var mySwipeRefreshLayout: SwipeRefreshLayout? = null
var myWebView: WebView? = null
mySwipeRefreshLayout = findViewById<SwipeRefreshLayout>(R.id.swipeContainer)

    mySwipeRefreshLayout?.setOnRefreshListener {
        Log.i("on refresh", "onRefresh called from SwipeRefreshLayout")

        // This method performs the actual data-refresh operation.
        // The method calls setRefreshing(false) when it's finished.
        myWebView?.reload();
    }
myWebView!!.webViewClient = object : WebViewClient() {
        override fun shouldOverrideUrlLoading(view: WebView?, url: String?): Boolean {
            view?.loadUrl("http://www.google.com")
            return false;
        }

        override fun onPageFinished(view: WebView?, url: String?) {
            mySwipeRefreshLayout?.isRefreshing = false
        }
    }

Comments

[Hessel]

can i refresh my webview with that?

[Yash Jain]

Ya you can again put loadURL(<YOUR URL>) again with some query after MotionEvent.ACTION _DOWN and if you want some more types of motion refer developer.android.com/reference/android/view/MotionEvent.htm‌​l

[Yash Jain]

@Hessel Find a function to get all as your linear layout

[Hessel]

I have RelativeLayout

[Hessel]

And when i paste webview.reload() it gives me an error on that line.

[jitinsharma]

You have define webview in onCreate() Webview webview = (WebView)findViewById(R.id.web_view) and then call webview.loadUrl("your url") inside onCreate to initially load the wbeview. Then call webview.reload() inside listener.

[jitinsharma]

Can you elaborate the problem?

[Hessel]

I have 2 errors by "mySwipeRefreshLayout" it cant resolve the symbol and LOG_TAG give's me an error it cant resolve the symbol and if i paste webview.reload() there comes an error at that line.. Mayby i can update my question? "

[Hessel]

I have no errors but i miss the </android.support.v4.widget.SwipeRefreshLayout> where do i place that on the content_main? If i place that behind the <android.support.v4.widget.SwipeRefreshLayout i cant pull to refresh.

[jitinsharma]

put it below </android.support.v4.widget.NestedScrollView> Check updated answer

[Hessel]

It works! Thank you very much! Only the problem now is the circle is staying on my screen as in this picture: i-cdn.phonearena.com/images/articles/162782-thumb/chrome.png

[jitinsharma]

Hmm..try mySwipeRefreshLayout.setRefreshing(false); inside onRefresh after reload() function.

[Chamnap]

@jitinsharma, why need NestedScrollView?

[jitinsharma]

You can use scrollview too.

[Emre Tekin]

It wokrs Thank youuu ! But you should do onPageFinished { swRefreshLayout.setRefreshing(false); }

[Bhavik Mehta]

This does not work for me at all, it shows plain white blank screen. because nestedscrollview is behaving rude

[11m0]

You don't need to add this line because its set to LOAD_DEFAULT mode by default mWebview.getSettings().setCacheMode(WebSettings.LOAD_DEFAULT‌​);

[UdayaLakmal]

Yes, only this solution give smooth loading, android.support.v4.widget.NestedScrollView is wrap webview on load and loading is not pretty.

[mrid]

it works good. but i'm having a problem. my webview contains a list and my webwiew scrolls. using this, when i swipe, it just reloads rather than scrolling down in the webview. Is there anything i can do for this ?

[Prajwal Waingankar]

implements AdvancedWebView.Listener : couldnt get this.