A webview overlay over another webview

Question

I have a webview in which If I click any link in that page it opens another webview. Now I want to overlay the second webview over first webview. And If I click the button on the second webview it should close. This is my XML page.

<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="app.MainActivity"
tools:showIn="@layout/activity_main">

<WebView
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@+id/activity_main_webview"/>
<WebView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="45dp"
    android:id="@+id/external_webview">
</WebView>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:id="@+id/ext_link"
    android:layout_height="fill_parent">
    <RelativeLayout android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:background="#FFFFFF"
        android:layout_height="45dp"
        android:weightSum="1">
        <Button
            android:id="@+id/backtonews"
            android:layout_marginTop="7dp"
            android:layout_width="190dp"
            android:layout_height="30dp"
            android:background="@drawable/button">
        </Button>
        </RelativeLayout>
</RelativeLayout>
<FrameLayout
    android:id="@+id/frameLayout"
    android:layout_width="match_parent"
    android:layout_below="@id/toolbar"
    android:visibility="gone"
    android:layout_height="match_parent"></FrameLayout>
<RelativeLayout
    android:id="@+id/container_help"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#88666666"
    android:visibility="invisible" >

    <ImageView
        android:id="@+id/image_help"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:clickable="false"
        android:contentDescription="@string/help_screen"
        android:scaleType="fitXY"
        android:src="@drawable/userguide"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true" />

</RelativeLayout>

How should I do it ?

Your XML looks wrong. Firstly you should have only one top level element. Secondly, the inner RelativeLayout looks redundant. Thirdly, should the external WebView be in the RelativeLayout? — Ian Newson, Apr 25 '16 at 12:04

score 1 · Answer 1 · answered Apr 25 '16 at 12:06

1

You will have to make some changes to your XML, but in general I'd recommend doing this by changing the visibility of the parent container containing your WebView, a bit like this:

((ViewGroup)findViewById(R.id.ext_link)).setVisibility(View.GONE);

And to show it in the first place do this:

((ViewGroup)findViewById(R.id.ext_link)).setVisibility(View.VISIBLE);

In the future when you're a bit more advanced you should look into doing this sort of thing with fragments.

answered Apr 25 '16 at 12:06

Ian Newson

7,679
2
47
80

I used this method and found that it is going back to the first webview and once again automatically it is coming back to the second webview. Couldn't find out why. Any idea ? – Reaching-Out Apr 25 '16 at 14:25
@Reaching-Out Where did you put this code? Ideally you want the code which hides the second web view in the click handler for the button. – Ian Newson Apr 25 '16 at 14:39
I have implemented on click handler only – Reaching-Out Apr 25 '16 at 14:42
1

@Reaching-Out It's probably because of where you've put your code to open the second web view. You should start a new question describing your new issue with the code. – Ian Newson Apr 25 '16 at 15:18

Simon Schubert · Answer 2 · 2016-04-25T12:56:39.257

1

I would use a Framelayout. Like this:

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

<WebView
    android:id="@+id/webview2"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

<WebView
    android:id="@+id/webview1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

</FrameLayout>

Code:

webview1 = findViewById(R.id.webview1);
webview2 = findViewById(R.id.webview2);
button = findViewById(R.id.backtonews);

webview1.setWebViewClient(new WebViewClient() {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            webview2.loadUrl(url);
            webview1.setVisibility(View.GONE);
            return true;
        }
    });

button.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        webview1.setVisility(View.VISIBLE);
        webview2.setVisility(View.GONE);
    }
});

edited Apr 25 '16 at 12:56

answered Apr 25 '16 at 12:07

Simon Schubert

2,010
19
34

How would I close the 2nd webview with a button click ? – Reaching-Out Apr 25 '16 at 12:50
Is it an android button or a button from the webview? – Simon Schubert Apr 25 '16 at 12:51
Button that I have placed in the second webview , u can see that in my XML page – Reaching-Out Apr 25 '16 at 12:52
I have edited my answer now. I saw the flow using toast and found that it going and coming back to this webview again. – Reaching-Out Apr 25 '16 at 14:23
I have no idea what you are talking about. – Simon Schubert Apr 25 '16 at 15:17
When I click the button on my second webview I noticed that it goes back to first webview and it comes to second webview again – Reaching-Out Apr 25 '16 at 15:56
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/110198/discussion-between-reaching-out-and-simon-schubert). – Reaching-Out Apr 26 '16 at 04:38

Aanal Shah · Answer 3 · 2016-04-25T12:16:30.427

I face same problem

Try this code :

Java Code:

public class MainActivity extends Activity {

protected WebView mainWebView;
// private ProgressBar mProgress;
private Context mContext;
private WebView mWebviewPop;
private FrameLayout mContainer;
private ProgressBar progress;

private String url = "http://docscanner.co.nf/intex.html";
private String target_url_prefix = "m.example.com";

public void onBackPressed() {

    if (mainWebView.isFocused() && mainWebView.canGoBack()) {
        mainWebView.goBack();
    } else {
        super.onBackPressed();
        finish();
    }
}

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

    mContext = this.getApplicationContext();

    // Get main webview
    mainWebView = (WebView) findViewById(R.id.wv_main);

    progress = (ProgressBar) findViewById(R.id.progressBar);
    progress.setMax(100);

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
        mainWebView.setWebContentsDebuggingEnabled(true);
    }

    mainWebView.getSettings().setUserAgentString("example_android_app");

    // Cookie manager for the webview
    CookieManager cookieManager = CookieManager.getInstance();
    cookieManager.setAcceptCookie(true);

    // Get outer container
    mContainer = (FrameLayout) findViewById(R.id.webview_frame);


        // Settings
        WebSettings webSettings = mainWebView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webSettings.setAppCacheEnabled(true);
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
        webSettings.setSupportMultipleWindows(true);

        mainWebView.setWebViewClient(new MyCustomWebViewClient());
        mainWebView.setScrollBarStyle(View.SCROLLBARS_OUTSIDE_OVERLAY);

        mainWebView.setWebChromeClient(new MyCustomChromeClient());
        mainWebView.loadUrl(url);


}

// @Override
// public boolean onCreateOptionsMenu(Menu menu) {
// // Inflate the menu; this adds items to the action bar if it is present.
// getMenuInflater().inflate(R.menu.example_main, menu);
// return true;
// }

private class MyCustomWebViewClient extends WebViewClient {

    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) {

        progress.setProgress(0);
        progress.setVisibility(View.VISIBLE);
        super.onPageStarted(view, url, favicon);
    }

    @SuppressLint("LongLogTag")
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        String host = Uri.parse(url).getHost();
        Log.d("shouldOverrideUrlLoading", host);
        //Toast.makeText(MainActivity.this, host,
        //Toast.LENGTH_SHORT).show();
        if (host.equals(target_url_prefix)) {
            // This is my web site, so do not override; let my WebView load
            // the page
            if (mWebviewPop != null) {
                mWebviewPop.setVisibility(View.GONE);
                mContainer.removeView(mWebviewPop);
                mWebviewPop = null;
            }
            return false;
        }

        if (host.contains("m.facebook.com") || host.contains("facebook.co")
                || host.contains("google.co")
                || host.contains("www.facebook.com")
                || host.contains(".google.com")
                || host.contains(".google.co")
                || host.contains("accounts.google.com")
                || host.contains("accounts.google.co.in")
                || host.contains("www.accounts.google.com")
                || host.contains("www.twitter.com")
                || host.contains("secure.payu.in")
                || host.contains("https://secure.payu.in")
                || host.contains("oauth.googleusercontent.com")
                || host.contains("content.googleapis.com")
                || host.contains("ssl.gstatic.com")) {
            return false;
        }
        // Otherwise, the link is not for a page on my site, so launch
        // another Activity that handles URLs
        //Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
        //startActivity(intent);
        //return true;
        return false;
    }

    @Override
    public void onPageFinished(WebView view, String url) {
        progress.setVisibility(View.GONE);
        super.onPageFinished(view, url);
    }

    @Override
    public void onReceivedSslError(WebView view, SslErrorHandler handler,
                                   SslError error) {
        Log.d("onReceivedSslError", "onReceivedSslError");
        // super.onReceivedSslError(view, handler, error);
    }
}

public void setValue(int progress) {
    this.progress.setProgress(progress);
}

public void showAlert(Context context, String title, String text) {
    AlertDialog.Builder alertDialogBuilder = new AlertDialog.Builder(
            context);

    // set title
    alertDialogBuilder.setTitle(title);

    // set dialog message
    alertDialogBuilder.setMessage(text).setCancelable(false)
            .setPositiveButton("OK", new DialogInterface.OnClickListener() {
                public void onClick(DialogInterface dialog, int id) {
                    // if this button is clicked, close
                    // current activity
                    finish();
                }
            }).create().show();

}

private class MyCustomChromeClient extends WebChromeClient {

    @Override
    public boolean onCreateWindow(WebView view, boolean isDialog,
                                  boolean isUserGesture, Message resultMsg) {
        mWebviewPop = new WebView(mContext);
        mWebviewPop.setVerticalScrollBarEnabled(false);
        mWebviewPop.setHorizontalScrollBarEnabled(false);
        mWebviewPop.setWebViewClient(new MyCustomWebViewClient());
        mWebviewPop.getSettings().setJavaScriptEnabled(true);
        mWebviewPop.getSettings().setSavePassword(false);
        mWebviewPop.setLayoutParams(new FrameLayout.LayoutParams(
                ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.MATCH_PARENT));
        mContainer.addView(mWebviewPop);
        WebView.WebViewTransport transport = (WebView.WebViewTransport) resultMsg.obj;
        transport.setWebView(mWebviewPop);
        resultMsg.sendToTarget();

        return true;
    }

    @Override
    public void onProgressChanged(WebView view, int newProgress) {
        // TODO Auto-generated method stub
        super.onProgressChanged(view, newProgress);
        MainActivity.this.setValue(newProgress);
    }

    @Override
    public void onCloseWindow(WebView window) {
        Log.d("onCloseWindow", "called");
    }

}

Xml File:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ProgressBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/progressBar"/>
 <WebView
    android:id="@+id/wv_main"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1" />
     <FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/webview_frame"></FrameLayout>
   </LinearLayout>

I couldn't exactly get which part but can u tell me how to close the 2nd webview which is in overlay to close on a button click so that the first webview will be seen as such. — Reaching-Out, Apr 25 '16 at 12:51

A webview overlay over another webview

3 Answers3

Linked