CODEWITHSUNDEEP
androidwebviewandroid-webview
DevNull
DevNull

Reputation: 763

Android WebView width

I'm trying to control the width scale of a WebView. After spending about two full days. I'm still left where i started. I have followed the following documentation: http://developer.android.com/guide/webapps/targeting.html http://developer.android.com/guide/practices/screens_support.html

I have experimented with the meta tags, css, WebView.setInitialScale. Sometimes the changes makes the WebView clip the middle of the screen out, sometimes one third. When you think you have found a predictable pattern in the madness, you find out that layout response is total random. Does anybody know if there is a way forward implementing embedded HTML5 web pages on the Android platform or is it just something that the Android platform isn't ready for yet?

Upvotes: 0

Views: 5090

Answers (2)

DevNull
DevNull

Reputation: 763

I have reached the conclusion that the only way to modify the WebView width is to manipulate the target-densitydpi found in the html meta tag By setting the target-densitydpi to my device width i get the web page to span the entire width of the screen. By creating the html file at runtime i can fill in the target-densitydpi with the detected device width. Yikes!!

Upvotes: 0

ckozl
ckozl

Reputation: 6761

I'm not sure where exactly you went wrong but here's some boilerplate code I use for testing my embedded WebViews. I should mention that I mainly target Honeycomb (3.x), but you didnt' specify so:

Here's the simple sample layout:

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

Now here's the code for the Activity backer:

import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.webkit.ConsoleMessage;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.widget.FrameLayout;
import android.widget.Toast;

public class WebViewTestActivity extends Activity {

@Override
public void onCreate(Bundle savedInstanceState) {

    final String TAG = "webview test";

    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);     

    FrameLayout vg = (FrameLayout) findViewById(R.id.FrameLayout1);
    WebView webView = new WebView(this);

    vg.removeAllViews();
    vg.addView(webView);

    WebSettings settings = webView.getSettings();           
    settings.setSupportZoom(false);
    settings.setJavaScriptEnabled(true);

    webView.setWebChromeClient(new WebChromeClient() {
        @Override
        public boolean onConsoleMessage(ConsoleMessage cm) {

            Log.i(TAG, cm.messageLevel() + ": " + cm.message() + " -- From line " + cm.lineNumber() + " of " + cm.sourceId() );

            return true;
        }
    });

    webView.addJavascriptInterface(new Object() {

        @SuppressWarnings("unused")
        public void foo() {
            Log.i(TAG, "----- FOO CALLED -----");
            Toast.makeText(WebViewTestActivity.this, "foo called", Toast.LENGTH_LONG).show();
        }

    }, "android");

    String html = "<!DOCTYPE html><html><body style=\"background:black;color:white;padding:20px;\"><a href=\"javascript:android.foo()\">CLICK ME!</a><div><label>HTML5 number input: <input type=number /></label></div></body></html>";
    webView.loadDataWithBaseURL("http://yourOptionalBaseUrl.com/", html, "text/html", "utf-8", null);   
}        
}

...and that's all you need to have an embedded html5 page. You can also put your html page into your "assets" folder and load it using:

webView.loadUrl("file:///android_asset/page.html");

or embed just a single resource like

or just point it to your server using the same load URL syntax from before

webView.loadUrl("http://www.yourpage.com/android?param=custom");

... i hope this helps...

Upvotes: 1

Related Questions