ImageView: Filling a Horizontal Supporting Aspect Ratio

Question

I need the ImageView to scale the image to fit the parent horizontally.

If the background of the image is red and the rest of the content (below the image) is green, I am looking for the result shown in Image 1 . This result is automatically obtained if the image width is greater than the screen width.

But if this is a small image, as in picture 2. the best result I can get is picture 3 (setting the width and height of ImageView fill_parent ), and scaleType for FitStart

Image 4 is obtained by setting height = wrap_content, width = fill_parent, scaleType = CenterCrop. It needs to scale vertically to display the whole image, but since scaleType says it will drop it.

Any ideas for getting image 1, even if the image is small?

Will give a reward of 50 for a working answer

Answer 1

I found a lightweight solution that works great for me. Set the width and height, for example:

android:layout_width="fill_parent" android:layout_height="wrap_content" 

Then you also set this parameter:

 android:adjustViewBounds="true" 

"adjustViewBounds" defaults to false (which I find odd), but setting it makes it easier to populate the image in the image view.

Answer 2

This is possible without custom classes. This is the result I got with a small image:

With a large image:

You must use RelativeLayout for this to work, but you can combine it with LinearLayout to achieve what you need. Here is my xml:

 <?xml version="1.0" encoding="utf-8"?> <ScrollView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:fillViewport="true"> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" > <LinearLayout android:id="@+id/button_container" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:layout_alignParentBottom="true" > <Button android:text="button" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <Button android:text="button" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <Button android:text="button" android:layout_width="wrap_content" android:layout_height="wrap_content"/> </LinearLayout> <ImageView android:src="@drawable/cat" android:layout_width="match_parent" android:layout_height="match_parent" android:adjustViewBounds="true" android:scaleType="centerCrop" android:layout_above="@id/button_container"/> </RelativeLayout> </ScrollView> 

The trick is that you set it to fill the screen, but it should be higher than other layouts. This way you achieve everything you need.

Answer 3

Try the following:

 import android.content.Context; import android.graphics.Matrix; import android.graphics.drawable.Drawable; import android.util.AttributeSet; import android.view.ViewGroup; public class CustomImageView extends android.widget.ImageView { public CustomImageView(Context context) { super(context); } public CustomImageView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); } public CustomImageView(Context context, AttributeSet attrs) { super(context, attrs); } public void fitYUniformly() { final Drawable drawable = getDrawable(); if (drawable == null) return; final int dwidth = drawable.getIntrinsicWidth(); final int dheight = drawable.getIntrinsicHeight(); if (dwidth == -1 || dheight == -1) return; int vheight = this.getHeight(); float scale = (float) vheight / (float) dheight; final int vwidth = (int) (dwidth * scale); scale(scale, vwidth, vheight); } public void fitXUniformly(int parentWidth) { final Drawable drawable = getDrawable(); if (drawable == null) return; final int dwidth = drawable.getIntrinsicWidth(); final int dheight = drawable.getIntrinsicHeight(); if (dwidth == -1 || dheight == -1) return; int vwidth = parentWidth;// here,you need to pass the width of parentview // int vwidth = this.getWidth(); float scale = (float) vwidth / (float) dwidth; final int vheight = (int) (dheight * scale); scale(scale, vwidth, vheight); } private void scale(float scale, int newWidth, int newHeight) { final ViewGroup.LayoutParams params = this.getLayoutParams(); params.width = newWidth; params.height = newHeight; this.setLayoutParams(params); this.setScaleType(ScaleType.MATRIX); final Matrix matrix = new Matrix(); matrix.setScale(scale, scale); this.setImageMatrix(matrix); } } 

Note:

Remember to call fitXUniformly(parentWidth); . here parentWidth will be the width of the CustomImageView parent.

Hope this will be helpful!