Horizontal Scroll View dengan ViewPager di Android

Ketemu lagi nih di sesi tutorial Android, setelah dari kemarin ngebahas terus tentang akses data network dengan JSON di Android sekarang mari kita bahas lagi mengenai bagaimana membuat tampilan yang keren di Android. What? kenapa ngebahas tampilan sih? hehe, jangan salah sangka dulu. Meski cuman tampilan UI tapi penting loo buat aplikasi. Nah kebetulan Android kan Touch Screen jadi tampilan yang bagus tentu harus manfaatin Touch Screennya dong, tahu maksudnya? yap jadi efek seperti slide,swipe,scroll harus dimanfaatin dong. Eman klo cuman buat tombol tombol yang bisa di klik doang. hehe

Nah berhubung ada tutorial bagus nih, akhirnya coba deh. Kali ini kita akan membahas untuk membuat Horizontal Scroll View. Fitur ini sering sekali digunakan di aplikasi aplikasi android yang beredar di pasaran. Sebenarnya sudah ada fitur bawaan layout dari Android untuk bisa melakukan Horizontal Scroll View. Seperti contoh xml layout dibawah ini.

<?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"     android:background="@drawable/bg" >    <HorizontalScrollView         android:id="@+id/bottom"         android:layout_width="fill_parent"         android:layout_height="fill_parent"         android:layout_alignParentBottom="true"         android:fadeScrollbars="false"         android:scrollbars="none" >         <LinearLayout             android:layout_width="fill_parent"             android:layout_height="fill_parent"             android:orientation="horizontal">         <LinearLayout             android:layout_width="fill_parent"             android:layout_height="fill_parent"             android:orientation="vertical"             android:padding="10dp" >             <TextView                 android:layout_width="fill_parent"                 android:layout_height="wrap_content"                 android:textColor="#000"                 android:textStyle="bold"                 android:textSize="25dp"                 android:text="Page 1                                       "/>             <TextView                 android:layout_width="fill_parent"                 android:layout_height="fill_parent"                 android:textColor="#000"                 android:textSize="16dp"                 android:text="Page 1"/>         </LinearLayout>         <LinearLayout             android:layout_width="fill_parent"             android:layout_height="fill_parent"             android:orientation="vertical"             android:layout_gravity="center"             android:padding="10dp" >                 <TextView                 android:layout_width="fill_parent"                 android:layout_height="wrap_content"                 android:textColor="#000"                 android:textStyle="bold"                 android:textSize="25dp"                 android:text="Page 2"/>             <TextView                 android:layout_width="fill_parent"                    android:layout_height="fill_parent"                 android:textColor="#000"                 android:textSize="16dp"                 android:text="Page 2"/>         </LinearLayout>         </LinearLayout>     </HorizontalScrollView> </LinearLayout>

Wah ternyata gampang juga ya. Tapi yang akan kita implementasikan untuk tutorial kali ini bukan sesederhana itu hehe. Memang sih agak rumit, tapi setara dengan apa yang diberikan kok . Kenapa sih kita tidak gunakan fitur bawaan layout Horizontal Scroll View saja? sebenarnya bukan masalah sih, cuman ya gitu pertama kalo hobi masang masang tag XML ga masalah sih, sekarang pada contoh diatas yang pakai 2 halaman aja tagnya kaya gitu panjang. gimana kalo 5 halaman, 10 halaman atau bahkan 20 halaman (lebay kaleee ). Selain itu yang kedua setiap xml layout jumlah viewnya terbatas. jadi kalo misalnya lebih dari 80 Views biasanya sih ga mau jalan. Ga percaya? coba aja sendiri . wkwkwkwkwk

Nah, karena itu cara yang paling efisien adalah menggunakan Android ViewPager. Pada ViewPager kita membuat setiap activity menjadi sebuah fragment yang nantinya akan dijalankan di main container. yah mirip seperti waktu kita membuat Tab Layout cuman disini activitynya diganti dengan fragment karena kita bermain dengan UInya. Buat yang belum tahu apa itu Fragments bisa dibaca disini nih. Dengan ini kita bisa membuat 2 Fragment dalam satu activity dan setiap fragmentnya bisa kita isi dengan layout dan fungsi yang berbeda. Lebih efisien kan? hehe

Untuk memulai, download terlebih dahulu library Android Compatibility package v4, Revision 3. Karena pada API yang sekarang tidak ada jadi harus ditambahkan ke build path. Dan jangan khawatir, saya sediakan juga kok di project yang saya upload di akhir artikel.

Sekarang buat project baru android dengan nama AndroidViewPager(untuk nama dan package terserah anda, disini saya hanya menggunakan contoh saja).

kemudian buat Class berikut

AndroidViewPagerActivity

package com.eepis.android; import android.os.Bundle; import android.support.v4.app.FragmentActivity; import android.support.v4.view.ViewPager; import android.support.v4.view.ViewPager.OnPageChangeListener; import android.view.View; public class AndroidViewPagerActivity extends FragmentActivity {     private ViewPager _mViewPager;     private ViewPagerAdapter _adapter;     /** Called when the activity is first created. */     @Override     public void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.main);         setUpView();         setTab();     }     private void setUpView(){                _mViewPager = (ViewPager) findViewById(R.id.viewPager);      _adapter = new ViewPagerAdapter(getApplicationContext(),getSupportFragmentManager());      _mViewPager.setAdapter(_adapter);      _mViewPager.setCurrentItem(0);     }     private void setTab(){             _mViewPager.setOnPageChangeListener(new OnPageChangeListener(){                                                 @Override                         public void onPageScrollStateChanged(int position) {}                         @Override                         public void onPageScrolled(int arg0, float arg1, int arg2) {}                         @Override                         public void onPageSelected(int position) {                             // TODO Auto-generated method stub                             switch(position){                             case 0:                                 findViewById(R.id.first_tab).setVisibility(View.VISIBLE);                                 findViewById(R.id.second_tab).setVisibility(View.INVISIBLE);                                 break;                                                             case 1:                                 findViewById(R.id.first_tab).setVisibility(View.INVISIBLE);                                 findViewById(R.id.second_tab).setVisibility(View.VISIBLE);                                 break;                             }                         }                                             });     } }

ViewPagerAdapter

package com.eepis.android; import android.content.Context; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; public class ViewPagerAdapter extends FragmentPagerAdapter {     private Context _context;         public ViewPagerAdapter(Context context, FragmentManager fm) {         super(fm);            _context=context;                 }     @Override     public Fragment getItem(int position) {         Fragment f = new Fragment();         switch(position){         case 0:             f=LayoutOne.newInstance(_context);                break;         case 1:             f=LayoutTwo.newInstance(_context);                break;         }         return f;     }     @Override     public int getCount() {         return 2;     } }

LayoutOne

package com.eepis.android; import android.content.Context; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.view.View.OnClickListener; import android.widget.Button; import android.widget.Toast; public class LayoutOne extends Fragment {     Button klik;     public static Fragment newInstance(Context context) {         LayoutOne f = new LayoutOne();                    return f;     }     @Override     public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {         ViewGroup root = (ViewGroup) inflater.inflate(R.layout.layout_one, null);            klik=(Button)root.findViewById(R.id.btn);         klik.setOnClickListener(new OnClickListener() {                         @Override             public void onClick(View arg0) {                 // TODO Auto-generated method stub                 Toast.makeText(LayoutOne.this.getActivity(), "Page 1", 1).show();             }         });         return root;     }     }

LayoutTwo

package com.eepis.android; import android.content.Context; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.view.View.OnClickListener; import android.widget.Button; import android.widget.Toast; public class LayoutTwo extends Fragment {     Button klik;     public static Fragment newInstance(Context context) {         LayoutTwo f = new LayoutTwo();                    return f;     }     @Override     public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {         ViewGroup root = (ViewGroup) inflater.inflate(R.layout.layout_two, null);                klik=(Button)root.findViewById(R.id.btn);         klik.setOnClickListener(new OnClickListener() {                         @Override             public void onClick(View arg0) {                 // TODO Auto-generated method stub                 Toast.makeText(LayoutTwo.this.getActivity(), "Page 2", 1).show();             }         });         return root;     }     }

dan tambahkan XML Layouit berikut

indicator.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" >     <TableLayout         style="@style/layout_f_w"         android:stretchColumns="*" >         <TableRow             android:background="#dddddd"             android:id="@+id/tableRow1"             style="@style/layout_wrap" >                          <!-- First Tab indicator -->                 <LinearLayout                 style="@style/indicator_style"                 android:id="@+id/first_tab" >                </LinearLayout>                            <!-- Second Tab indicator -->                 <LinearLayout                 style="@style/indicator_style"                 android:id="@+id/second_tab"                 android:visibility="invisible" >                </LinearLayout>         </TableRow>     </TableLayout>         <!-- Bottom line -->         <LinearLayout         style="@style/h_line"         android:orientation="vertical" >       </LinearLayout>                        </LinearLayout>

layout_one.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:background="@color/white"     android:gravity="center|center"     android:orientation="vertical" >     <TextView         android:id="@+id/textView1"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="First Layout" />     <Button         android:id="@+id/btn"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="Click Here" /> </LinearLayout>

layout_two.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:background="@color/white"     android:gravity="center|center"     android:orientation="vertical" >     <TextView         android:id="@+id/textView1"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="Second Layout" />         <Button         android:id="@+id/btn"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="Click Here" /> </LinearLayout>

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:background="@color/white"     android:orientation="vertical" >         <TableLayout         style="@style/layout_f_w"         android:stretchColumns="*" >         <TableRow             android:id="@+id/tableRow1"             android:background="#dddddd"             style="@style/layout_wrap">                           <!-- First Tab -->                 <LinearLayout                 style="@style/layout_f_w"                 android:id="@+id/first_text"                 android:orientation="vertical" >                                       <TextView                         android:id="@+id/textView1"                         style="@style/text_title"                         android:text="Page 1" />                </LinearLayout>                            <!-- Second Tab -->                 <LinearLayout                 style="@style/layout_f_w"                 android:id="@+id/second_text"                 android:orientation="vertical" >                     <TextView                         android:id="@+id/textView1"                         style="@style/text_title"                         android:text="Page 2" />                            </LinearLayout>                  </TableRow>     </TableLayout>     <!-- Include Tab Indicator  --> <include layout="@layout/indicator" android:layout_width="fill_parent" android:layout_height="wrap_content"  />   <android.support.v4.view.ViewPager         android:layout_width="fill_parent" android:layout_height="fill_parent"         android:id="@+id/viewPager" /> </LinearLayout>

selain itu kita butuh tambahan XML yang nantinya diletakkan pada res/values

color.xml

<?xml version="1.0" encoding="utf-8"?> <resources>     <color name="white">#FFF</color>     <color name="l_blue">#909BAA</color>     <color name="d_blue">#6D7B92</color>     <color name="gray">#CCCCCC</color>     <color name="d_gray">#666</color>     <color name="black">#000</color>     </resources>

styles.xml

<?xml version="1.0" encoding="utf-8"?> <resources>     <style name="Theme" parent="android:Theme">         <item name="android:background">@null</item>         <item name="android:windowNoTitle">true</item>     </style>         <style name="text_title">         <item name="android:layout_width">fill_parent</item>         <item name="android:layout_height">wrap_content</item>         <item name="android:textColor">@color/d_gray</item>         <item name="android:gravity">center</item>     </style>         <style name="text_option">         <item name="android:layout_width">wrap_content</item>         <item name="android:layout_height">wrap_content</item>         <item name="android:textColor">@color/black</item>     </style>         <style name="layout_wrap">         <item name="android:layout_width">wrap_content</item>         <item name="android:layout_height">wrap_content</item>     </style>         <style name="layout_fill">         <item name="android:layout_width">fill_parent</item>         <item name="android:layout_height">fill_parent</item>     </style>         <style name="layout_f_w">         <item name="android:layout_width">fill_parent</item>         <item name="android:layout_height">wrap_content</item>     </style>         <style name="h_line">         <item name="android:layout_width">fill_parent</item>         <item name="android:layout_height">1.5dip</item>         <item name="android:background">@color/l_blue</item>     </style>             <style name="indicator_style">         <item name="android:layout_width">fill_parent</item>         <item name="android:layout_height">4dip</item>         <item name="android:background">@color/l_blue</item>         <item name="android:orientation">vertical</item>     </style>     </resources>

jangan lupa add library tambahan ke Build Path

Hasil running aplikasi

 

 

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

DOWNLOAD

Nah untuk tutorial selanjutnya kita kembali lagi ke JSON sebentar ya hehe, habis lagi banyak tugas pake JSON. Cuman next post kita ga pake Android tapi pake JavaScript. So Keep Update ya

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

Referensi Artikel

http://manishkpr.webheavens.com/android-viewpager-example/

http://developer.android.com/reference/android/support/v4/view/ViewPager.html

http://developer.android.com/training/animation/screen-slide.html

http://developer.android.com/guide/components/fragments.html

Read More

Upload Image Dari Android Dengan HTTP Multipart

Pada postingan sebelumnya kita telah mempelajari bagaimana meload image dari url di android. Nah sekarang kita coba implementasikan hal yang sebaliknya, yaitu upload image ke url tertentu. Karena kita mengirim gambar ke url tertentu maka kita juga perlu menyiapkan server sidenya. Kita gunakan yang paling simple aja yaitu PHP. Untuk teknologi multipart ini file gambar yang akan dikirim dipecah pecah menjadi beberapa bagian, sehingga ketika ada koneksi putuh tetap bisa berjalan jika koneksi tersambung kembali. Ah daripada panjang lebar langsung dicoba aja deh.Tapi sebelum itu siapin XAMPP dan folder lokasi upload

Langkah awal yang kita lakukan adalah menyiapkan bagian servernya.Buat folder bernama imageupload di direktori htdocs(xampp) dan buat folder upload serta file upload.php di dalamnya. Berikut script untuk menangkap file yang dikirim dari android. letakkan di file upload.php

<?php $target_path  = "./upload/"; $target_path = $target_path . basename( $_FILES['uploaded']['name']); if(move_uploaded_file($_FILES['uploaded']['tmp_name'], $target_path)) { echo "The file ".  basename( $_FILES['uploaded']['name']). " has been uploaded"; } else{ echo "Gagal Bung!"; } ?>

Setelah itu download library httpclient-4.2.3 dan httpmime-4.2.3 di http://hc.apache.org/downloads.cgi atau bisa juga langsung ambil di project yang saya upload pada postingan ini. Disana sudah saya sediakan lengkap kok . Setelah di download add ke build path pada project anda.

Nah, sekarang kita mulai ke Androidnya. Buat project baru di Android dengan nama AndroidImageUpload(untuk nama dan package terserah anda disini hanya berupa contoh). Kemudian copykan kode berikut ke main activitynya

package com.eepis.android; import java.io.BufferedReader; import java.io.ByteArrayOutputStream; import java.io.DataInputStream; import java.io.DataOutputStream; import java.io.InputStreamReader; import java.net.HttpURLConnection; import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.util.Log; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; import android.widget.EditText; import android.widget.TextView; import android.widget.Toast; import android.database.Cursor; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Bitmap.CompressFormat; import android.provider.MediaStore; import org.apache.http.HttpResponse; import org.apache.http.client.HttpClient; import org.apache.http.client.methods.HttpPost; import org.apache.http.entity.mime.HttpMultipartMode; import org.apache.http.entity.mime.MultipartEntity; import org.apache.http.entity.mime.content.ByteArrayBody; import org.apache.http.entity.mime.content.StringBody; import org.apache.http.impl.client.DefaultHttpClient; public class AndroidImageUploadActivity extends Activity implements OnClickListener{     /** Called when the activity is first created. */     Button upload,add;     TextView status;     EditText nama;         //variable for upload data into http     HttpURLConnection connection = null;     DataOutputStream outputStream = null;     DataInputStream inputStream = null;         Bitmap bm;     static String pathToOurFile = "",format;     String urlServer = "http://10.0.2.2/imageupload/upload.php";     String lineEnd = "\r\n",twoHyphens = "--",boundary =  "*****";         private static final int SELECT_PICTURE = 0;     int bytesRead, bytesAvailable, bufferSize;     byte[] buffer;     int maxBufferSize = 1*1024*1024;         @Override     public void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.main);         upload=(Button)findViewById(R.id.btnChooseImage);         upload.setOnClickListener(this);         add=(Button)findViewById(R.id.btnAddImage);         add.setOnClickListener(this);         status=(TextView)findViewById(R.id.txtStatusGambar);         nama=(EditText)findViewById(R.id.editNama);     }     @Override     public void onClick(View v) {         // TODO Auto-generated method stub         switch (v.getId()) {         case R.id.btnChooseImage:             Intent intent = new Intent();             intent.setType("image/*");             intent.setAction(Intent.ACTION_GET_CONTENT);             startActivityForResult(Intent.createChooser(intent, "Select Picture"),SELECT_PICTURE);             break;         case R.id.btnAddImage:             try {                 bm = BitmapFactory.decodeFile(pathToOurFile);                 executeMultipartPost();                 } catch (Exception e) {                     Log.e(e.getClass().getName(), e.getMessage());                 }             break;         default:             break;         }     }         @Override     protected void onActivityResult(int requestCode, int resultCode, Intent data) {         super.onActivityResult(requestCode, resultCode, data);         if (resultCode == RESULT_OK) {             status.setText(data.getData().toString());             String[] projection = { MediaStore.Images.Media.DATA };                         Cursor cursor = managedQuery(data.getData(), projection, null, null, null);             int column_index = cursor.getColumnIndexOrThrow(MediaStore.Images.Media.DATA);             cursor.moveToFirst();             String filePath = cursor.getString(column_index);             cursor.close();             pathToOurFile=filePath;             format = filePath.substring(filePath.lastIndexOf(".") + 1, filePath.length());         }     }        public void executeMultipartPost() throws Exception {         try {             ByteArrayOutputStream bos = new ByteArrayOutputStream();             bm.compress(CompressFormat.JPEG, 75, bos);             byte[] data = bos.toByteArray();             HttpClient httpClient = new DefaultHttpClient();             HttpPost postRequest = new HttpPost(urlServer);             ByteArrayBody bab = new ByteArrayBody(data, nama.getText().toString()+"."+format);             MultipartEntity reqEntity = new MultipartEntity(                     HttpMultipartMode.BROWSER_COMPATIBLE);                     reqEntity.addPart("uploaded", bab);                     reqEntity.addPart("photoCaption", new StringBody("sfsdfsdf"));                     postRequest.setEntity(reqEntity);                     HttpResponse response = httpClient.execute(postRequest);                     BufferedReader reader = new BufferedReader(new InputStreamReader(                             response.getEntity().getContent(), "UTF-8"));                             String sResponse;                             StringBuilder s = new StringBuilder();                             while ((sResponse = reader.readLine()) != null) {                                 s = s.append(sResponse);                             }                             Toast.makeText(this, "Penambahan data berhasil", 1).show();                             System.out.println("Response:—————————————————————————————————————————-> " + s);         } catch (Exception e) {             // handle exception here             Log.e(e.getClass().getName(), e.getMessage());         }     } }

berikut file xml layoutnya

<?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"     android:padding="10dp" >     <EditText         android:id="@+id/editNama"         android:layout_width="fill_parent"         android:layout_height="wrap_content"         android:hint="Nama"         />     <TextView             android:id="@+id/txtStatusGambar"             android:layout_width="fill_parent"             android:layout_height="wrap_content"             android:textColor="#fff"             android:text="Gambar Belum Dipilih" >     </TextView>     <LinearLayout             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:orientation="horizontal"             android:layout_gravity="center_horizontal" >     <Button             android:id="@+id/btnChooseImage"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:layout_margin="10dp"             android:text="Select Image" >     </Button>     <Button             android:id="@+id/btnAddImage"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:layout_margin="10dp"             android:text="Upload Image" >     </Button>        </LinearLayout> </LinearLayout>

jangan lupa tambahkan permission di manifest

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

Hasil tampilan aplikasi

 

nah muncul deh di direktori upload dengan nama tes

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

DOWNLOAD

Setelah banyak bermain main dengan networking di Android sekarang balik ke localnya ya. Untuk postingan berikutnya adalah mengenai pemanfaatan swipe di Android Apps. Secara gitu namanya aplikasi touchscreen kalo ndak pake swipe kan kurang Greget gitu(kata Mad Dod ) nah jadi next post kita akan mencoba bagaimana membuat scroller view secara horizontal dengan ViewPager. So Keep Update ya

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

Read More

Loading Gambar Dari Internet Dengan Android

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 . 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 .

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

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

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

Read More