CODEWITHSUNDEEP
javaandroidandroid-webview
AhabLives
AhabLives

Reputation: 1468

Android WebView single image, remove white space on the right

I have tried\applied all the suggestions from StackOverflow...to no avail. What am I missing ? Thank you.

enter image description here

webView = (WebView) findViewById(R.id.webView1);
     String imagePath = "file:///android_asset/menu.jpg";
     webView.loadData("<html><style type='text/css'>img {max-width: 100%;height:initial;} div,p,span,a {max-width: 100%;}</style><body style='margin: 0; padding: 0'></html>","text/html", "utf-8");
        webView.getSettings().setUserAgentString("Mozilla/5.0 (Linux; U; Android 2.0; en-us; Droid Build/ESD20) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17");

     webView.setPadding(0, 0, 0, 0);

     webView.setInitialScale(1);
     webView.getSettings().setJavaScriptEnabled(true);
     webView.getSettings().setLoadWithOverviewMode(true);
     webView.getSettings().setUseWideViewPort(true);
     webView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
     webView.setScrollbarFadingEnabled(false);
     webView.loadUrl(imagePath);

Layout

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >


     <ImageView
        android:id="@+id/imageView1"
        android:layout_width="fill_parent"
        android:layout_height="45dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:scaleType="centerCrop"
        android:src="@drawable/sendblank" />

    <TextView
        android:id="@+id/tvHeader"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/imageView1"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:gravity="center_vertical"
        android:text="Web"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textColor="#ffffff"
        android:textSize="30dp"
        android:textStyle="bold"
        android:typeface="serif" />




      <Button
        android:id="@+id/Button03"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="70dp"
        android:layout_height="30dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginTop="7dp"
        android:background="@drawable/sendblank"
        android:onClick="onHome"
        android:text="Back"
        android:textColor="#ffffff"
        android:typeface="serif" />


 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"    
        android:layout_gravity="center"
    android:layout_alignParentBottom="true"
   android:layout_alignParentLeft="true"
          android:layout_margin="0dp"
        android:paddingLeft="0dp"
        android:paddingRight="0dp"
        android:paddingTop="45dp">

      <WebView android:id="@+id/webView1"
         android:layout_width="wrap_content"
        android:layout_height="wrap_content"
            />

    <TextView
        android:id="@+id/tV1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Loading..."
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:textColor="#000000" >
</TextView>

<ProgressBar android:id="@+id/pB1"
    style="?android:attr/progressBarStyleHorizontal" android:layout_width="fill_parent"
    android:layout_height="wrap_content" android:layout_centerVertical="true"
    android:padding="2dip">
</ProgressBar>
</RelativeLayout>

Many Thanks....I honestly believe I have tried all the suggestions so I am not sure why it is not working in my case? Have I applied the suggestions in the wrong way or place ??? -Thanks for the help.

Upvotes: 1

Views: 2240

Answers (1)

James Holderness
James Holderness

Reputation: 23001

First you're loading some html with style information, but no actual content in the webView.loadData call. But then you're completely replacing that html by loading an image url with the webView.loadUrl call.

If you want to load an image with styling you need to create the markup with an img tag pointing to your image url. Then you can load that markup with the webView.loadData call.

Also, looking at your markup, that CSS wouldn't work as intended even if you had included the image. You've set the max-width of the image to 100%, which means it won't ever be wider than 100%, but that doesn't mean it won't be narrower. If you want the image to always fill the width of the screen, you should set the width property to 100%.

In addition, that markup is missing a closing body tag, and the style element should really be enclosed in a head tag. The browser won't mind, but you shouldn't make a habit of using bad markup, because it can end up having unexpected behaviour.

Finally, there's a whole bunch of styling there for other elements that appears to serve no purpose, since those elements don't exist.

So correcting all of the above, your code might look something like this:

String imagePath = "file:///android_asset/menu.jpg";
String markup = "<html><head><style type='text/css'>img {width: 100%%;}</style></head><body style='margin: 0; padding: 0'><img src='%s' /></body></html>";
markup = String.format(markup, imagePath);
try {
  markup = URLEncoder.encode(markup,"utf-8");
} catch (UnsupportedEncodingException e) {
} 
markup = markup.replace('+',' ');
webView.loadData(markup, "text/html", "utf-8");

Upvotes: 2

Related Questions