Friday, February 10, 2012

Android How to | Display a gif image in an ImageView widget

Android1While I was working on my 3rd year programming project which happens to be an android application (I’ll tell more details to you guys about the project in later posts that are to follow), I wanted to display an image on the screen acquired from an external web service. The problem with the image was although the image was not-animated, it was in gif format. I tried various methods to get it displayed in the application, searched on those deep corners of the internet (yeah, I’m talking about those places Ninja) but couldn’t find a successful solution. After few hours of trying I succeeded. And it was a simple solution that worked. After a long pause between my blog posts, I thought of sharing this small tip with you guys.

Here’s what I first did. My web service uses REST protocol. I used HttpClient in Java and HttpGet commands to acquire the image. Then I passed the input stream of the HttpResponse to a BitmapFactory to decode the gif image into a bitmap. Then my method simply returned the Bitmap to the application UI. Here’s the code for that task.

   1: public Bitmap getBitmap(String url) {    //pass the complete URL of the web service query
   2:     Bitmap bmp = null;
   3:     try {
   4:         HttpClient client = new DefaultHttpClient();
   5:         URI imageURI = new URI(url);
   6:         HttpGet req = new HttpGet();
   7:         req.setURI(imageURI);
   8:         HttpResponse response = client.execute(req);
   9:         bmp = BitmapFactory.decodeStream(response.getEntity().getContent());    //BitmapFactory decodes the InputStream of the HttpResponse
  10:     } catch (URISyntaxException e) {        //catch those exceptions
  11:         Log.e("ERROR",e.getMessage());
  12:     } catch (ClientProtocolException e) {
  13:         Log.e("ERROR",e.getMessage());
  14:     } catch (IllegalStateException e) {
  15:         Log.e("ERROR",e.getMessage());
  16:     } catch (IOException e) {
  17:         Log.e("ERROR",e.getMessage());
  18:     }
  19:     return bmp;
  20: }

It might not be a good idea to catch those exceptions here as this involves some UI. But I caught them here. Do as you please, and keep to whatever the programming paradigm you are using.

After acquiring the Bitmap Image you can simply create a new android.widget.ImageView (make sure you include an ImageView in the layout as well) and pass the Bitmap to that image view. The activity will display the Image on the ImageView.

   1: public class ViewImageActivity extends Activity{
   2:     private ImageView imageView;
   3:  
   4:     @Override
   5:     protected void onCreate(Bundle savedInstanceState) {
   6:         //other methods & tasks
   7:         imageView = (ImageView) findViewById(R.id.ivInputInterpret);    //retrieve the ImageView widget from the layout
   8:         imageView.setImageBitmap(getBitmap(fullURL));    //set the retrieved Bitmap as the Image
   9:     }
  10:  
  11: }

If you have any issues or problems post them in comments. I’ll try to answer them as I can.

A small tip , if you’re looking for android development tutorials check these awesome tutorials. They’ve helped me a lot. I’m sure they’ll be of immense help to you all as well.
Trust me, those tutorials are pretty awesome!
So till I meet you guys soon again, adiรณs!