Android webview content sometimes not fit the width - android

In my application ,
first I have some html code as string , then I load it into the webview like this:
WebView content = (WebView) rootView.findViewById(R.id.content);
StringBuilder sb = new StringBuilder();
sb.append("<HTML><HEAD><meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'></HEAD><body>");
sb.append(pageItem.page_content_chi.toString());
sb.append("</body></HTML>");
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
content.getSettings().setAllowUniversalAccessFromFileURLs(true);
content.getSettings().setAllowFileAccessFromFileURLs(true);
}
content.setWebChromeClient(new WebChromeClient());
content.setWebViewClient(new WebViewClient() {
#Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
startActivity(intent);
return true;
}
});
content.getSettings().setUseWideViewPort(true);
content.getSettings().setJavaScriptEnabled(true);
content.getSettings().setLoadWithOverviewMode(true);
content.getSettings().setAppCacheMaxSize(1024 * 1024 * 8);
String cachePath = ctx.getCacheDir().getAbsolutePath();
content.getSettings().setAppCachePath(cachePath);
content.getSettings().setAppCacheEnabled(true);
content.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
content.loadDataWithBaseURL("file:///android_asset/",sb.toString(), "text/html", "utf-8", null);
content.setBackgroundColor(0x00000000);
content.setOnTouchListener(new View.OnTouchListener() {
public boolean onTouch(View v, MotionEvent event) {
return (event.getAction() == MotionEvent.ACTION_MOVE);
}
});
content.setVerticalScrollBarEnabled(false);
content.setHorizontalScrollBarEnabled(false);
Layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/bg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:overScrollMode="never"
android:scrollbars="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_margin="5dp"
android:textSize="25sp"
android:textStyle="bold" />
<WebView
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</ScrollView>
</LinearLayout>
The problem is , the content inside webview sometimes fit to the width , however, it sometimes not fitting and exceed the width. It happen randomly , so when I click on the tab and reload the webview, it sometimes fit the view and sometimes exceed the view. How to fix this? Thanks a lot


Use the WebView Properties as
<WebView
android:id="#+id/content"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
After you are done with this the next thing that you have to see is that the website which you are trying to get the content in your webview is responsive or not means that whether its working for all the screens at clear and fine resolution.if not then you must make the webpage Responsive to you that in Webview with as example
#media (min:320px , max:568px ){ Css Body}


Please add below code in manifest file:
<supports-screens android:smallScreens="true"
android:normalScreens="true" android:largeScreens="true"
android:anyDensity="true" />

Related

Nest ScrollView

there are two webviews in scrollview.
<ScrollView>
<LinearLayout>
<WebView></WebView>
<WebView></WebView>
</LinearLayout>
</ScrollView>
I want to make two webviews looks like one webpage. currently, my solution is make webview's height equal to webview's contentHeight. and disable scrollability of webview. but for very big html. it's not a good solution. webview has to render the whole html. I want to use nestedscrollview. make two webviews' height equals to nestedscrollview's height. but I dont known how to deal the events.

Try this to make two WebView looks like one webpage.
public class MainActivity extends Activity {
String url = "http://www.yahoo.com";
String url1 = "http://www.google.com";
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Log.d("MainActivity", "Activity one");
WebView webview = (WebView) findViewById(R.id.webView1);
webview.getSettings().setJavaScriptEnabled(true);
webview.setWebViewClient(new WebViewController());
webview.loadUrl(url);
WebView webview2 = (WebView) findViewById(R.id.webView2);
webview2.getSettings().setJavaScriptEnabled(true);
webview2.setWebViewClient(new WebViewController());
webview2.loadUrl(url1);
}
}
XML code
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<WebView
android:id="#+id/webView1"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<WebView
android:id="#+id/webView2"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</LinearLayout>
WebView client
class WebViewController extends WebViewClient {
#Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
}

webView in android open the website in web instead of webview

when I run this code, "google.com" open in web application (for examaple google chrome) and not in the webView in the dialog.
It's does work OK with some urls.
Why?
final Dialog dialog=new Dialog(this.activity,android.R.style.Theme_Black_NoTitleBar_Fullscreen);
dialog.setContentView(R.layout.full_page_ad_between_chapters);
WebView webView = (WebView) dialog.findViewById(R.id.webView1);
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl("http://google.com");
R.layout.full_page_ad_between_chapters :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="350dp"
android:layout_height="1000dp"
android:layout_margin="5dp"
android:orientation="vertical" >
<Button
android:id="#+id/fullPageAdBetweenChaptersClose"
android:layout_width="100dp"
android:layout_height="40dp"
android:layout_gravity="center"
android:text="סגור" />
<WebView
android:id="#+id/webView1"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>

You need to override the method shouldOverrideUrlLoading() on your WebViewClient.
WebView webView = (WebView) dialog.findViewById(R.id.webView1);
webView.setWebViewClient(new WebViewClient() {
public boolean shouldOverrideUrlLoading(WebView view, String url) {
// check if we want to open the url into the WebView
if (iWantToOpenTheUrlIntoTheWebView(url)) {
return false;
}
// let the system handle the url outside of the app
return true;
}
});

Keep current page rendered until the next page is loaded

I have a simple app that is based on WebView.loadUrl("http://www.example.com").
When a user clicks on a URL, the default behavior is to immediately show a blank page, wait until the page is loaded, and then show this page.
I managed to show a splash screen in lieu of the blank page. However, is it possible to keep the current page rendered instead, and render the next page only when it is fully loaded?

This is, I feel, a hacky solution. I offer it as a temporary fix until someone posts the "real" way to do this.
MainActivity class:
public class MainActivity extends Activity
{
WebView webView1, webView2;
EditText editText;
#Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
editText = (EditText) findViewById(R.id.edit_url);
webView1 = (WebView) findViewById(R.id.webView_1);
webView2 = (WebView) findViewById(R.id.webView_2);
webView1.setWebViewClient(client);
webView2.setWebViewClient(client);
webView1.loadUrl(editText.getText().toString());
}
private WebViewClient client = new WebViewClient()
{
public void onPageFinished(WebView webView, String url)
{
if (webView == webView1)
webView2.setVisibility(View.GONE);
else
webView1.setVisibility(View.GONE);
webView.setVisibility(View.VISIBLE);
Toast.makeText(MainActivity.this, "WebView " + (webView == webView1 ? "One" : "Two") + " is showing", 0).show();
}
};
private void loadUrl(String url)
{
if (webView1.getVisibility() == View.GONE)
webView1.loadUrl(url);
else
webView2.loadUrl(url);
}
public void onClick(View v)
{
loadUrl(editText.getText().toString());
}
}
main.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<android.webkit.WebView android:id="#+id/webView_1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<android.webkit.WebView android:id="#+id/webView_2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:visibility="gone" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<EditText android:id="#+id/edit_url"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="4"
android:layout_gravity="center_vertical"
android:text="http://www.example.com" />
<Button android:id="#+id/button_load"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onClick"
android:text="Load" />
</LinearLayout>
</LinearLayout>

Strange behaviour when using WebView and RelativeLayout in fullscreen

EDIT:
Here's the video showing the problem: www.youtube.com/watch?v=5ZZsuMH5T9k I'm really stuck here :/
--
I have an activity which consists of a webview and a button at the bottom. I set the window of the activity to fullscreen using this code in onCreate:
#Override
public void onCreate(Bundle savedInstanceState) {
InstaFetchApplication.applyCurrentTheme(this);
super.onCreate(savedInstanceState);
getWindow().addFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON);
requestWindowFeature(Window.FEATURE_PROGRESS);
if (UserPreferences.getIsFullScreenReadingEnabled(this)) {
requestWindowFeature(Window.FEATURE_NO_TITLE);
// this just do this: window.setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
ActivityUtils.toggleFullScreen(this, true);
}
setContentView(R.layout.view_article);
// ...
}
The problem is that most of the time the webview seems to "push" the button off the screen. Here's the screenshot:
(larger version)
What I would expect to see (and sometimes I do) is here:
(larger version)
Here's the layout I'm using (note that in my app the top layout has to be a RelativeLayout):
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_test"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<Button
android:id="#+id/button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="Click me!"
/>
<WebView
android:id="#+id/web_view"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#id/button"
/>
</RelativeLayout>
I also noticed that if you turn off all animations on the device using system settings, the issue is gone (though there's this glitch when the whole view has a top margin and then it jumps back in the correct position).
Did anyone encounter similar problem and know how to fix it?

Finally I found the answer. Adding WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS flag to the window solved my problem.
See this post: flag_fullscreen + windowNoTitle == button focus bug.

I just added a button to the Hello WebView tutorial, and everything seems to look right. Then I converted main.xml from LinearLayout to RelativeLayout, and everything still seems to look right. I think you are making things too complicated. :-) Try removing most of that initialization code from onCreate() and just specify it in the XML.
Here is my project.
AndroidManifest.xml:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.android.hellowebview"
android:versionCode="1"
android:versionName="1.0" >
<uses-sdk android:minSdkVersion="4" android:targetSdkVersion="15" />
<uses-permission android:name="android.permission.INTERNET" />
<application
android:icon="#drawable/ic_launcher"
android:label="#string/app_name" >
<activity
android:name=".HelloWebViewActivity"
android:label="#string/app_name"
android:theme="#android:style/Theme.NoTitleBar"
>
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
HelloWebViewActivity.java:
package com.example.android.hellowebview;
import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.webkit.WebView;
import android.webkit.WebViewClient;
public class HelloWebViewActivity extends Activity {
WebView mWebView;
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main_rl);
mWebView = (WebView) findViewById(R.id.webview);
mWebView.setWebViewClient(new HelloWebViewClient());
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.loadUrl("http://www.google.com");
}
#Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) {
mWebView.goBack();
return true;
}
return super.onKeyDown(keyCode, event);
}
private class HelloWebViewClient extends WebViewClient {
#Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
}
}
main_ll.xml (LinearLayout):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<WebView
android:id="#+id/webview"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
/>
<Button
android:id="#+id/mainbtn"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:text="#string/btn_label"
/>
</LinearLayout>
main_rl.xml (RelativeLayout):
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<WebView
android:id="#+id/webview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#+id/mainbtn"
/>
<Button
android:id="#+id/mainbtn"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="#string/btn_label"
/>
</RelativeLayout>
strings.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="hello">Hello World, HelloWebViewActivity!</string>
<string name="app_name">HelloWebView</string>
<string name="btn_label">Push Me</string>
</resources>

Try to align the web view to the parent top, and align the button to the parent bottom and to be below the web view. I have found times when, for no real reason, the elements don't quite line up correctly if they are not all strung together in a linear sequence either anchored at the top or at the bottom of the screen.
I presume that you are not overriding the onMeasure() method and changing the measured height of the button. I've created numerous (too many) bugs during development of my apps by miscalculating the height of an element during the layout phase and have spent hours struggling with debugging the layout definition code only to find that it was fine, but the height calculation was feeding invalid data into the layout's rendering phase.

Unless the RelativeLayout is absolutely necessary, You could change to a LinearLayout:
<?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">
<WebView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="I'm a button"/>
</LinearLayout>
It should give a better result.

To hide the title bar I use:
getWindow().requestFeature(Window.FEATURE_NO_TITLE);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
Tested on a Galaxy S 2 (Android 2.3.3) and Huawei U8180 X1 (Android 2.2.2) and worked fine with your relative layout.
From the screenshot I have the impression that the problem lies rather with the incomplete progress indicator you requested. The fact that the problem disappears when turning off the animations also supports this theory.

You may try this. The top layout is still RelativeLayout, the only difference with yours is the LinearLayout is wrapping up everything:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_test"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:weightSum="1">
<WebView
android:id="#+id/web_view"
android:layout_width="fill_parent"
android:layout_height="0px"
android:layout_weight=".90" />
</LinearLayout>
</RelativeLayout>
In the LinearLayout, WebView occupies 90% of entire window(and parent) and the button remaining 10%. The height is set to 0px for both, so the weight can do the work for both of them. The cost for the parsing this xml is insignificant.
And in Java code I did:
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
getWindow().addFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON);
getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
requestWindowFeature(Window.FEATURE_NO_TITLE);
requestWindowFeature(Window.FEATURE_PROGRESS);
setContentView(R.layout.main);
LinearLayout mLinearLayout = (LinearLayout)findViewById(R.id.ll);
Button mButton = new Button(this);
LinearLayout.LayoutParams mParams = new LinearLayout.LayoutParams(LayoutParams.FILL_PARENT, 0, 0.10f);
mButton.setText("Click me!");
mButton.setLayoutParams(mParams);
mLinearLayout.addView(mButton);
mLinearLayout.invalidate();
}

below code might help you,
webView = (WebView) findViewById(R.id.webview1);
webView.setInitialScale(100);
webView.setWebViewClient(new WebViewClient() {
#Override
public void onPageFinished(WebView view, String url) {
// TODO Auto-generated method stub
super.onPageFinished(view, url);
view.scrollTo(0, 0);
}
#Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadDataWithBaseURL(null, yourdata, "text/html", "utf-8", null);
// view.loadUrl(url);
return true;
}
});
webView.setWebChromeClient(new WebChromeClient() {
#Override
public void onProgressChanged(WebView view, int newProgress) {
try {
//your stuff
} catch (Throwable e) {
e.printStackTrace();
}
}
}

How to set keyboard focus on WebView?

I have a simple WebView example app that has the following layout:
<?xml version="1.0" encoding="utf-8"?>
<!-- This file is /res/layout/main.xml -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<EditText android:id="#+id/urlToLoad"
android:hint="Type url to load"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
<Button android:id="#+id/webviewgo"
android:text="Go"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:enabled="false" />
<com.example.exWebView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/webview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
</LinearLayout>
It works as expected, but I am interested in routing a keyboard event to the WebView. Currently, even if I select the WebView (and scroll etc.), when I type any key, it goes to the EditText control... which is not what I want.
How do I make a keyboard event go to the WebView instead?

According to this thread, all you have to do is set, inside the main activity's OnCreate(), an OnTouchListener() with a requestFocus():
mWebView = (MyWebView) findViewById(R.id.webview);
mWebView.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
case MotionEvent.ACTION_UP:
if (!v.hasFocus()) {
v.requestFocus();
}
break;
}
return false;
}
});
What this code basically does is lock focus on any down or up event the moment it reaches your view. Note how it returns false, so that the event can further propagate to other views, as if it weren't handled.

Categories

Resources