Android Media Basics: Images, Audio, and Video
- Examining the ImageView Control
- Bitmaps and Canvas
- Using VideoViews
- Playing Audio with MediaPlayer
- Exploring More Media Options
- Summary
- Q&A
- Workshop
- Exercise
This chapter is from the book
This chapter is from the book
This chapter is from the book
Examining the ImageView Control
Hour 6 showed how to use a simple ImageView. In that case, you saw how to display a drawable resource in the ImageView. An ImageView can display any drawable image. The source of the image can be a resource, a drawable, or a bitmap.
The source code for basic ImageView examples are in the accompanying Hour21ImageView project.
The four projects that contain the source code for this hour are the following:
- Hour21ImageView
- Hour21LargeImage
- Hour21VideoView
- Hour21Audio
Displaying an Image
Four methods are available for setting an image in an ImageView. They differ by how the image passed is defined. The image can be a bitmap, drawable, URI, or resource id. The methods are as follows:
- setImageDrawable(): Set a drawable as the content of the ImageView.
- setImageBitmap(): Set a bitmap as the content of the ImageView.
- setImageResource(): Use a resource id to set the content of the ImageView.
- setImageUri(): Use a URI to set the content of the ImageView.
To set an ImageView to an image resource defined by R.Drawable.mainImage, you would use the following:
ImageView mainImage = (ImageView) findViewById(R.id.imageView1); mainImage.setImageResource(R.drawable.mainImage)
In this hour, you take a closer look at using bitmaps with ImageViews.
In Hour 3, you used a ShapeDrawable that had been defined as a resource. If you were working with a ShapeDrawable in code, you would use the setImageDrawable() method.
To populate a Drawable object from a resource, use the getResources.getDrawable() method:
Drawable myDrawable = getResources().getDrawable(R.drawable.ic_launcher);
You’ll populate an ImageView using a resource id to explore some the available features in an ImageView.
Using ScaleTypes in ImageView
ImageViews include a ScaleType property. The ScaleType defines how an image displays within the ImageView. Using ScaleType, you can have an image fill the entire ImageView, be centered in the ImageView, or be cropped and centered in the ImageView.
The options for ScaleType are defined in ImageView.ScaleType. For example, ImageView.ScaleType.CENTER refers to a scale type in which the image is centered in the ImageView.
All scale types except for FIT_XY and FIT_MATRIX maintain the aspect ratio.
The complete set of ScaleTypes includes the following:
- ImageView.ScaleType.CENTER: Center the image with no scaling. The image dimensions are unchanged.
- ImageView.ScaleType.CENTER_CROP: Scales the image and keeps the aspect ratio until either the width of height of the image is the same as the width or height of the ImageView. For a small image, this will have the effect of enlarging the entire image. For a large image, this will have the effect of showing the center of the image.
- ImageView.ScaleType.CENTER_INSIDE: Scale the image and maintain aspect ratio. The width and height of the image fit within the ImageView.
- ImageView.ScaleType.FIT_CENTER: Fit the image in the center of the ImageView.
- ImageView.ScaleType.FIT_START: Fit the image in the left and top edge of the ImageView.
- ImageView.ScaleType.FIT_END: Fit the image in the right and bottom edge of the ImageView.
- ImageView.ScaleType.FIT_XY: Fit into the length and width of the ImageView. Does not maintain the aspect ratio.
- ImageView.ScaleType.MATRIX: Scale using a matrix. This allows for more complex translations of the image and is described later this hour.
The app created in the Hour21ImageView project illustrates the effects of setting different values for ScaleType. The layout file for this app includes an ImageView that fills the layout and a set of radio buttons for setting the ScaleType. MainActivity.java is set up in a simple way. With the ImageView and RadioButtons defined, when a button is clicked, the ScaleType value is set in the ImageView. Listing 21.1 shows the onCheckChangeListener() method for the RadioButton named centerCrop. If this RadioButton is checked, the ScaleType for ImageView is updated.
Listing 21.1 Changing ScaleType Programatically
1: centerCrop.setOnCheckedChangeListener(new OnCheckedChangeListener() {
2: @Override
3: public void onCheckedChanged(CompoundButton buttonView, booleani sChecked) {
4: if (isChecked){
5: imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
6: }
7: }
8: });
The Hour21Image app uses the image shown in Figure 21.1 as the image for the ImageView. The image is 900 pixels wide and 200 pixels high.
)
Figure 21.1 Base image for showing ScaleType (scaletest.png)
By using this simple image with four circles of different colors, you can easily see the effect of the changing ScaleType.
Figure 21.2 shows the base image using the ScaleTypes CENTER, CENTER_CROP, and CENTER_INSIDE. Using CENTER shows the image in actual size. Because the size of the image is larger than the ImageView, the green and blue circles in the center display. CENTER_CROP shows half of the green and half of the blue circles. The height of the image fills the ImageView. CENTER_INSIDE shows the entire image centered in the ImageView.
)
Figure 21.2 ScaleTypes CENTER, CENTER_CROP, and CENTER_INSIDE
Figure 21.3 shows the base image using the ScaleTypes FIT_CENTER, FIT_START, FIT_END, and FIT_XY. The aspect ratio is maintained in the first three options, but when you use FIT_XY, the image fills the ImageView and “stretches” the image to fit.
)
Figure 21.3 ScaleTypes FIT_CENTER, FIT_START, FIT_END, and FIT_XY
Rotating an Image with Matrix
In graphics programming, a matrix is used to transform an image. Simple transformations include scaling, translating, or rotating an image. Android includes a Matrix class (android.graphics.Matrix) to support these graphic transformations.
You might have noticed the Rotate button in the earlier images. As a simple example of using a Matrix, the Hour21ImageView app implements a Button that rotates the image in the ImageView by 30 degrees.
Listing 21.2 shows the OnClickListener() method for the rotate Button. On line 3, the Matrix associated with the ImageView is obtained. On line 4, you use the setScaleType() method to set the ScaleType to MATRIX. You must set ImageView.ScaleType.MATRIX in order to use a modified matrix on the ImageView. Line 5 is a matrix instruction to rotate the image 30 degrees around the point that is the center of the ImageView. Line 6 shows the matrix set for the ImageView. You must set ImageView ScaleType to MATRIX for this to take effect.
Figure 21.4 shows the rotated image.
Listing 21.2 Rotating an Image
1: rotate.setOnClickListener(new OnClickListener() {
2: public void onClick(View v) {
3: Matrix matrix = imageView.getImageMatrix();
4: imageView.setScaleType(ImageView.ScaleType.MATRIX);
5: matrix.postRotate(30, imageView.getWidth()/2, imageView.getHeight()/2);
6: imageView.setImageMatrix(matrix);
7: }
8: });
)
Figure 21.4 Rotated image
You can create complex transformations using Matrix. This app is a simple introduction to using a Matrix and the MATRIX ScaleType.
Setting Alpha
Alpha level indicates the opacity of an image. An image can be completely transparent, completely opaque, or somewhere in the middle. You can set the alpha level on an ImageView using the setAlpha() method or, since API level 11, by using the setImageAlpha() method. These methods take an integer parameter. A parameter of 0 indicates complete transparency and 255 indicates complete opacity.