Android Query Zoomable Web Image - fit to view

Question

I'm using Android-Query to load images into a webview, so I can use the zoom functionality that comes with that particular view.

Now, the images I'm loading are taller than they are wide, so, in my layout, are being cropped (can't see the bottom of the image in question).

Is there anyway I can alter my code to force the loaded image to scale to fit the view? The documentation says...

In addition to ImageView, a WebView can be used to display an image along with Android build in zoom support for WebView. Image will be centered and fill the width or height of the webview depending on it's orientation.

So I think I might be out of luck? Here's the relevant line of code that loads the image...

aq.id(R.id.webview).progress(R.id.progressbar).webImage(imageUrl);

And here's the layouyt..

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

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

    <ProgressBar
        android:id="@+id/progressbar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true" />
  </RelativeLayout>

score 0 · Accepted Answer · edited May 23 '17 at 10:25

Okay. got a solution that works for my particular scenario, so...

Since I knew the proportion of the image that was being loaded into the webview, I figured I could just resize the webview to the correct ratio to make sure that it fitted the available space correctly. I updated the XML to this...

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

    <LinearLayout
        android:id="@+id/wrapper"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center"
        android:orientation="vertical" >

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

    </LinearLayout>

    <ProgressBar
        android:id="@+id/progressbar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true" />

</RelativeLayout>

...then added this to my activity (idea taken from here)...

@Override
public void onWindowFocusChanged(boolean hasFocus) {

    // need to set correct proportions of webview to match image
    super.onWindowFocusChanged(hasFocus);
    WebView mWrapper = (WebView) findViewById(R.id.webview);
    int w = mWrapper.getWidth();
    int h = mWrapper.getHeight();
    while ( w * 1.28 > h ) {
        w--;
    }
    LayoutParams params = new LinearLayout.LayoutParams( (int) w, LinearLayout.LayoutParams.FILL_PARENT );
    mWrapper.setLayoutParams(params);
}

...where the "1.28" value is the ratio between the width and height of my image (height divided by width).

So, image gets added to the webview, view gets laid out, then this code kicks in and shrinks the width until it's small enough to fit in the available height using the appropriate ratio. The new LinearLayout centers the webview to keep things looking tidy.

Android Query Zoomable Web Image - fit to view

1 Answers1