scaling webview to the entire screen in android

Question

I am trying to scale the webview to the size of the screen , but I have failed at it .. I have tried lots of combinations but none of them worked for me .What am I missing in that code ? Any help is greatly appreciated.

package com.example.images;

import android.app.Activity; 
import android.os.Bundle; 
import android.webkit.WebView; 

public class MainActivity extends Activity { 

private WebView webView; 
@Override 
public void onCreate(Bundle savedInstanceState) { 
   super.onCreate(savedInstanceState); 
   setContentView(R.layout.main); 
  webView  = (WebView) findViewById(R.id.webview_compontent); 


  String r="<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0,target-densityDpi=device-dpi\">"; 

        String s="<html><head>"+"<style>body{margin:0; }</style>" +r+"</head>" +"<body>"+
           "<IMG src="+ "\"http://46.20.150.55/member/Resimler/kampanya/195/314/blackmakas1.jpg\">" +
           "<DIV style=\"Z-INDEX: 1; POSITION: absolute; TEXT-ALIGN: center; BACKGROUND-COLOR: white;" +
           "WIDTH: 80px; TOP: 137px; LEFT: 121px\">564524</DIV>"+"</body><html>"; 

   webView.setBackgroundColor(0); 
   webView.setBackgroundResource(R.drawable.android); 
   webView.loadData(s, "text/html","UTF-8");  



  //doesn't work
  /*webView.getSettings().setLoadWithOverviewMode(true); 
   webView.getSettings().setUseWideViewPort(true); 

   try { 
       // load the url 
       webView.loadData(s, "text/html","UTF-8");
   } catch (Exception e) { 
       e.printStackTrace(); 
   } */

   //doesn't work

 /* webView.setInitialScale(1); 
  webView.getSettings().setLoadWithOverviewMode(true); 
  webView.getSettings().setUseWideViewPort(true); 
  webView.getSettings().setJavaScriptEnabled(true); 
  */

  //doesn't work

  /* String p="<html><head>"+"<style>body{margin:0; }</style>" +r+"</head>" +"<body>"+
           "<IMG src="+ "\"http://46.20.150.55/member/Resimler/kampanya/195/314/blackmakas1.jpg\">" +
           "<DIV style=\"Z-INDEX: 1; POSITION: absolute; TEXT-ALIGN: center; BACKGROUND-COLOR: white;" +
           "WIDTH: 80px; TOP: 137px; LEFT: 121px\">564524</DIV>"+"</body><html>"; 

   webView.loadData(p, "text/html","UTF-8");

   webView.getSettings().setJavaScriptEnabled(true); 
   webView.getSettings().setLoadWithOverviewMode(true); 
   webView.getSettings().setUseWideViewPort(true); 
   webView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY); 
   webView.setScrollbarFadingEnabled(false);   */   

  } }

Here is main.xml

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

  >


 <WebView
     android:id="@+id/webview_compontent"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"

 />


 </LinearLayout>

And here is manifest file

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.images"
android:versionCode="1"
android:versionName="1.0" >

<uses-sdk
    android:minSdkVersion="8"
    android:targetSdkVersion="15" />

<application
    android:icon="@drawable/ic_launcher"
    android:label="@string/app_name"
    android:theme="@style/AppTheme" >
    <activity
        android:name=".MainActivity"
        android:label="@string/title_activity_main" >
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />

            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>
</application>

(Editted)

The webpage I get is :

This is the page that I get .. What I want is to fit that advertisement image to all the screen.

enter image description here

Please show main layout xml. BTW there is a chance you're using wrong layout params (i.e. wrap_content instead of match_parent). — sinek, Jul 31 '12 at 14:46
editted right now, i have tried many things but nothing else worked:( where am i making mistake ? — asdfg, Jul 31 '12 at 14:51
Well I think that should work too but please try with relative layout and match_parent since fill_parent is obsolete. — sinek, Jul 31 '12 at 14:54
What about this? http://stackoverflow.com/questions/4748888/webview-with-full-screen-in-android — sinek, Jul 31 '12 at 15:45
I have tried them , but i still couldn't succeed. The thing I want is to fit that html page to the screen . The page is relatively small to the screen , I would like to fit those two . — asdfg, Aug 01 '12 at 07:16

Tuna Karakasoglu · Accepted Answer · 2012-08-01T07:35:38.523

0

The problem is your webwiew is fullscreen but blackmakas is not. webView.setBackgroundResource(R.drawable.android); this line shows that you have the fullscreen. The problem is in your html.

edited Aug 01 '12 at 07:35

answered Jul 31 '12 at 14:55

Tuna Karakasoglu

1,262
9
28

thank you , i have tried it but now i get "the application has stopped unexpectedly" error.. – asdfg Jul 31 '12 at 15:06
Please place it right after super.onCreate(savedInstanceState); – Tuna Karakasoglu Jul 31 '12 at 20:00
I have tried it but it couldn't get it worked , it just removes the status bar above , the size of the webview still does not fit the screen , it is still small – asdfg Aug 01 '12 at 07:13
Can you please post a screenshot. Then we can see it. – Tuna Karakasoglu Aug 01 '12 at 07:16
I have uploaded the image just now ,the thing I want is to fit the image on the left handside to all the screen . – asdfg Aug 01 '12 at 07:31
Siyah makas is nice:) But the problem is your webwiew is fullscreen but blackmakas is not. webView.setBackgroundResource(R.drawable.android); this line shows that you have the fullscreen. The problem is in your html. – Tuna Karakasoglu Aug 01 '12 at 07:33
It is true the advertisement picture in that html page doesnt fit all the screen normally too , the html contents are the things that I get from services .. I am confused now,then what is the main target of the webview then :( why are those kind of functions ; webView.getSettings().setLoadWithOverviewMode(true); webView.getSettings().setUseWideViewPort(true); ? – asdfg Aug 01 '12 at 08:20
The main target of WebView is to show html content and websites. You can see : http://stackoverflow.com/questions/5448841/what-do-setusewideviewport-and-setloadwithoverviewmode-precisely-do for those functions. – Tuna Karakasoglu Aug 01 '12 at 08:47
I misunderstood and thought they could also resize the - not full screen page- too , now i understand correctly.Now I have another problem , when I run the code again ,the numbers on the picture are lost .The problem is in the html again . Do you know how can I solve that ? – asdfg Aug 02 '12 at 07:26
Please try your html code here: http://htmledit.squarefree.com/ and if there is a problem you can see easily. – Tuna Karakasoglu Aug 02 '12 at 10:03

score 0 · Answer 2 · answered Jul 31 '12 at 17:38

I think you need to use a WEbViewClient to load the url into a full screen image because the problem you are facing is that you are trying to load the webview with a width and height before the view is actually set .

Try following the tutorials here at : http://www.technotalkative.com/android-webviewclient-example/ and this one : http://www.chrisdanielson.com/tag/webviewclient/

scaling webview to the entire screen in android

2 Answers2