duplicate webview, i want to load same in each

Question

How to display two webview in split screen which works similar, I want to duplicate a webview, and i want to scroll both at the same time. Thanks

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:weightSum="2">

    <WebView
        android:id="@+id/webView"
        android:layout_width="150dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        >

    </WebView>

    <WebView
        android:id="@+id/webView2"
        android:layout_width="150dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"></WebView>
</LinearLayout>

I have tried this, but i want to duplicate webview. and this is showing another and i have to load url again for second.

I dont want to load agin in second one i just want to be mirror.

Answer 1

Try this,

1. create layout file content_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:weightSum="9">

    <com.pramod.webviewdemo.ObservableWebView
        android:id="@+id/webViewOriginal"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="4"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Second View"/>


    <WebView
        android:id="@+id/webViewMirror"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="5"/>

</LinearLayout>

2. Create Class ObservableWebView for handle event from originalWebview

public class ObservableWebView extends WebView
{
    private OnScrollChangedCallback mOnScrollChangedCallback;

    public ObservableWebView(final Context context)
    {
        super(context);
    }

    public ObservableWebView(final Context context, final AttributeSet attrs)
    {
        super(context, attrs);
    }

    public ObservableWebView(final Context context, final AttributeSet attrs, final int defStyle)
    {
        super(context, attrs, defStyle);
    }

    @Override
    protected void onScrollChanged(final int l, final int t, final int oldl, final int oldt)
    {
        super.onScrollChanged(l, t, oldl, oldt);
        if(mOnScrollChangedCallback != null) mOnScrollChangedCallback.onScroll(l, t);
    }

    public OnScrollChangedCallback getOnScrollChangedCallback()
    {
        return mOnScrollChangedCallback;
    }

    public void setOnScrollChangedCallback(final OnScrollChangedCallback onScrollChangedCallback)
    {
        mOnScrollChangedCallback = onScrollChangedCallback;
    }

    /**
     * Impliment in the activity/fragment/view that you want to listen to the webview
     */
    public static interface OnScrollChangedCallback
    {
        public void onScroll(int l, int t);
    }
}

3. Update MainActivity.java with,

    public class MainActivity extends AppCompatActivity {

    private WebView  webViewMirror;
    private ObservableWebView webViewOriginal;

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

        // initialize view
        webViewOriginal = (ObservableWebView)findViewById(R.id.webViewOriginal);
        webViewMirror = (WebView)findViewById(R.id.webViewMirror);

        //set web settings for original
        webViewOriginal.getSettings().setLoadsImagesAutomatically(true);
        webViewOriginal.getSettings().setJavaScriptEnabled(true);
        webViewOriginal.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);

        //set web settings for duplicate / mirroe
        webViewOriginal.getSettings().setLoadsImagesAutomatically(true);
        webViewOriginal.getSettings().setJavaScriptEnabled(true);
        webViewOriginal.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);

        // set clients for webview
        webViewOriginal.setWebViewClient(new WebClientForOriginal());
        webViewMirror.setWebViewClient(new WebClientForMirror());

        // add listener to listen scroll For original webview
        webViewOriginal.setOnScrollChangedCallback(new ObservableWebView.OnScrollChangedCallback() {
            public void onScroll(int x, int y) {
                Log.d("MainActivity", "We Scrolled etc..." + " X " + x + " Y " + y);
                webViewMirror.scrollTo(x,y);
            }
        });

        //disabled touch event event.   
        webViewMirror.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View view, MotionEvent motionEvent) {
                return true;
            }
        });

        // load urls
        webViewOriginal.loadUrl("http://www.google.com");
        webViewMirror.loadUrl("http://www.google.com");

    }

    /**
     * Set web client for original web view
     */
    private class WebClientForOriginal extends WebViewClient {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);
            webViewMirror.loadUrl(url);
            return true;
        }
    }

    /**
     * Set web client for mirror web view
     */
    private class WebClientForMirror extends WebViewClient {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);
            return true;
        }
    }
}