Scale WebView images only to fit screen android

Question

I have view with ImageView, TextView and WebView. View xml:

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

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ImageView
        android:id="@+id/article_details_image_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true" />

    <TextView
        android:id="@+id/article_details_title_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/article_details_image_view"
        android:layout_margin="5dp" />

    <TextView
        android:id="@+id/article_details_author_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/article_details_title_text_view"
        android:layout_margin="5dp" />

    <TextView
        android:id="@+id/article_details_date_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/article_details_author_text_view"
        android:layout_margin="5dp" />

    <WebView
        android:id="@+id/article_details_body_text_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/article_details_date_text_view"
        android:layout_margin="5dp" />
</RelativeLayout>

WebView gets html body from string that I get from blog. It shows text fine but images is too big and I can scroll WebView horizontaly. I've tried to use:

webView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);    

But nothing happens and I've tried:

WebView browser = (WebView) findViewById(R.id.webview);
browser.getSettings().setLoadWithOverviewMode(true);
browser.getSettings().setUseWideViewPort(true);    

It does scales images from HTML to perfect size, but scales text too and text size becomes very small. How should I get same text size but scaled images?

How it looks in app:

http://i.stack.imgur.com/h0yv2.jpg

How it looks in HTML:

http://i.stack.imgur.com/oFVkE.jpg

Answer 1

I will help you to solve this problem partially. Have you heard about WebSettings.LayoutAlgorithm.TEXT_AUTOSIZING which is introduced in Android API level 19. This will solve your problem for text as well as images in webview. For android version 4.4 and above its working fine.

webView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.TEXT_AUTOSIZING); 

For below versions there is no perfect solution yet I found. Please check below discussion.

WebView : WebSettings.LayoutAlgorithm.TEXT_AUTOSIZING : Below Andoird 4.4?

Also you can use webSettings.setDefaultFontSize((int)fontSize); method to manage your text size in webview. Hope this will help you.