Last Updated:

ImageView widget on Android - Example Code

The widget is used in Android to display an image. It is this widget that we will deal with today: consider the example of use and the main features.android.widget.ImageView

Also in Android there is a widget, which you can read about here.ImageButton

Example of using the ImageView widget on Android

ImageView is one of the UI widgets that is used to view images. To use it in our application, we have to add a single tag to the XML layout:<ImageView ... />

As you can see from the layout, we used LinearLayout as the root element of the layout (you can take any other type).

Note the . Here we specify that the widget should display a picture that is located in a folder called fbcom (the file extension is not specified here). We also used the attribute to specify that the widget should be centered horizontally.android:src="@drawable/fbcom"ImageViewres/drawableandroid:layout_gravity

 

Paste any small image into your project's res/drawable folder and replace the value of the src attribute with .@drawable/title of your image

Here's what it looks like on my Android:

ImageView Widget

Also, the image can be specified in the program code:

For example, in the example below, we set the image in not the layout, but the code of the program:ImageView

 

// initialize the widget
ImageView imageView = (ImageView) findViewById(R.id.imageView);
// set image from res/drawable/ folder to widget
imageView.setImageResource(R.drawable.fbcom);

ScaleType widget ImageView in Android

The widget offers different configuration options to support different (scaling methods). The ScaleType option is used to scale the image within the . Let's look at the most useful options:ImageViewscaleTypesViewscaleType

  • CENTER displays the image in the center without any scaling.View
  • CENTER_CROP centers and scales images from maintaining the aspect ratio
  • CENTER_INSIDE - Scaling the image internally from preserving the aspect ratio. If initially the image is smaller than , then the property does the same thing as .ViewViewCENTER
  • FIT_CENTER - Scaling the image internally from preserving the aspect ratio. At least one axis will match exactly with , and the image will be centered.ViewViewView
  • FIT_START is the same as , but aligned to the upper left corner of .FIT_CENTERView
  • FIT_END is the same as , but aligns to the lower-right corner of .FIT_CENTERView
  • FIT_XY — scales the dimensions of the image so that it fits the size without maintaining proportions.View
  • MATRIX is the scaling of the image using an additional class. The matrix can be supplied using the . The class can be used, for example, to rotate images.MatrixsetImageMatrixMatrix

Working with bitmaps

Working with bitmaps belongs to the .android.graphics.Bitmap

Most commonly, the . If you do not use , then this leads to inefficient work with memory.DrawableBitmapFactoryBitmapFactory

ImageView imageView = (ImageView) findViewById(R.id.imageView);
// load the image from the sd card into a Bitmap object
Bitmap bitMap = BitmapFactory.decodeFile("/sdcard/testImage.png");
// and set it to the ImageView widget
imageView.setImageBitmap(bitMap);

ImageView for the curious

Let's take another look at our layout. The Android Lint system utility will let us know its comment:

[Accessibility] missing contentDescription attribute on image. This means that we want to add the missing attribute to the markup of our widget. This will not affect the work of the widget itself in any way and without this attribute everything will work fine, but let's deal with this note:contentDescriptionImageView

 

Most people will never see what you write into the attribute value, however, it can be useful for people with disabilities (who have vision problems). With this attribute, you'll help them know where the button they need is. To do this, simply add the following code to the widget markup:ImageView

In your case, change the description to fit your picture.

Here is such a small article about the widget in Android. Stay tuned and subscribe to new articles!

ImageView