Monday, May 16, 2011

Android - ImageView scaleType Samples

I found it super frustrating when testing out the different scale types for an ImageView. The Graphical Layout in Eclipse currently does not consistently show an accurate representation of an image in an ImageView when changing the scaleType. The only way to know what the image was going to look like was to run the app and then decide if the current scaleType was what I was looking for.

Here is a table showing samples for all scale types for the ImageView.

scaleType fill_parent x fill_parent 200dp x 200dp 200dp x 200dp
with Overlay
matrix



fitXY



fitStart



fitCenter



fitEnd



center



centerCrop



centerInside




The column labeled "fill_parent x fill_parent" represents the following layout:
 <?xml version="1.0" encoding="utf-8"?>  
 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   android:layout_width="fill_parent"  
   android:layout_height="fill_parent">  
   <ImageView android:layout_width="fill_parent"  
               android:layout_height="fill_parent"  
               android:src="@drawable/eureka"  
               android:scaleType="matrix">  
   </ImageView>  
 </FrameLayout>  

The column labeled "200dp x 200dp" represents the following layout:
 <?xml version="1.0" encoding="utf-8"?>  
 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   android:layout_width="fill_parent"  
   android:layout_height="fill_parent">  
   <ImageView android:layout_width="200dp"  
               android:layout_height="200dp"  
               android:layout_gravity="center"  
               android:src="@drawable/eureka"  
               android:scaleType="matrix">  
   </ImageView>  
 </FrameLayout>  

Finally, the column labeled "200dp x 200dp with Overlay" represents the last layout with a 200dp by 200dp rectangle centered and overlaying the ImageView.

For more info on scaleType and each type's definition check out ImageView.ScaleType