CODEWITHSUNDEEP
androidandroid-imageviewaspect-ratio
android
android

Reputation: 3381

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

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

Upvotes: 5

Views: 13971

Answers (4)

Ayman Al-Absi
Ayman Al-Absi

Reputation: 2846

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"/>

Upvotes: 1

Don Kelley
Don Kelley

Reputation: 170

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"
    />

Upvotes: 3

PgmFreek
PgmFreek

Reputation: 6402

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.

Upvotes: 10

Akhilesh Sk
Akhilesh Sk

Reputation: 451

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);

Upvotes: 2

Related Questions