Android ImageView


Android ImageView sample

Android ImageView is a common ui control which is used in almost all application. Android ImageView display arbitrary image such as icons. Android ImageView can load image from various sources like resources, content provider, url, gallery etc.

Android ImageView Usage


An Android ImageView can be declared in xml resource file as given follows:

We can also define ImageView programatically as given below:

How to load drawable image in an ImageView?


We can load image in an ImageView from drawable by setting android:srcattribute of ImageView as follows:

Samething we can achieve programatically as follows:

How to load gallery image in an ImageView?


There are 2 steps to load an image from gallery to an ImageView

  1. Start an image chooser activity for result to select an image as follows
  2. Override onActivityResult to get user's selected image as follows:

How to load url image in an ImageView?


To load an image from url, we need to request for Internet permission. Add below given line in your AndroidManifest.xml, just before application tag as follows:

Now, we have internet permission so we can download image, and set it to ImageView as follows:

But we should avoid time consuming task in ui thread so that our application never stop responding to user's input. For that purpose we can use AsyncTask as follows:

Now, last step is to call execute method of ImageDownloaderTask on some event, that will download and set the bitmap to ImageView.

ScaleType of ImageView


ScaleType Controls how the image should be resized or moved to match the size of the ImageView. An ImageView display an image differently based on the scaleType provided.

Here are possible values of scaleType:

android:scaleType="center"

android:scaleType="center" center the image in the view, but perform no scaling. We can define android:scaleType attribute of ImageView as center in xml as follows:

Programatically we can do the same thing as follows:

scaleType center


android:scaleType="centerCrop"

android:scaleType="centerCrop" Scales the image such that both the x and y dimensions are greater than or equal to the view, while maintaining the image aspect ratio; centers the image in the view. We can define android:scaleType attribute of ImageView as centerCrop in xml as follows:

Programatically we can do the same thing as follows:

scaleType centerCrop


android:scaleType="centerInside"

android:scaleType="centerInside" Scales the image to fit inside the view, while maintaining the image aspect ratio. If the image is already smaller than the view, then this is the same as center. We can define android:scaleType attribute of ImageView as centerInside in xml as follows:

Programatically we can do the same thing as follows:

scaleType centerInside


android:scaleType="fitCenter"

android:scaleType="fitCenter" Scales the image to fit inside the view, while maintaining the image aspect ratio. At least one axis will exactly match the view, and the result is centered inside the view. We can define android:scaleType attribute of ImageView as fitCenter in xml as follows:

Programatically we can do the same thing as follows:

scaleType fitCenter


android:scaleType="fitStart"

android:scaleType="fitStart" is Same as fitCenter but aligned to the top left of the view. We can define android:scaleType attribute of ImageView as fitStart in xml as follows:

Programatically we can do the same thing as follows:

scaleType fitStart


android:scaleType="fitEnd"

android:scaleType="fitEnd" is Same as fitCenter but aligned to the bottom right of the view. We can define android:scaleType attribute of ImageView as fitEnd in xml as follows:

Programatically we can do the same thing as follows:

scaleType fitEnd


android:scaleType="fitXY"

android:scaleType="fitXY" Scales the x and y dimensions to exactly match the view size; does not maintain the image aspect ratio. We can define android:scaleType attribute of ImageView as fitXY in xml as follows:

Programatically we can do the same thing as follows:

scaleType fitXY


android:scaleType="matrix"

android:scaleType="matrix" Scales the image using a supplied Matrix class. The matrix can be supplied using the setImageMatrix method. A Matrix class can be used to apply transformations such as rotations to an image. An example of matrix is given below in which image was rotated in 180 degree:

scaleType matrix


Animation in ImageView


We can use startAnimation method of ImageView to display animation as in below given example:

Android ImageView example


In this example we are going to demonstrate how to load image from drawable, mipmap, gallery and url. How to rotate image using Matrix, how to add start animation in ImageView.

Android ImageView

Step 1: Create a new project in Android Studio and name it Android ImageView.

Step 2: Open res -> values -> strings.xml and add following string resource

strings.xml

Step 3: Open res -> layout -> activity_main.xml and add following code

activity_main.xml

Step 4: Add below given code to your MainActivity.java

MainActivity.java

Step 5: Open manifests ->AndroidManifest.xml, and add following lines of code

AndroidManifest.xml

Step 6: Clean and run the project to see the result.


Share & Like

Tutorial topics

About ApnaTutorials.com

ApnaTutorials.com is for Java, J2ee, Html5 and android developers. All tutorials are well explained and are easy to understand. We have tested every tutorials on our developement environment before posting it in public domain.