Displaying an image larger than the device's screen and scroll around it

    Sometimes, we want to display a large image with it's original size (larger than device's screen). In order to see obscured parts, we must scroll it.
    In this post, I present a simple way to make "scrollable large image" by using ScrollView and HorizontalScrollView.
Firstly, make your app activity layout like this:

activity_large_image.xml

<HorizontalScrollView xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:scrollbars="none" >

    <ScrollView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scrollbars="none" >

        <ImageView
            android:id="@+id/img_large"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/app_name" />
    </ScrollView>

</HorizontalScrollView>

As you can see, your ImageView must stay inside both of 2 ScrollViews.
Now, create a AsyncTask to load image from an URL:

DownloadImageTask.java

package com.blogspot.hongthaiit.largeimage;

import java.io.InputStream;

import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.AsyncTask;
import android.util.Log;
import android.widget.ImageView;

public class DownloadImageTask extends AsyncTask<String, Void, Bitmap> {
    private ImageView bmImage;

    public DownloadImageTask(ImageView bmImage) {
        this.bmImage = bmImage;
    }

    @Override
    protected Bitmap doInBackground(String... urls) {
        String urldisplay = urls[0];
        Bitmap mIcon11 = null;
        try {
            InputStream in = new java.net.URL(urldisplay).openStream();
            mIcon11 = BitmapFactory.decodeStream(in);
        } catch (Exception e) {
            Log.e("Error", e.getMessage());
            e.printStackTrace();
        }
        return mIcon11;
    }

    @Override
    protected void onPostExecute(Bitmap result) {
        bmImage.setImageBitmap(result);
    }
}

And next, open your activity and paste this code:

ImageActivity.java

package com.blogspot.hongthaiit.largeimage;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ImageView;

public class ImageActivity extends Activity {

 private ImageView image;
 private final static String IMAGE_URL = "http://i.imgur.com/4b3eT1d.jpg";

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_large_image);

  image = (ImageView) findViewById(R.id.img_large);
  
  //call asynctask to get image from url
  new DownloadImageTask(image).execute(IMAGE_URL);
 }
}

Finally, add Internet permission to AndroidManifest:

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

Our result:

(sorry for ads)

Author : Hong Thai

Share