Minggu, Maret 03, 2013

Loading Gambar Dari Internet Dengan Android

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvUdeFBB9pjMk9uCzJQFijTrs-kOOopJCRE0H3cr89LEys3OMx2hdIsG_CN7pFtZjFVlb4cK-Iwnoh0aHDeW71E5A-NIz1hv9zX-TTYx24G2L7BHqu_Ww40_WPJ6m3I3j-vgLEpNLL_c8/s1600/Logo_Android.jpg

yak, kembali lagi nih ke utak atik programming Android. Seperti yang sudah saya beritahukan pada postingan sebelumnya. Kini kita akan mencoba meload gambar dari internet. Sepertinya sih terdengar biasa saja ya. Memang sih kebanyakan dari kita menggunakan fungsi berikut untuk meload image dari internet.

HttpURLConnection connection= (HttpURLConnection)imageURL.openConnection();

connection.setDoInput(true);

connection.connect();

InputStream inputStream = connection.getInputStream();

bitmap = BitmapFactory.decodeStream(inputStream);//Convert to bitmap

image_view.setImageBitmap(bitmap);

Nah yang ingin saya bagikan pada tutorial kali ini adalah bagaimana meload gambar dari internet kemudian disimpan dalam memori. Wah pasti timbul pertanyaan, bukannya kalau disimpan di memori bakal ngebuat penuh ya? tapi tenang saja memori yang digunakan memori cache kok. Jadi hanya bersifat temporary, kalo cachenya di clear maka juga ikut ikutan hilang Open-mouthed smile. Keuntungan dari menyimpan image di cache adalah ketika kita membuat app yang butuh melakukan penyimpanan gambar atau app yang meload gambar berulang ulang akan menjadi lebih efisien. Image yang sudah di load tidak perlu didownload kembali, itung itung hemat kuota Smile.

Nah langsung aja ini nih caranya, pertama tama buat project baru di android dengan nama AndroidLoadImageFromWeb. untuk nama terserah sih, ga harus pakai punya saya. Setelah project selesai buat koding sesuai class yang diperlukan.

AndroidLoadImageFromWebActivity.java

package com.eepis.android;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;

public class AndroidLoadImageFromWebActivity extends Activity implements OnClickListener {
    Button load;
    ImageView image;
    ImageLoader imgLoader;
    int loader = R.drawable.loader;
    String image_url = "http://rapidpurple.com/purpleblog/wp-content/uploads/2011/11/php_mysql_logo.png";
   
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        load=(Button)findViewById(R.id.btnLoad);
        load.setOnClickListener(this);
        image = (ImageView) findViewById(R.id.image);       
    }
    @Override
    public void onClick(View arg0) {
        // TODO Auto-generated method stub
        imgLoader = new ImageLoader(getApplicationContext());
        imgLoader.DisplayImage(image_url, loader, image);
    }
}

FileCache.java

package com.eepis.android;

import java.io.File;
import android.content.Context;
 
public class FileCache {
 
    private File cacheDir;
 
    public FileCache(Context context){
        //Find the dir to save cached images
        if (android.os.Environment.getExternalStorageState().equals(android.os.Environment.MEDIA_MOUNTED))
            cacheDir=new File(android.os.Environment.getExternalStorageDirectory(),"TempImages");
        else
            cacheDir=context.getCacheDir();
        if(!cacheDir.exists())
            cacheDir.mkdirs();
    }
 
    public File getFile(String url){
        String filename=String.valueOf(url.hashCode());
        File f = new File(cacheDir, filename);
        return f;
 
    }
 
    public void clear(){
        File[] files=cacheDir.listFiles();
        if(files==null)
            return;
        for(File f:files)
            f.delete();
    }
 
}

ImageLoader.java

package com.eepis.android;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.io.OutputStream;
import java.net.HttpURLConnection;
import java.net.URL;
import java.util.Collections;
import java.util.Map;
import java.util.WeakHashMap;
import java.util.concurrent.ExecutorService;
import java.util.concurrent.Executors;
 
import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.widget.ImageView;
 
public class ImageLoader {
 
    MemoryCache memoryCache=new MemoryCache();
    FileCache fileCache;
    private Map<ImageView, String> imageViews=Collections.synchronizedMap(new WeakHashMap<ImageView, String>());
    ExecutorService executorService;
 
    public ImageLoader(Context context){
        fileCache=new FileCache(context);
        executorService=Executors.newFixedThreadPool(5);
    }
 
    int stub_id = R.drawable.ic_launcher;
    public void DisplayImage(String url, int loader, ImageView imageView)
    {
        stub_id = loader;
        imageViews.put(imageView, url);
        Bitmap bitmap=memoryCache.get(url);
        if(bitmap!=null)
            imageView.setImageBitmap(bitmap);
        else
        {
            queuePhoto(url, imageView);
            imageView.setImageResource(loader);
        }
    }
 
    private void queuePhoto(String url, ImageView imageView)
    {
        PhotoToLoad p=new PhotoToLoad(url, imageView);
        executorService.submit(new PhotosLoader(p));
    }
 
    private Bitmap getBitmap(String url)
    {
        File f=fileCache.getFile(url);
 
        //from SD cache
        Bitmap b = decodeFile(f);
        if(b!=null)
            return b;
 
        //from web
        try {
            Bitmap bitmap=null;
            URL imageUrl = new URL(url);
            HttpURLConnection conn = (HttpURLConnection)imageUrl.openConnection();
            conn.setConnectTimeout(30000);
            conn.setReadTimeout(30000);
            conn.setInstanceFollowRedirects(true);
            InputStream is=conn.getInputStream();
            OutputStream os = new FileOutputStream(f);
            Utils.CopyStream(is, os);
            os.close();
            bitmap = decodeFile(f);
            return bitmap;
        } catch (Exception ex){
           ex.printStackTrace();
           return null;
        }
    }
 
    //decodes image and scales it to reduce memory consumption
    private Bitmap decodeFile(File f){
        try {
            //decode image size
            BitmapFactory.Options o = new BitmapFactory.Options();
            o.inJustDecodeBounds = true;
            BitmapFactory.decodeStream(new FileInputStream(f),null,o);
 
            //Find the correct scale value. It should be the power of 2.
            final int REQUIRED_SIZE=70;
            int width_tmp=o.outWidth, height_tmp=o.outHeight;
            int scale=1;
            while(true){
                if(width_tmp/2<REQUIRED_SIZE || height_tmp/2<REQUIRED_SIZE)
                    break;
                width_tmp/=2;
                height_tmp/=2;
                scale*=2;
            }
 
            //decode with inSampleSize
            BitmapFactory.Options o2 = new BitmapFactory.Options();
            o2.inSampleSize=scale;
            return BitmapFactory.decodeStream(new FileInputStream(f), null, o2);
        } catch (FileNotFoundException e) {}
        return null;
    }
 
    //Task for the queue
    private class PhotoToLoad
    {
        public String url;
        public ImageView imageView;
        public PhotoToLoad(String u, ImageView i){
            url=u;
            imageView=i;
        }
    }
 
    class PhotosLoader implements Runnable {
        PhotoToLoad photoToLoad;
        PhotosLoader(PhotoToLoad photoToLoad){
            this.photoToLoad=photoToLoad;
        }
 
        @Override
        public void run() {
            if(imageViewReused(photoToLoad))
                return;
            Bitmap bmp=getBitmap(photoToLoad.url);
            memoryCache.put(photoToLoad.url, bmp);
            if(imageViewReused(photoToLoad))
                return;
            BitmapDisplayer bd=new BitmapDisplayer(bmp, photoToLoad);
            Activity a=(Activity)photoToLoad.imageView.getContext();
            a.runOnUiThread(bd);
        }
    }
 
    boolean imageViewReused(PhotoToLoad photoToLoad){
        String tag=imageViews.get(photoToLoad.imageView);
        if(tag==null || !tag.equals(photoToLoad.url))
            return true;
        return false;
    }
 
    //Used to display bitmap in the UI thread
    class BitmapDisplayer implements Runnable
    {
        Bitmap bitmap;
        PhotoToLoad photoToLoad;
        public BitmapDisplayer(Bitmap b, PhotoToLoad p){bitmap=b;photoToLoad=p;}
        public void run()
        {
            if(imageViewReused(photoToLoad))
                return;
            if(bitmap!=null)
                photoToLoad.imageView.setImageBitmap(bitmap);
            else
                photoToLoad.imageView.setImageResource(stub_id);
        }
    }
 
    public void clearCache() {
        memoryCache.clear();
        fileCache.clear();
    }
 
}

MemoryCache.java

package com.eepis.android;

import java.lang.ref.SoftReference;
import java.util.Collections;
import java.util.HashMap;
import java.util.Map;
import android.graphics.Bitmap;
 
public class MemoryCache {
    private Map<String, SoftReference<Bitmap>> cache=Collections.synchronizedMap(new HashMap<String, SoftReference<Bitmap>>());
 
    public Bitmap get(String id){
        if(!cache.containsKey(id))
            return null;
        SoftReference<Bitmap> ref=cache.get(id);
        return ref.get();
    }
 
    public void put(String id, Bitmap bitmap){
        cache.put(id, new SoftReference<Bitmap>(bitmap));
    }
 
    public void clear() {
        cache.clear();
    }
}

Utils.java

package com.eepis.android;

import java.io.InputStream;
import java.io.OutputStream;
 
public class Utils {
    public static void CopyStream(InputStream is, OutputStream os)
    {
        final int buffer_size=1024;
        try
        {
            byte[] bytes=new byte[buffer_size];
            for(;;)
            {
              int count=is.read(bytes, 0, buffer_size);
              if(count==-1)
                  break;
              os.write(bytes, 0, count);
            }
        }
        catch(Exception ex){}
    }
}

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
   
    <ImageView
        android:id="@+id/image"
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        android:layout_margin="10dip"/>

    <Button
        android:id="@+id/btnLoad"
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        android:layout_margin="10dip"
        android:text="Load Image" />

</LinearLayout>

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.eepis.android"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk android:minSdkVersion="10" />

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name" >
        <activity
            android:label="@string/app_name"
            android:name=".AndroidLoadImageFromWebActivity" >
            <intent-filter >
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
   
    <!-- Internet Permissions -->
    <uses-permission android:name="android.permission.INTERNET" />
   
    <uses-permission android:name="android.permission.CHANGE_WIFI_STATE"></uses-permission>
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"></uses-permission>
   
    <!-- Permission to write to external storage -->
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

</manifest>

Hasil Tampilan Aplikasi

image

Demikianlah tutorial kali ini semoga bisa bermanfaat buat kawan kawan sekalian. Untuk source projectnya bisa di download di alamat berikut

DOWNLOAD

Yah akhirnya selesai juga tutorial kali ini, setelah bisa mendownload gambar tentunya kita juga bisa mengupload dong. Nantikan tutorial selanjutnya ya tentang upload image dengan http-post multipart. So Keep Update ya Open-mouthed smile

jika ada pertanyaan silahkan saja email saya di bagibagi23@gmail.com

Sumber Artikel

http://www.androidhive.info/2012/07/android-loading-image-from-url-http/

http://stackoverflow.com/questions/3085366/android-image-cache-stategy-and-memory-cache-size

http://developer.android.com/training/displaying-bitmaps/cache-bitmap.html

1 komentar:

  1. Bagaimana menampilkan gambar pada listview yang menggunakan database MySQL, mohon pencerahan...

    BalasHapus