How to maintain the aspect ratio of the image if imageview first stretch to fill parent

Question

I want to stretch the image to fill width and adjust the height according to width and maintain the aspect ratio. I want it should cover entire width (fillparent) and height of imageview should adjust like in way so that aspect ratio is maintained.

I tried fit_xy but not working in my case. Please help me

Carrel

you need to set the height of image in dp, as only dp varies according to the size of screen. – Pizzicato

but it should be in good way.. i can't set here fixed..i want to maintain the aspect ratio also – Carrel

dp will automatically adjust itself. – Pizzicato

Answer 1

There can two possible workarounds even if you set the scale type fit_xy

1) By default Android will scale your image down to fit the ImageView, maintaining the aspect ratio. However, make sure you're setting the image to the ImageView using android:src="..." rather than android:background="...". src= makes it scale the image maintaining aspect ratio, but background= makes it scale and distort the image to make it fit exactly to the size of the ImageView. (You can use a background and a source at the same time though, which can be useful for things like displaying a frame around the main image, using just one ImageView.)

2)You should also see android:adjustViewBounds to make the ImageView resize itself to fit the rescaled image. For example, if you have a rectangular image in what would normally be a square ImageView, adjustViewBounds=true will make it resize the ImageView to be rectangular as well. This then affects how other Views are laid out around the ImageView.

you can change the way it default scales images using the android:scaleType parameter. By the way, the easiest way to discover how this works would simply have been to experiment a bit yourself! Just remember to look at the layouts in the emulator itself (or an actual phone) as the preview in Eclipse is usually wrong.

Coptic

This doesn't actually solve the problem for the OP as none of the solutions this answer presents fill the screen with aspect ratio retained correctly. However there IS useful information in this answer for those wishing to learn more about how the android view system works. My answer (below) does solve the OP's requirements correctly so is worth a look as well. – Weaver

Answer from : #2522459 – Anatomical

Answer 2

I'm not sure when the feature I use was added to the Android SDK but there is a simple solution that does exactly what the OP is looking for:

As expected, set layout:width and layout:height to fill_parent.

As another responder mentioned correctly, use src to find your image, not background.

However instead of trying scaleType of fit_xy (which finds the narrowest side to fit into the view rather than the longest side), use scaleType of centerCrop.

centerCrop will center and fill in the viewport while retaining aspect ratio.

Hope this helps! I used it for the webView loading overlay of a commercial app I developed for my current employer.

Copy/paste solution: in your activity XML file, add the following lines:

<ImageView
    android:id="@+id/logo"
    android:layout_width="wrap_content"
    android:layout_height="fill_parent"
    android:scaleType="centerCrop"
    android:src="@drawable/your_image_name"
    />

Weaver

I've added a copy/paste solution based upon your excellent answer. Please edit/delete as you see fit. – Olivann

Thanks Bart van Kuik, much appreciated :-) – Weaver

Answer 3

There are two ways of doing this: First find the display height and width and call this method

private void scaleImage(int displayWidth) {

    // Get the ImageView and its bitmap

             width=displayWidth;
    Drawable drawing = holder.imagepost.getDrawable();

    {
        Bitmap bitmap = ((BitmapDrawable) drawing).getBitmap();


        int bounding = dpToPx(width);

        // Determine how much to scale: the dimension requiring less
        // scaling is
        // closer to the its side. This way the image always stays
        // inside your
        // bounding box AND either x/y axis touches it.
        float xScale = ((float) bounding) / width;
        float yScale = ((float) bounding) / height;
        float scale = (xScale <= yScale) ? xScale : yScale;

        // Create a matrix for the scaling and add the scaling data
        Matrix matrix = new Matrix();
        matrix.postScale(scale, scale);

        // Create a new bitmap and convert it to a format understood by
        // the ImageView
        Bitmap scaledBitmap = Bitmap.createBitmap(bitmap, 0, 0, width,
                height, matrix, true);
        width = scaledBitmap.getWidth(); // re-use
        height = scaledBitmap.getHeight(); // re-use
        BitmapDrawable result = new BitmapDrawable(scaledBitmap);

        // Apply the scaled bitmap
        holder.imagepost.setImageDrawable(result);

        // Now change ImageView's dimensions to match the scaled image
        LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) holder.imagepost
                .getLayoutParams();
        params.width = width;
        params.height = height;
        holder.imagepost.setLayoutParams(params);

    }

}

private int dpToPx(int dp) {
    float density = context.getResources().getDisplayMetrics().density;
    return Math.round((float) dp * density);
}

Or the Best way i know is to use Android Query

Here is the link http://code.google.com/p/android-query/ and you can download from there itself.Below id the code to maintain the Aspect Ratio

aq.id(R.id.imageView)

                .image(imageString, true, true,
                        displaywidth, 0, null, AQuery.FADE_IN, AQuery.RATIO_PRESERVE);

Lorca

Answer 4

Below solution is working fine for me.

Use AQuery Libray option "AQuery.RATIO_PRESERVE" to preserve aspect ratio:

aq.id(R.id.imgView).progress(R.id.imgPb).image(url, true, true,150, 0,null,AQuery.FADE_IN,AQuery.RATIO_PRESERVE);

Use below settings for ImageView:

<ImageView
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:scaleType="fitXY"/>

Use below settings for auto GridView Columns:

<GridView xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/gridView"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:numColumns="auto_fit"
 android:columnWidth="150dp"/>

Seaver