Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Scale ImageView to fit screen width/height while maintaining aspect ratio

I'm developing a mobile app on Xamarin.

In the app, there's an ImageView displaying an image that is too small to fit the width of the screen.

I want to scale the image to fit the width of the screen while maintaining the aspect ratio.

My axml

<LinearLayout
    android:id="@+id/overlayImageContainer"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content">
    <ImageView
        android:id="@+id/overlayImageView"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:adjustViewBounds="true"
        android:scaleType="fitCenter"/>
</LinearLayout>

The result

Two ImageViews displaying a) a picture that is wider than the width of the screen and b) a picture that is narrower than the width of the screen

Two ImageViews displaying a) a picture that is wider than the width of the screen and b) a picture that is narrower than the width of the screen

I've tried various combinations of android:scaleType and android:adjustViewBounds="true" without success.

like image 639
nitech Avatar asked Oct 11 '25 17:10

nitech


1 Answers

It turned out to be a bit hard, and not possible out of the box. Many have similar problems.

I ended up porting @patrick-boos solution to .Net like so:

Extended ImageView Class

using Android.Content;
using Android.Util;
using Android.Widget;

namespace Nsa.BigBrotherUtility.Helpers
{
    /// <summary>
    /// DynamicImageView is a helper extension that overrides OnMeasure in order to scale the said image
    /// to fit the entire width/or height of the parent container. 
    /// </summary>
    public class DynamicImageView : ImageView
    {
        public DynamicImageView(Context context, IAttributeSet attributeSet) : base(context, attributeSet)
        {

        }

        protected override void OnMeasure(int widthMeasureSpec, int heightMeasureSpec)
        {
            int width = MeasureSpec.GetSize(widthMeasureSpec);
            int height = width * Drawable.IntrinsicHeight / Drawable.IntrinsicWidth;
            SetMeasuredDimension(width, height);
        }

    }
}

My axml

<Nsa.BigBrotherUtility.Helpers.DynamicImageView
  android:id="@+id/overlayImageView"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:layout_gravity="center_vertical"
/>

The result

The 600x600 image now stretches to fill width of screen while maintaining aspect ratio

technical drawing being stretched to fit width of screen

like image 101
Community Avatar answered Oct 14 '25 06:10

Community