Android How to stretch an image to the screen width while maintaining aspect ratio

Question

I want to download an image  of unknown size  but which is always roughly square  and display it so that it fills the screen horizontally  and stretches vertically to maintain the aspect ratio of the image  on any screen size  Here is my  non-working  code  It stretches the image horizontally  but not vertically  so it is squashed     ImageView mainImageView   new ImageView context       mainImageView setImageBitmap mainImage     downloaded from server     mainImageView setScaleType ScaleType FIT XY         mainImageView setAdjustViewBounds true          with this line enabled  just scales image down     addView mainImageView new LinearLayout LayoutParams               LayoutParams FILL PARENT  LayoutParams FILL PARENT

User · Answer

In some cases this magic formula beautifully solves the problem.

For anyone struggling with this coming from another platform, the "size and shape to fit" option is handled beautifully in Android, but it's hard to find.

You typically want this combination:

width match parent,
height wrap content,
adjustViewBounds turned ON (sic)
scale fitCenter
cropToPadding OFF (sic)

Then it's automatic and amazing.

If you're an iOS dev, it's utterly amazing how simply, in Android, you can do "totally dynamic cell heights" in a table view .. err, I mean ListView. Enjoy.

<com.parse.ParseImageView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/post_image"
    android:src="@drawable/icon_192"
    android:layout_margin="0dp"
    android:cropToPadding="false"
    android:adjustViewBounds="true"
    android:scaleType="fitCenter"
    android:background="#eff2eb"/>

enter image description here

User · Answer

I have managed to achieve this using this XML code only  It might be the case that eclipse does not render the height to show it expanding to fit  however  when you actually run this on a device  it properly renders and provides the desired result   well at least for me    lt FrameLayout      android layout width  match parent       android layout height  wrap content  gt         lt ImageView           android layout width  match parent            android layout height  wrap content            android adjustViewBounds  true            android scaleType  centerCrop            android src   drawable whatever    gt   lt  FrameLayout gt

User · Answer

Look there is a far easier solution to your problem   ImageView imageView   protected void onCreate Bundle savedInstanceState       super onCreate savedInstanceState       setContentView R layout your layout       imageView   ImageView findViewById R id your imageView       Bitmap imageBitmap   BitmapFactory decodeResource getResources    R drawable your image       Point screenSize   new Point        getWindowManager   getDefaultDisplay   getSize screenSize       Bitmap temp   Bitmap createBitmap screenSize x  screenSize x  Bitmap Config ARGB 8888       Canvas canvas   new Canvas temp       canvas drawBitmap imageBitmap null  new Rect 0 0 screenSize x screenSize x   null       imageView setImageBitmap temp

User · Answer

This working fine as per my requirement   lt ImageView             android id    id imgIssue              android layout width  fill parent              android layout height  wrap content              android adjustViewBounds  true              android scaleType  fitXY   gt

User · Answer

I just read the source code for ImageView and it is basically impossible without using the subclassing solutions in this thread  In ImageView onMeasure we get to these lines              Get the max possible width given our constraints         widthSize   resolveAdjustedSize w   pleft   pright  mMaxWidth  widthMeasureSpec               Get the max possible height given our constraints         heightSize   resolveAdjustedSize h   ptop   pbottom  mMaxHeight  heightMeasureSpec     Where h and w are the dimensions of the image  and p  is the padding    And then   private int resolveAdjustedSize int desiredSize  int maxSize                                 int measureSpec                switch  specMode            case MeasureSpec UNSPECIFIED                 Parent says we can be as big as we want  Just don t be larger                than max size imposed on ourselves                             result   Math min desiredSize  maxSize     So if you have a layout height  wrap content  it will set widthSize   w   pleft   pright  or in other words  the maximum width is equal to the image width   This means that unless you set an exact size  images are NEVER enlarged  I consider this to be a bug  but good luck getting Google to take notice or fix it  Edit  Eating my own words  I submitted a bug report and they say it has been fixed in a future release   Another solution  Here is another subclassed workaround  but you should  in theory  I haven t really tested it much   be able to use it anywhere you ImageView  To use it set layout width  match parent   and layout height  wrap content   It is quite a lot more general than the accepted solution too  E g  you can do fit-to-height as well as fit-to-width   import android content Context  import android util AttributeSet  import android widget ImageView      This works around the issue described here  http   stackoverflow com a 12675430 265521 public class StretchyImageView extends ImageView        public StretchyImageView Context context                super context              public StretchyImageView Context context  AttributeSet attrs                super context  attrs              public StretchyImageView Context context  AttributeSet attrs  int defStyle                super context  attrs  defStyle               Override     protected void onMeasure int widthMeasureSpec  int heightMeasureSpec                   Call super   so that resolveUri   is called          super onMeasure widthMeasureSpec  heightMeasureSpec               If there s no drawable we can just use the result from super          if  getDrawable      null              return           final int widthSpecMode   MeasureSpec getMode widthMeasureSpec           final int heightSpecMode   MeasureSpec getMode heightMeasureSpec            int w   getDrawable   getIntrinsicWidth            int h   getDrawable   getIntrinsicHeight            if  w  lt   0              w   1          if  h  lt   0              h   1              Desired aspect ratio of the view s contents  not including padding          float desiredAspect    float  w    float  h              We are allowed to change the view s width         boolean resizeWidth   widthSpecMode    MeasureSpec EXACTLY              We are allowed to change the view s height         boolean resizeHeight   heightSpecMode    MeasureSpec EXACTLY           int pleft   getPaddingLeft            int pright   getPaddingRight            int ptop   getPaddingTop            int pbottom   getPaddingBottom                Get the sizes that ImageView decided on          int widthSize   getMeasuredWidth            int heightSize   getMeasuredHeight             if  resizeWidth  amp  amp   resizeHeight                           Resize the width to the height  maintaining aspect ratio              int newWidth    int   desiredAspect    heightSize - ptop - pbottom     pleft   pright              setMeasuredDimension newWidth  heightSize                     else if  resizeHeight  amp  amp   resizeWidth                        int newHeight    int    widthSize - pleft - pright    desiredAspect    ptop   pbottom              setMeasuredDimension widthSize  newHeight

User · Answer

Its simple matter of setting adjustViewBounds  true  and scaleType  fitCenter  in the XML file for the ImageView    lt ImageView         android layout width  match parent          android layout height  wrap content          android src   drawable image           android adjustViewBounds  true          android scaleType  fitCenter            gt    Note  layout width is set to match parent

User · Answer

You are setting the ScaleType to ScaleType FIT XY   According to the javadocs  this will stretch the image to fit the whole area  changing the aspect ratio if necessary   That would explain the behavior you are seeing   To get the behavior you want     FIT CENTER  FIT START  or FIT END are close  but if the image is narrower than it is tall  it will not start to fill the width   You could look at how those are implemented though  and you should probably be able to figure out how to adjust it for your purpose

User · Answer

Setting adjustViewBounds to true and using a LinearLayout view group worked very well for me  No need to subclass or ask for device metrics     NOTE   this  is a subclass of LinearLayout ImageView splashImageView   new ImageView context   splashImageView setImageResource R drawable splash   splashImageView setAdjustViewBounds true   addView splashImageView

User · Answer

I accomplished this with a custom view  Set layout width  fill parent  and layout height  wrap content   and point it to the appropriate drawable   public class Banner extends View      private final Drawable logo     public Banner Context context        super context       logo   context getResources   getDrawable R drawable banner       setBackgroundDrawable logo          public Banner Context context  AttributeSet attrs        super context  attrs       logo   context getResources   getDrawable R drawable banner       setBackgroundDrawable logo          public Banner Context context  AttributeSet attrs  int defStyle        super context  attrs  defStyle       logo   context getResources   getDrawable R drawable banner       setBackgroundDrawable logo           Override protected void onMeasure int widthMeasureSpec        int heightMeasureSpec        int width   MeasureSpec getSize widthMeasureSpec       int height   width   logo getIntrinsicHeight     logo getIntrinsicWidth        setMeasuredDimension width  height

User · Answer

For me the android scaleType  centerCrop  did not resolve my problem  It actually expanded the image way more  So I tried with android scaleType  fitXY  and It worked excellent

User · Answer

A very simple solution is to just use the features provided by RelativeLayout   Here is the xml that makes it possible with standard Android Views    lt  xml version  1 0  encoding  utf-8   gt   lt ScrollView xmlns android  http   schemas android com apk res android      android layout width  match parent      android layout height  match parent      android fillViewport  true  gt        lt RelativeLayout          android layout width  match parent          android layout height  wrap content           gt           lt LinearLayout             android id    id button container              android layout width  match parent              android layout height  wrap content              android orientation  vertical              android layout alignParentBottom  true               gt               lt Button                 android text  button                  android layout width  wrap content                  android layout height  wrap content   gt               lt Button                 android text  button                  android layout width  wrap content                  android layout height  wrap content   gt               lt Button                 android text  button                  android layout width  wrap content                  android layout height  wrap content   gt           lt  LinearLayout gt           lt 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   gt       lt  RelativeLayout gt   lt  ScrollView gt    The trick is that you set the ImageView to fill the screen but it has to be above the other layouts  This way you achieve everything you need

User · Answer

In the end  I generated the dimensions manually  which works great   DisplayMetrics dm   new DisplayMetrics    context getWindowManager   getDefaultDisplay   getMetrics dm   int width   dm widthPixels  int height   width   mainImage getHeight     mainImage getWidth      mainImage is the Bitmap I m drawing addView mainImageView new LinearLayout LayoutParams           width  height

User · Answer

Everyone is doing this programmily so I thought this answer would fit perfectly here  This code worked for my in the xml  Im NOT thinking about ratio yet  but still wanted to place this answer if it would help anyone   android adjustViewBounds  true    Cheers

User · Answer

You can use my StretchableImageView preserving the aspect ratio  by width or by height  depending on width and height of drawable   import android content Context  import android util AttributeSet  import android widget ImageView   public class StretchableImageView extends ImageView       public StretchableImageView Context context            super context              public StretchableImageView Context context  AttributeSet attrs            super context  attrs              public StretchableImageView Context context  AttributeSet attrs  int defStyle            super context  attrs  defStyle               Override     protected void onMeasure int widthMeasureSpec  int heightMeasureSpec            if getDrawable    null               if getDrawable   getIntrinsicWidth   gt  getDrawable   getIntrinsicHeight                     int width   MeasureSpec getSize widthMeasureSpec                   int height   width   getDrawable   getIntrinsicHeight                                 getDrawable   getIntrinsicWidth                    setMeasuredDimension width  height                else                  int height   MeasureSpec getSize heightMeasureSpec                   int width   height   getDrawable   getIntrinsicWidth                                 getDrawable   getIntrinsicHeight                    setMeasuredDimension width  height

User · Answer

I did it with these values within a LinearLayout   Scale type  fitStart Layout gravity  fill horizontal Layout height  wrap content Layout weight  1 Layout width  fill parent

User · Answer

ScaleType CENTER CROP will do what you want  stretch to full width  and scale the height accordingly  if the scaled height exceeds the screen limits  the image will be cropped

User · Answer

I ve been struggling with this problem in one form or another for AGES  thank you  Thank You  THANK YOU           I just wanted to point out that you can get a generalizable solution from what Bob Lee s done by just extending View and overriding onMeasure   That way you can use this with any drawable you want  and it won t break if there s no image       public class CardImageView extends View           public CardImageView Context context  AttributeSet attrs  int defStyle                super context  attrs  defStyle                      public CardImageView Context context  AttributeSet attrs                super context  attrs                      public CardImageView Context context                super context                       Override         protected void onMeasure int widthMeasureSpec  int heightMeasureSpec                Drawable bg   getBackground                if  bg    null                    int width   MeasureSpec getSize widthMeasureSpec                   int height   width   bg getIntrinsicHeight     bg getIntrinsicWidth                    setMeasuredDimension width height                             else                   super onMeasure widthMeasureSpec  heightMeasureSpec

[java] Android: How to stretch an image to the screen width while maintaining aspect ratio?

Examples related to java

Examples related to android

Examples related to layout