Working with Android ImageView and Bitmap

android.widget.ImageView is the main class to handle image files. ImageView loads, optimizes and displays image. Android devices come in different screens and dpi, which make it easy to implement but hard to master image in Android. To make it simple, I won’t go discuss about screen resolution of different Android devices in this tutorial.

The simple way

Upload an PNG file to your project’s drawable folder then add an ImageView as following.

[xml]

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="com.androidnames.imageview.MainActivity">

<ImageView android:id="@+id/imageView" android:layout_width="100dp" android:layout_height="50dp" android:src="@drawable/Androidnames_logo" />
</RelativeLayout>

[/xml]

That was the most simple way to load an image into an ImageView. The view can display image differently by using android:scaleType.

[xml]
<ImageView android:id="@+id/imageView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:scaleType="center" android:src="@drawable/Androidnames_logo" />
[/xml]

The code above displays the Androidnames_logo.png image at its native resolution and centered in the view. The full list of scaleType’s values can be found here.

In some cases, it is required to load or switch the image after an event. ImageView’s setImageResource method helps make this task done.

[java]

ImageView imageView = (ImageView) findViewById(R.id.imageView);
imageView.setImageResource(R.drawable.anotherImageFileID);

[/java]

Loading image with Bitmap

The BitmapFactory class provides several decoding methods (decodeByteArray(), decodeFile(), decodeResource(), etc.) for creating a Bitmap from various sources, be it file path, input stream, or bitmaps.

XML inflation

[java]
ImageView imageView = (ImageView) findViewById(R.id.imageView);
Bitmap bitMap = BitmapFactory.decodeResource(getResources(), R.drawable.Androidnames_logo);
imageView.setImageBitmap(bitMap);
[/java]

From File

[java]
//use this when you need to load an image from sdcard
ImageView imageView = (ImageView) findViewById(R.id.imageView);
Bitmap bitMap = BitmapFactory.decodeFile("/sdcard/another_image.png");
imageView.setImageBitmap(bMap);
[/java]

From Input stream

[sourcecode language=”java”]
FileInputStream in;
BufferedInputStream buf;
try {
in = new FileInputStream("/sdcard/another_image.png");
buf = new BufferedInputStream(in);
//there are 2 ways to handle the input stream
// first one is to use decodeStream
Bitmap bitMap = BitmapFactory.decodeStream(buf);
//the 2nd one is to create bitmap from an array of bytes. Use this when bitmap was already created previously in your project
byte[] bitMapArray= new byte[buf.available()];
buf.read(bitMapArray);
Bitmap bitMap2 = BitmapFactory.decodeByteArray(bitMapArray, 0, bitMapArray.length);

imageView.setImageBitmap(bitMap); //or bitMap2

if (in != null) {
in.close();
}
if (buf != null) {
buf.close();
}
} catch (Exception e) {
Log.e("Error reading file", e.toString());
}
[/sourcecode]

Download Image from URL

In many apps, it is required to download image from internet and load it into an ImageView. There are many ways to carry out this task.

No matter what method you use, the first step is always to allow INTERNET permission in manifest file.

[xml]
<uses-permission android:name="android.permission.INTERNET" />
[/xml]

Use image loader LIBRARIES

If you want to download an image from internet and load it to an ImageView, you should use an image loader library like Picasso library.

Some examples:

[java]
ImageView imageView = (ImageView) findViewById(R.id.imageView);
//Picasso
Picasso.with(context).load("http://i.imgur.com/plJD9Al.jpg").into(imageView);
//Glide
Glide.with(this).load("http://i.imgur.com/plJD9Al.jpg").into(imageView);
//Ion
Ion.with(context)
.load("http://i.imgur.com/plJD9Al.jpg")
.withBitmap()
.placeholder(R.drawable.image_placeholder)
.error(R.drawable.image_error)
.animateLoad(spinAnimation)
.animateIn(fadeInAnimation)
.intoImageView(imageView);
[/java]

Use Bitmap

[java]
try {
URL url = null;
url = new URL("http://i.imgur.com/plJD9Al.jpg");

Bitmap bitmap;
bitmap= BitmapFactory.decodeStream(url.openConnection().getInputStream());
ImageView imageView = (ImageView) findViewById(R.id.imageView);
imageView.setImageBitmap(bitmap);
} catch (MalformedURLException e) {
e.printStackTrace();
}
[/java]