It is quite possible to draw a graphic onto any view, by setting its background property, but the ImageView subclass is designed for this purpose and here we will see two different ways of setting an ImageView's content with a graphic.
Getting ready
We are going to use ImageViews to display two images here but we will use the built-in icon PNG file for one of them. For the other, select any PNG image that you wish and, once you have started up a new Android project in Eclipse, save it in any of the res/drawable folders as my_drawable_image.png.
How to do it...
1. Eclipse should have automatically generated a TextView in main.xml, and if so provide it with the following android:id:
android:id="@+id/text_view"
2. Beneath this TextView add the following two ImageViews:
<ImageView
android:src="@drawable/icon"
android:tint="#5f00"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageView
android:id="@+id/my_resource_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
3. View this using the Graphical Layout tab. The TextView and the icon should be visible:
4. From the main Java activity, associate the TextView from the previous steps by adding this line after the setContentView(R.layout.main); line in the onCreate() method:
TextView textView = (TextView) findViewById(R.id.text_view);
5. Do the same with the image view and set the image resource as seen here:
ImageView imageView =
(ImageView) findViewById(R.id.my_resource_image);
imageView.setImageResource(R.drawable.my_drawable_image);
6. Finally, set the text box to display the default scale type, like so:
textView.setText(imageView.getScaleType().toString());
7. Now run the project on a handset or an emulator to view both the images:
How it works...
As this has been quite an easy exercise we have actually been able to combine two tasks: how to set an ImageView's content from XML and how to do this with Java, and by now this should not be an unfamiliar distinction.
The use of android:src to set the graphical content of the top image view is a very
straightforward way to do this, provided we do not wish to change the image at any point. If we had wanted to do this, we could have used the setImageResource() method, which is the Java equivalent of android:src, to dynamically change the image any number of times.
As this was such a simple task we added a line to display the enum ImageView.ScaleType, which is a very handy way to control how an image will be laid out within a view. This can be done with ImageView.setScaleType(ImageView.ScaleType), where ScaleType is a string constant with the following possible values:
Value Explanation
CENTER Centers the image but does not scale it.
CENTER_CROP Scales the image without changing the aspect ratio, cropping it if it's larger than the view.
CENTER_INSIDE Scales the image to fit inside the view without changing the aspect ratio. If the image is smaller than the view, no scaling takes place.
FIT_CENTER Centers the image and scales it to fit along at least one axis.
FIT_END Scales and aligns the image to the bottom right of the view.
FIT_START Scales and aligns the image to the top left of the view.
FIT_XY Scales the image to fit exactly within the view with respect to the original aspect ratio.
FIT_MATRIX Scales the image according to its matrix.
Our use of ImageView.setImageResource() is often not the best way to produce graphics in a view as it uses the UI thread and can cause an application to stutter. Very often it is preferable to define our image as a Bitmap or a Drawable and we will cover how to do this in the next few recipes. Nevertheless, for static graphics the setImageResource() method is quite adequate.
Although Android can manage BMP, PNG, JPG and GIF file formats, the system far prefers PNG images to the other three and, when size is an issue, JPG is preferable to BMP or GIF.
There's more...
The ability to control scaling type is not the only useful formatting tool available to the images within our ImageViews. We can also set constraints on their size and control how aspect ratio
Setting an image's maximum dimensions
Often we do not want an image to take up more than a certain amount of screen space.
This can be easily achieved with the ImageView methods setMaxHeight(int) and setMaxWidth(int). Both these methods expect their single argument to be in pixels.
We can achieve precisely the same effect from within XML if we want with android:maxWidth and android:maxHeight.
Controlling an image's aspect ratio
To force an image to be displayed with its original aspect ratio, use
setAdjustViewBounds(true) or android:adjustViewBounds="true" from XML.
Naturally, using false will switch this option off.
See also
To see how to use ImageViews in custom widgets see the recipe Creating a custom component in Chapter 3, Widgets.
For an example of applying an ImageView to a Google map refer to the recipe OverIaying a map in Chapter 11, GPS, Locations, and Maps