WebView with only an image doesn't fit in screen

Question

I am messing around with an Rss reader for my site and I have got the <description> tag that includes both text and an image. To use them without problems I split the text and the image in two strings. I am using a webview to load the image since the image string I created contains a <img src> tag.

Everything is mostly working as it should but in my tests in the emulator, the image appears properly in screens up to 720p. When I use an emulator for a Nexus 5 for example that has 1080p, the image doesn't scale to the screen and i get a scrollbar to the right.

To understand the problem here is the image in a 720p screen: https://i.sstatic.net/u361B.jpg and the image in 1080p: http://imgur.com/7zGkX0J

The xml of the fragment i'm displaying all this:

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

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:text="@string/title"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textStyle="bold" />

    <ScrollView
        android:id="@+id/sv"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_below="@id/title"
        android:layout_marginTop="10dp" >

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >

            <WebView
                android:id="@+id/imgWebView"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:scrollbarStyle="insideOverlay"
                android:text="@string/desc" />

            <WebView
                android:id="@+id/textWebView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/imgWebView"
                android:scrollbarStyle="insideOverlay"
                android:text="" />

            <WebView
                android:id="@+id/fullWebView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:scrollbarStyle="insideOverlay"
                android:text=""
                android:visibility="gone" />

            <Button
                android:id="@+id/readMore"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/textWebView"
                android:layout_centerHorizontal="true"
                android:text="@string/fullArticle" />
        </RelativeLayout>
    </ScrollView>

</RelativeLayout>

and the code for this specific webview is this:

final WebView imgW = (WebView) view.findViewById(R.id.imgWebView);
WebSettings ws = imgW.getSettings();
        ws.setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
        ws.setLightTouchEnabled(false);
        ws.setPluginState(PluginState.ON);
        ws.setJavaScriptEnabled(true);
        ws.setLoadWithOverviewMode(true);
        ws.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");

imgW.loadDataWithBaseURL("http://www.liveplace.gr/", imgCode, "text/html", "UTF-8", null);

any idea why this may be happening?

Answer 1

May this help you:

Below lines will fix sizes based on screen size...

WebSettings settings = yourWebView.getSettings();
settings.setUseWideViewPort(true);
settings.setLoadWithOverviewMode(true);

OR

Refer This Link for Alternate way...