Scale Image to fill ImageView width and keep aspect ratio

Question

I have a GridView  The data of GridView is request from a server   Here is the item layout in GridView    lt LinearLayout xmlns android  http   schemas android com apk res android      android layout width  wrap content      android layout height  wrap content      android background   drawable analysis micon bg      android gravity  center horizontal      android orientation  vertical      android paddingBottom   dimen half activity vertical margin      android paddingLeft   dimen half activity horizontal margin      android paddingRight   dimen half activity horizontal margin      android paddingTop   dimen half activity vertical margin   gt        lt ImageView         android id    id ranking prod pic          android layout width  fill parent          android layout height  wrap content          android adjustViewBounds  true          android contentDescription   string app name          android scaleType  centerCrop    gt        lt TextView         android id    id ranking rank num          android layout width  wrap content          android layout height  wrap content    gt        lt TextView         android id    id ranking prod num          android layout width  wrap content          android layout height  wrap content    gt        lt TextView         android id    id ranking prod name          android layout width  wrap content          android layout height  wrap content    gt   lt  LinearLayout gt    I request data from server  get image url and load image to Bitmap  public static Bitmap loadBitmapFromInputStream InputStream is        return BitmapFactory decodeStream is      public static Bitmap loadBitmapFromHttpUrl String url        try           return loadBitmapFromInputStream  InputStream   new URL url  getContent            catch  Exception e            Log e TAG  e getMessage             return null            and there is the code of getView int position  View convertView  ViewGroup parent  method in adapter  Bitmap bitmap   BitmapUtil loadBitmapFromHttpUrl product getHttpUrl     prodImg setImageBitmap bitmap     The image size is 210 210  I run my application on my Nexus 4  The image does fill ImageView width  but the ImageView height does not scale  ImageView does not show the whole image   How do I solve this problem

User · Accepted Answer

Without using any custom classes or libraries:

<ImageView
    android:id="@id/img"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:adjustViewBounds="true"
    android:scaleType="fitCenter" />

scaleType="fitCenter" (default when omitted)

will make it as wide as the parent allows and up/down-scale as needed keeping aspect ratio.

scaleType="centerInside"

if the intrinsic width of src is smaller than parent width
will center the image horizontally
if the intrinsic width of src is larger than parent width
will make it as wide as the parent allows and down-scale keeping aspect ratio.

It doesn't matter if you use android:src or ImageView.setImage* methods and the key is probably the adjustViewBounds.

User · Answer

try with this simple line    add this line in your xml code in image view tag with out adding any dependency android scaleType  fitXY

User · Answer

Use these properties in ImageView to keep aspect ratio   android adjustViewBounds  true  android scaleType  fitXY

User · Answer

use android ScaleType  fitXY  im ImageView xml

User · Answer

I did something similar to the above and then banged my head against the wall for a few hours because it did not work inside a RelativeLayout   I ended up with the following code   package com example   import android content Context  import android graphics drawable Drawable  import android util AttributeSet  import android widget ImageView   public class ScaledImageView extends ImageView       public ScaledImageView final Context context  final AttributeSet attrs            super context  attrs               Override     protected void onMeasure final int widthMeasureSpec  final int heightMeasureSpec            final Drawable d   getDrawable             if  d    null                int width              int height              if  MeasureSpec getMode heightMeasureSpec     MeasureSpec EXACTLY                    height   MeasureSpec getSize heightMeasureSpec                   width    int  Math ceil height    float  d getIntrinsicWidth     d getIntrinsicHeight                   else                   width   MeasureSpec getSize widthMeasureSpec                   height    int  Math ceil width    float  d getIntrinsicHeight     d getIntrinsicWidth                               setMeasuredDimension width  height             else               super onMeasure widthMeasureSpec  heightMeasureSpec                       And then to prevent RelativeLayout from ignoring the measured dimension I did this        lt FrameLayout         android id    id image frame          android layout width  wrap content          android layout height  wrap content          android layout alignParentLeft  true          android layout below    id something  gt            lt com example ScaledImageView             android id    id image              android layout width  wrap content              android layout height  150dp   gt       lt  FrameLayout gt

User · Answer

To create an image with width equals screen width  and height proportionally set according to aspect ratio  do the following   Glide with context  load url  asBitmap   into new SimpleTarget lt Bitmap gt                           Override                     public void onResourceReady Bitmap resource  GlideAnimation lt   super Bitmap gt  glideAnimation                                creating the image that maintain aspect ratio with width of image is set to screenwidth                          int width   imageView getMeasuredWidth                            int diw   resource getWidth                            if  diw  gt  0                                int height   0                              height   width   resource getHeight     diw                              resource   Bitmap createScaledBitmap resource  width  height  false                                                                           imageView setImageBitmap resource                                               Hope this helps

User · Answer

Yo don t need any java code  You just have to     lt ImageView     android layout width  match parent      android layout height  match parent      android adjustViewBounds  true      android scaleType  centerCrop    gt    The key is in the match parent for width and height

User · Answer

You can try to do what you re doing by manually loading the images  but I would very very strongly recommend taking a look at Universal Image Loader    I recently integrated it into my project and I have to say its fantastic  Does all the worrying about making things asynchronous  resizing  caching images for you   It s really easy to integrate and set up  Within 5 minutes you can probably get it doing what you want   Example code     ImageLoader config DisplayImageOptions displayimageOptions   new DisplayImageOptions Builder   showStubImage R drawable downloadplaceholder  cacheInMemory   cacheOnDisc   showImageOnFail R drawable loading  build         ImageLoaderConfiguration config   new ImageLoaderConfiguration Builder getApplicationContext                 defaultDisplayImageOptions displayimageOptions  memoryCache new WeakMemoryCache    discCache new UnlimitedDiscCache cacheDir   build         if  ImageLoader getInstance   isInited              ImageLoader getInstance   destroy              ImageLoader getInstance   init config        imageLoadingListener   new ImageLoadingListener              Override         public void onLoadingStarted String s  View view                         Override         public void onLoadingFailed String s  View view  FailReason failReason                ImageView imageView    ImageView  view              imageView setImageResource R drawable android               Log i  Failed to Load     s  failReason toString                         Override         public void onLoadingComplete String s  View view  Bitmap bitmap                         Override         public void onLoadingCancelled String s  View view                         Imageloader usage ImageView imageView   new ImageView getApplicationContext         if  orientation    1            imageView setLayoutParams new LinearLayout LayoutParams width   6  width   6          else           imageView setLayoutParams new LinearLayout LayoutParams height   6  height   6              imageView setScaleType ImageView ScaleType CENTER CROP       imageLoader displayImage SERVER HOSTNAME    demos    demo getPathRoot     demo getRootName       png   imageView  imageLoadingListener     This can lazy load the images  fit them correctly to the size of the imageView showing a placeholder image while it loads  and showing a default icon if loading fails and caching the resources   -- I should also add that this current config keeps the image aspect ratio  hence applicable to your original question

User · Answer

Use android scaleType  centerCrop

User · Answer

I like answer of arnefm but he made a small mistake  see comments  which I will try to correct   import android content Context  import android graphics drawable Drawable  import android util AttributeSet  import android widget ImageView          ImageView that keeps aspect ratio when scaled     public class ScaleImageView extends ImageView      public ScaleImageView Context context        super context          public ScaleImageView Context context  AttributeSet attrs        super context  attrs          public ScaleImageView Context context  AttributeSet attrs  int defStyle        super context  attrs  defStyle           Override   protected void onMeasure int widthMeasureSpec  int heightMeasureSpec        try         Drawable drawable   getDrawable          if  drawable    null            setMeasuredDimension 0  0           else           int measuredWidth   MeasureSpec getSize widthMeasureSpec           int measuredHeight   MeasureSpec getSize heightMeasureSpec           if  measuredHeight    0  amp  amp  measuredWidth    0      Height and width set to wrap content           setMeasuredDimension measuredWidth  measuredHeight             else if  measuredHeight    0      Height set to wrap content           int width   measuredWidth            int height   width    drawable getIntrinsicHeight     drawable getIntrinsicWidth              setMeasuredDimension width  height             else if  measuredWidth    0     Width set to wrap content           int height   measuredHeight            int width   height   drawable getIntrinsicWidth     drawable getIntrinsicHeight              setMeasuredDimension width  height             else     Width and height are explicitly set  either to match parent or to exact value            setMeasuredDimension measuredWidth  measuredHeight                           catch  Exception e          super onMeasure widthMeasureSpec  heightMeasureSpec                  Thus your ImageView will be scaled properly and will have no dimension problems if  for instance  put inside of ScrollView

User · Answer

Just use UniversalImageLoader and set  DisplayImageOptions Builder        imageScaleType ImageScaleType EXACTLY STRETCHED       build      and no scale settings on ImageView

User · Answer

I had a similar problem once  I solved it by making a custom ImageView   public class CustomImageView extends ImageView   Then override the onMeasure method of the imageview  I did something like this I believe        Override protected void onMeasure int widthMeasureSpec  int heightMeasureSpec        try           Drawable drawable   getDrawable             if  drawable    null                setMeasuredDimension 0  0             else               float imageSideRatio    float drawable getIntrinsicWidth      float drawable getIntrinsicHeight                float viewSideRatio    float MeasureSpec getSize widthMeasureSpec     float MeasureSpec getSize heightMeasureSpec               if  imageSideRatio  gt   viewSideRatio                       Image is wider than the display  ratio                  int width   MeasureSpec getSize widthMeasureSpec                   int height    int  width   imageSideRatio                   setMeasuredDimension width  height                 else                      Image is taller than the display  ratio                  int height   MeasureSpec getSize heightMeasureSpec                   int width    int  height   imageSideRatio                   setMeasuredDimension width  height                                 catch  Exception e            super onMeasure widthMeasureSpec  heightMeasureSpec           This will stretch the image to fit the screen while maintaining the aspect ratio

User · Answer

I had a similar issue  I found the reason for this is because you need to calculate the dp  Android studio is calculating the ImageView when you load it from the drawable  but when you are using another method  like loading from bitmap the dp is not automatically accounted for   Here is my xml   lt ImageView   android id    id imageViewer    android layout width  match parent    android layout height  match parent   dp is not automaticly updated  when loading from a other source   android scaleType  fitCenter    tools srcCompat   drawable a8    gt    I m using Kotlin  and loading drawable from an asset file  here s how I calculate this  val d   Drawable createFromStream assets open  imageData   imageName  png    null  bitHeight   d minimumHeight  get the image height imageViewer layoutParams height    bitHeight   resources displayMetrics density  toInt    set the height imageViewer setImageDrawable d   set the image from the drawable imageViewer requestLayout    here I apply it to the layout

User · Answer

FOR IMAGE VIEW  set these parameters  android layout width        quot match parent quot  android layout height       quot wrap content quot  android scaleType           quot fitCenter quot  android adjustViewBounds    quot true quot   Now whatever the size of the image is there  it s width will match the parent and height will be according to match the ratio  I have tested this and I am 100  sure  we want this -- gt   not this -- gt          Results will be   Image width - gt  stretched as match parent Image height - gt  according to image width  maximum to aspect ratio      like the first one

User · Answer

Try this  it solved the problem for me      android adjustViewBounds  true      android scaleType  fitXY

User · Answer

This will not be applicable if you set image as background in ImageView  need to set at src android src    Thanks

[android] Scale Image to fill ImageView width and keep aspect ratio

Examples related to android

Examples related to imageview