Clever Geek Handbook

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

I have a simple widget containing ImageView

. I would like to get an image from the internet and display it in ImageView

, keeping 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:

enter image description here

I would like the image to always match the height ImageView

. This bit was simple. If the width is ImageView

less than the width of the image, I don't mind if the image is cropped horizontally while maintaining the aspect ratio. I have set the maximum size of the widget so that it does not exceed the size of the image, so we do not need to worry about cases where the height is ImageView

greater than the image.

I got terribly lost in this and started wondering if this is possible as there doesn't seem to be a way to access the dimensions of the widget. Sometimes the most trivial things are afraid.

0


source to share


1 answer


Assuming part of this question is how to maximize the height of the widget given the number of cells it occupies (per padding_parent in LinearLayout and assuming you are open to clipping width). I'll ignore the cropping part of the question and provide an example that maintains the given aspect ratio.

The best way I've managed to keep the aspect ratio on the AppWidget at its maximum height is to create an XML Drawable with a fixed aspect ratio, scale it to the maximum height of the widget, and then bind the ImageView's sides 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 drawable (frame_aspect.xml) that defines the aspect ratio. Note. It is important that this form is larger than your widget. The built-in scaleTypes do a good job of scaling down, but not that good at scaling.

<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 in the ImageView to determine if any crop is better.

+1


source






More articles:


All Articles