Develop Reference

Android: Problems to display WebView for every url from the list

I have a standard task to display a ListView (UrlListView) with urls. When the user touches the row I open an activity (UrlViewActivity) with WebView.
Unfortunately, this trivial task brings many troubles for me in Android...
Standard approach:
UrlViewActivity has an *.xml file with a layout that contains WebView.
When the user touches any row inside UrlListView, I start this activity, set this layout as a content view, find my WebView by id and ask it to load an url. Yes, I also call inside my activity's onPause - mWebView.onPause() and inside onDestroy - mWebView.destroy();
Everything works pretty good until the user tries to open various urls rather often: opens an url, closes UrlViewActivity, opens another url and e t. c...usually after 15-25 such loads (every UrlViewActivity launch creates a new WebView) famous Android 4.4 bug occurs on Moto X and Nexus 5:
https://code.google.com/p/android/issues/detail?id=73632
so my app freezes inside nativeLockCanvas...
Then I tried another approach that some guys on StackOverFlow recommended:
Keeping WebView as a static object, create it only during the first startup and on every UrlViewActivity launch add this WebView and clear its state (and remove this WebView inside onStop() of course).
No freezing!!!
But there is a big problem to clear WebView's state on Android:
It's really hard to force a WebView correctly measure its height when loading a new url (WebView always tries to remember previous long page and doesn't want to decrease it height even when loading a very small page).
There are many advices to reset WebView's height like the following: How a change the content size of a webview in android?
But unfortunately clearView() is already deprecated and does nothing...The only working approach that I found is: calling mWebView.loadUrl("about:blank"); and inside overriden onPageFinished(WebView view, String url) method call mWebView.requestLayout();
That really works and pages become finally take correct height and scrolling works ok, but...it remembers blank page inside its history and shows it to user when he presses back button...
To resolve the problem of storing blank page in WebView's history I've tried to use clearHistory() method, but...if I call this method inside onPageFinished(WebView view, String url) right after my correct page was loaded guess what? WebView mystically forgets that it has just measured itself correctly (during first onPageFinished(WebView view, String url) call when "about:blank" page was loaded) and shows long scrolling even for a short pages...
Here is my code snippet:
enum WebViewStates {
WEB_VIEW_INITIALIZED, WEB_VIEW_RESET_DONE, WEB_VIEW_HISTORY_CLEARED
}
private ViewGroup mWebViewContainer;
private WebViewStates mWebViewState;
private void setupWebView() {
mScrollView.smoothScrollTo(0, 0);
mWebViewContainer.addView(mWebView);
mWebViewState = WebViewStates.WEB_VIEW_INITIALIZED;
mWebView.loadUrl("about:blank");
mWebView.setWebViewClient(new WebViewClient() {
#Override
public void onPageFinished(WebView view, String url) {
switch (mWebViewState) {
case WEB_VIEW_INITIALIZED:
mWebViewState = WebViewStates.WEB_VIEW_RESET_DONE;
mWebView.requestLayout();
mWebView.loadUrl(mPreviewUrl);
break;
case WEB_VIEW_RESET_DONE:
mWebViewState = WebViewStates.WEB_VIEW_HISTORY_CLEARED;
mWebView.clearHistory();
break;
case WEB_VIEW_HISTORY_CLEARED:
break;
}
super.onPageFinished(view, url);
}
});
}

Android 4.0.x (ICS) WebView does not update UI clicking <a> tags

I need WebView to show a HTML page A, there are hyperlink tags in page A, which will open page B when clicked. On action bar of my Activity, I have a Button which will call WebView.reload() when clicked. This should be a very simple case of WebView.
PROBLEM:
When running my app on Andorid 4.0.3 or 4.0.4, after click hyperlink ( tags) in page A, Android WevView stays on page A, nothing happend.
What-I-tried:
1. when the problem occurrs, click reload button, WevView is displaying page B correctly.
2. modify source code of page A and B, remove CSS code which affect how tag displays. Then WebView can jump to page B correctly after click hyperlinks in page A.
I think this is a bug in Android 4.0.x, It is not possilbe to remove CSS in HTML, I am stuck with the "reload solution".
Does anyone know the root cause of this bug or a better soluton?
Thanks

Use WebChromeClient for webView fucntionality it should work.Even then you are unable to load the html than debug your code and use alternative which function is not working . because java script and CSS both works in web view only the case if you have made mistake in java script or css thnt it should do strange behavior(not loading/blank load/hang screen).

Issue solved by WORKAROUND in web page source, not Android WebView.
add the following javascript inside html body:
try{
document.documentElement.clientHeight
} catch (e) {
};
above js trys to read web window height, but it will force a refresh of web page.
That's how this js solved this issue.
I guess this should be a bug in Android 4.0.3/4.0.4. But currently you can use this workaround to avoid it, only if your WebView load web pages developed by you.

Android web view "back" button to load previously loaded div

I will try to explain this as clearly as possible. I have an android app using web view to basically load a webpage as my app. I have everything working great, however the back button seems to be an issue. I have set this page up all on one html page, it will load in a div when certain buttons are clicked to give the feel of a new page without actually having one. I basically want the back button (on the android tablet or smartphone) to load the previously loaded div, but I have no idea where to start with this. Here is what the content switching jquery looks like -
function contentSwitcher(settings){
var settings = {
contentClass : '.contentToLoad',
navigationId : '#sideMenu',
servFront : '#clickHomeHome'
};
//Hide all of the content except the first one on the nav
$(settings.contentClass).not(':first').hide();
$(settings.navigationId).find('li:first').addClass('active');
//onClick set the active state,
//hide the content panels and show the correct one
$(settings.navigationId).find('a').click(function(e){
var contentToShow = $(this).attr('href');
contentToShow = $(contentToShow);
//dissable normal link behaviour
e.preventDefault();
//set the proper active class for active state css
$(settings.navigationId).find('li').removeClass('active');
$(this).parent('li').addClass('active');
//hide the old content and show the new
$(settings.contentClass).hide();
contentToShow.show("slow");
});
}
contentSwitcher();
});
note: I've cropped out a bunch of it just to show how it works on a basic level.
Does anyone have any suggestions as to where to begin. I'd just like the back button function to be able to maybe check a started previous div name stored somewhere and load that.
thanks!

You can try using the History API. There are numerous tutorials on the web e.g. this one is quite good:
http://diveintohtml5.info/history.html
Basically this is how it works. When the user clicks the link for the div to show you push the state to the history stack.
history.pushState({<object with any information about state>}, pageTitle, newUrl);
This will push the state to the history stack meaning that when the user presses the back button on any modern browser like webkit it will take that state into consideration. When back action is taken it will then pop the state from the history stack. This action you have to listen to and handle in any way you see fit:
window.addEventListener("popstate", function(event) {
// event object contains the information from the pushed state
// do whatever needed to load the previous page here
});
The History API requires you to structure your code in a certain way for it to work well. For this I would recommend to use some existing framework that handle the back events for you e.g. Backbone.js. Hope this helps.

Transitions during page navigation in phonegap android app

I am developing a phonegap android application using jquery Mobile that consists three html pages. I want to include transitions during navigation from one page to another.
For navigation between pages i have used
window.location = "abc.html";
Each page consists some dynamic data that loads on page initialization.
I have tried data-transition="slide". But there isn't any effect.
How can i include slide transition for page navigation in my application ?

$.mobile.changePage('abc.html', { transition : 'slide'});

function change_page(page){
$.mobile.changePage( page, { transition: "slide", changeHash: false });
}
Call this function:change_page('#load_page'); OR change_page('mypage.html');

Is there anyway to completely disable a webview in android

I want my webview to show a webpage but not to have any interaction with the page at all.
Just show it. I an showing an iframe but when you click on the image in it it goes to a link. That link is to big for the frame. I need to disable being able to click it.
i have tried
WebView
android:id="#+id/wv_AmberAlert"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="false"
android:longClickable ="false"
and
wv_Amber_Alert.setFocusableInTouchMode(false);
wv_Amber_Alert.setFocusable(false);
wv_Amber_Alert.setOnTouchListener(null);
wv_Amber_Alert.setOnClickListener(null);

You can try attaching a WebViewClient to the WebView and override the onLoadResource() method to stop loading of the url:
WebViewClient client = new WebViewClient() {
#Override
public void onLoadResource(WebView view, String url) {
view.stopLoading();
}
};
wv_Amber_Alert.setWebViewClient(client);

I like to add an "overlay" FrameLayout over the WebView.
Make it the same size and position of your webview and make sure android:clickable="true"
When the webview is loading, I set my overlay to be visible. Vice versa for when loading completes.
It's also nice to add a semi-transparent background to the overlay - this explains to the user that the webview is loading and hasn't just frozen up (since interactions now dont work).