Android TutorialsNo Comments

default thumbnail
515 views.

In Android, android.widget.ImageView class is used to display an image file. Android also has an ImageButton. As the name suggests, the ImageButton component is a button with an image on. The ImageButton is represented by the Android class android.widget.ImageButton. In this tutorial we’re going to implement both these components in our application.

Android ImageView

ImageView is one of the UI widget that is used to display images in the application. It’s defined in the XML layout in the following manner.

Here android:src is used to assign the image file from the drawable resource folder.

Android ImageView ScaleType

ImageView comes with different configuration options to support different scaleTypes. scaleType options are used for scaling the bounds of an image to the bounds of this view. Below are the listed scaleType configuration properties supported.

CENTER : Displays the image centered in the view with no scaling
CENTER_CROP : 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
CENTER_INSIDE : 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
FIT_CENTER : 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
FIT_START : Same as fitCenter but aligned to the top left of the view
FIT_END : Same as fitCenter but aligned to the bottom right of the view
FIT_XY : Scales the x and y dimensions to exactly match the view size. dDoes not maintain the image aspect ratio
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
The default scaleType in FIT_CENTER.

Note: The fitXY scale type allows you to set the exact size of the image in your layout. However, there can occur potential distortions of the image due to scaling. For example;

Supporting Multiple Densities

There is a powerful system for selecting the correct image asset for the correct device. There are specific drawable folders for each device density category including: ldpi (low), mdpi (medium), hdpi (high), and xhdpi (extra high) etc. For eg. a drawable-mdpi stands for drawable- medium dots per inch.

In this project we’ll show various image scaleTypes in the activity along with an Image Button.

Adding Image to Resources

We’ll use ImageView to display a “png” image. PNGs are lossless, so they have that advantage over JPG images. We add our images into folder “res/drawable-xdpi“, “res/drawable-mdpi” or “res/drawable-hdpi“ etc. depending on the size of the image.
Project Structure

android-imageview-project

As you can see we’ve added a balloon.png file to drawable folders of respective dimensions.

Android ImageView Project Code

The xml layout file contains five images with different scaleTypes along with an ImageButton. The layout is a child of a ScrollView (to make the activity scrollable) which we’ll discuss later.
activity_main.xml

The MainActivity.java is defined below.

MainActivity.java

Here we’ve made the second ImageView clickable to display a Toast.

Android ImageButton

Android ImageButton has all the properties of a normal button. It has the option to add a resource file instead of text.

Working with Bitmaps

Bitmaps belong to the class android.graphics.Bitmap.

Bitmapfactory is mainly used for Scaling images from the drawable. If we don’t use BitmapFactory then it leads to insufficient memory allocations.

We can change the bitmap displayed in an ImageView to a drawable resource as it’s done for imageview2 in the code above.

The imageview5 is not assigned any scaleType so we’ve scaled it using a static method createScaledBitmap(Bitmap src, int dstWidth, int dstHeight, boolean filter)

To pass any file present in the storage into imageview the following code is implemented.

ff

Be the first to post a comment.

Add a comment