How can I fill an ImageView in an Appwidget while mainiting the aspect ratio?

Question

I have a simple widget containing an ImageView. I'd like to fetch an image from the web and display it in the ImageView while maintaining the aspect ratio.

Here's the layout definition for the widget:

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

    <ImageView
        android:id="@+id/quality_image"
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/widget_icon"
        android:layout_marginBottom="@dimen/widget_spacing"
        android:scaleType="fitXY" />

</LinearLayout>

..and this is the image in question:

I'd like the image to always fit the height of the ImageView. This bit has been easy. If the width of the ImageView is less than that of the image, I don't mind if the image gets cropped horizontally as long as the aspect ratio is maintained. I've set the maximum size of the widget to never be more than the size of the image so we don't have to worry about cases when the height of the ImageView is more than the image.

I'm terribly lost with this and have begin wondering if this is even possible since there doesn't seem to be way to access the widget dimensions. Sometimes the most trivial things bog you down.

Answer 1

Assuming that part of this question is to maximize the height of the widget given the number of cells it occupies (per the fill_parent in the LinearLayout and given you’re open to cropping the width). I’ll ignore the cropping part of the question and provide an example that maintains a specified aspect ratio.

The best way I’ve found to maintain aspect ratio on an AppWidget at maximum height is to create an XML Drawable of a fixed aspect ratio, scale it down to the max height of the widget, and then tie the sides of the ImageView to it using a RelativeLayout. Example:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/widget_layout"
    android:layout_width="wrap_content"
    android:layout_height="fill_parent" >

    <ImageView
        android:id="@+id/aspectratio"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:adjustViewBounds="true"
        android:src="@drawable/frame_aspect"
        android:scaleType="fitCenter" >
    </ImageView>

    <ImageView
        android:id="@+id/quality_image"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_alignLeft=”@id/aspectratio”
        android:layout_alignRight=”@id/aspectratio”
        android:layout_alignTop=”@id/aspectratio”
        android:layout_alignBottom=”@id/aspectratio”
        android:scaleType="fitCenter" >
</RelativeLayout>

Here is the layout for the drawable (frame_aspect.xml) that specifies the aspect ratio. Note - it is important that this shape is larger than your widget will ever be. The built in scaleType’s do a good job scaling down, but are not so good at scaling up.

<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape = "rectangle">

    <size 
        android:width="1000px"
        android:height="500px"/>
</shape>

Now that you have a widget with quality_image scaled to the maximum height for a given aspect ratio, you can play with the scaleType on the ImageView to determine what if any cropping is best.