Developer

Clear up ambiguity about Android image view scale types with this guide

Android developers, if you're ever unsure about which scale mode to use when, William J. Francis shares the results of his exercise to use as a reference.

6_Android_logo.png

I've been doing professional Android development for quite some time now. In my experience one of the most commonly used widgets in any Android project is the image view. While there is nothing particularly tricky about the image view implementation, I recently noticed that at times I am still unsure what scale type to choose for my layout.

Google has pretty decent documentation detailing the supported scale modes and a description of the effect each produces on an image. Still, just reading about how the various modes worked didn't paint a clear picture in my head.

So as an exercise I created a very simple layout and applied each of the various scale modes to the same image. I found it quite helpful in clearing up any ambiguity and decided to share my results as a reference for other developers out there who might have similar doubts about which scale mode to use when.

Figure A: Variable height and width, no scaling mode applied.

<ImageView
 	android:layout_width="wrap_content"
android:layout_height="wrap_content"
     	android:src="@drawable/techrepublic_logo" />

androidimageviewfiga071714.png

Figure B: Fixed height and width, scale type "center".

<ImageView
android:layout_width="300px"
     	android:layout_height="300px"
     	android:scaleType="center"
     	android:src="@drawable/techrepublic_logo" />

androidimageviewfigb071714.png

Figure C: Fixed height and width, scale type "fitXY".

<ImageView
android:layout_width="300px"
     	android:layout_height="300px"
     	android:scaleType="fitXY"
     	android:src="@drawable/techrepublic_logo" />

androidimageviewfigc071714.png

Figure D: Fixed height and width, scale type "centerCrop".

<ImageView
android:layout_width="300px"
     	android:layout_height="300px"
     	android:scaleType="centerCrop"
     	android:src="@drawable/techrepublic_logo" />

androidimageviewfigd071714.png

Figure E: Fixed height and width, scale type "fitCenter".

<ImageView
android:layout_width="300px"
     	android:layout_height="300px"
     	android:scaleType="fitCenter"
     	android:src="@drawable/techrepublic_logo" />

androidimageviewfige071714.png

Figure F: Fixed height and width, scale type "centerInside".

<ImageView
android:layout_width="300px"
     	android:layout_height="300px"
     	android:scaleType="centerInside"
     	android:src="@drawable/techrepublic_logo" />

androidimageviewfigf071714.png

As you can see "centerInside" and "fitCenter" produce identical results when the image is larger than the given space. However, if the space is larger than the image, this does not hold true.

Figure G: Fixed height and width, scale type "centerInside".

<ImageView
android:layout_width="600px"
     	android:layout_height="600px"
     	android:scaleType="centerInside"
     	android:src="@drawable/techrepublic_logo" />

androidimageviewfigg071714.png

Figure H: Fixed height and width, scale type "fitCenter".

<ImageView
android:layout_width="600px"
     	android:layout_height="600px"
     	android:scaleType="fitCenter"
     	android:src="@drawable/techrepublic_logo" />

androidimageviewfigh071714.png

The remaining two scale modes have to do with the placement of the image in the view. This is a little easier to comprehend visually if we fill in the background of the image view.

Figure I: Fixed height and width, scale type "fitStart".

<ImageView
  	android:background="#c0c0c0"
 	android:layout_width="600px"
  	android:layout_height="600px"
  	android:scaleType="fitStart"
  	android:src="@drawable/techrepublic_logo" />

androidimageviewfigi071714.png

Figure J: Fixed height and width, scale type "fitEnd".

<ImageView
  	android:background="#c0c0c0"
 	android:layout_width="600px"
  	android:layout_height="600px"
  	android:scaleType="fitEnd"
  	android:src="@drawable/techrepublic_logo" />

androidimageviewfigj071714.png

Also read

About William J. Francis

William J Francis began programming computers at age eleven. Specializing in embedded and mobile platforms, he has more than 20 years of professional software engineering under his belt, including a four year stint in the US Army's Military Intellige...

Editor's Picks

Free Newsletters, In your Inbox