Android webview not loading website properly

Question

I am trying to load a website: Citibank.

This loads fine in the chrome browser ( Mobile and desktop). However, doesn't load with styles and javascript in my webview app.

Note: I am trying to load a desktop website. This is my code:

package com.example.asd.webproj;

import android.app.Activity;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    private WebView mWebview ;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mWebview  = new WebView(this);
        mWebview.setWebChromeClient(new WebChromeClient());
        mWebview.setWebViewClient(new WebViewClient());
        mWebview.getSettings().setUserAgentString("Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.95 Safari/537.36");
        mWebview.getSettings().setAllowFileAccessFromFileURLs(true);
        mWebview.getSettings().setAllowUniversalAccessFromFileURLs(true);
        mWebview.clearCache(true);
        mWebview.clearHistory();
        mWebview.getSettings().setAllowContentAccess(true);
        mWebview.getSettings().setDomStorageEnabled(true);
        mWebview.getSettings().setJavaScriptEnabled(true); // enable javascript
        mWebview.getSettings().setBuiltInZoomControls(true);
        mWebview.getSettings().setSupportZoom(true);
        mWebview.getSettings().setLoadWithOverviewMode(true);
        mWebview.getSettings().setUseWideViewPort(true);

        mWebview.getSettings().setBuiltInZoomControls(true);
        mWebview.getSettings().setDisplayZoomControls(false);

        mWebview.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
        mWebview.setScrollbarFadingEnabled(false);

        final Activity activity = this;

        mWebview .loadUrl("https://www.citibank.com.hk/HKGCB/JSO/signon/DisplayUsernameSignon.do?locale=en_HK");
        setContentView(mWebview );
    }
}

What I expect to see is something like this: But what I see is:

@Redman : This doesn't work I receive the same site as I have posted the screenshot above. — user000111181, Jan 04 '17 at 08:31

Charuක · Answer 1 · 2017-01-04T10:28:59.103

4

Try this line of code,

   mWebview = new WebView(this);

        mWebview.getSettings().setJavaScriptEnabled(true); // enable javascript

        final Activity activity = this;

        mWebview.setWebViewClient(new WebViewClient() {
            public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
                Toast.makeText(activity, description, Toast.LENGTH_SHORT).show();
            }
        });

        mWebview.loadUrl("https://www.citibank.com.hk/HKGCB/JSO/signon/DisplayUsernameSignon.do?locale=en_HK");
        setContentView(mWebview);

Note: Setting the user agent string may or may not fix the issue, it all depends what user agent string the site is looking for. Here are some user agent strings currently being used https://deviceatlas.com/blog/list-of-user-agent-strings

edited Jan 04 '17 at 10:28

answered Jan 04 '17 at 08:18

Charuක

12,953
5
50
88

Well I am doing this ain't I ? Also it loads the mobile site, rather than the desktop site. – user000111181 Jan 04 '17 at 08:21
@user000111181 do you want to let load the dektop view site mobile one and let user to zoom ? – Charuක Jan 04 '17 at 08:26
Yes I want to load the desktop website. – user000111181 Jan 04 '17 at 08:28
and what's that issue ? That is a valid user string and I want to load the **Desktop** site only, not the mobile site that you have posted screenshot of. – user000111181 Jan 04 '17 at 08:32
even if you call that url via your mobile browser it send you the mobile page. – Charuක Jan 04 '17 at 09:04
If I change it to request desktop site. It would load the desktop website and thats what I am trying to do. – user000111181 Jan 04 '17 at 09:08

score 3 · Answer 2 · answered Jan 04 '17 at 09:11

The problem is with you declare the user agent is webkit. It should have loaded into the default webkit browser and you should enable the javascript.

mWebview.getSettings().setUserAgentString("Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.95 Safari/537.36");

Try this line of code.

package com.example.asd.webproj;

import android.app.Activity;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    private WebView mWebview ;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mWebview  = new WebView(this);
        mWebview.setWebChromeClient(new WebChromeClient());
        mWebview.setWebViewClient(new WebViewClient());
        mWebview.getSettings().setAllowFileAccessFromFileURLs(true);
        mWebview.getSettings().setAllowUniversalAccessFromFileURLs(true);
        mWebview.clearCache(true);
        mWebview.clearHistory();
        mWebview.getSettings().setAllowContentAccess(true);
        mWebview.getSettings().setDomStorageEnabled(true);
        mWebview.getSettings().setJavaScriptEnabled(true); // enable javascript
        mWebview.getSettings().setBuiltInZoomControls(true);
        mWebview.getSettings().setSupportZoom(true);
        mWebview.getSettings().setLoadWithOverviewMode(true);
        mWebview.getSettings().setUseWideViewPort(true);

        mWebview.getSettings().setBuiltInZoomControls(true);
        mWebview.getSettings().setDisplayZoomControls(false);

        mWebview.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
        mWebview.setScrollbarFadingEnabled(false);

        final Activity activity = this;

        mWebview .loadUrl("https://www.citibank.com.hk/HKGCB/JSO/signon/DisplayUsernameSignon.do?locale=en_HK");
        setContentView(mWebview );
    }
}

Hello @codepirate : This loads the mobile website not the desktop website. — user000111181, Jan 04 '17 at 09:15

sivaBE35 · Answer 3 · 2017-01-04T09:58:44.400

0

Here you puting UA for the version of Mac OS. so Add Android Phone based UA string. remove this line

mWebview.getSettings().setUserAgentString("Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.95 Safari/537.36");

and add this UA String

Mozilla/5.0 (Android 4.4; Mobile; rv:41.0) Gecko/41.0 Firefox/41.0

Reference 1

Reference 2

edited Jan 04 '17 at 09:58

answered Jan 04 '17 at 08:27

sivaBE35

1,876
18
23

This would force it to load with the default UA, Thus loading the mobile site. – user000111181 Jan 04 '17 at 08:29

score 0 · Answer 4 · answered Aug 21 '21 at 17:04

0

If anyone is testing in a Virtual device, I would suggest to test in a real device and see the results.

answered Aug 21 '21 at 17:04

Reejesh

1,745
2
6
15

Android webview not loading website properly

4 Answers4