Android Multiple Download file in ListView and Show Progress unit percentage |
Android Multiple Download file in ListView and Show Progress unit percentage บทความนี้แรงบันดาลใจมาจากโปรแกรม LINE ที่อยู่บน Application ของ LINE เพราะในขณะที่เพื่อนใน Contact List ได้ส่งไฟล์มาให้เราสามารถคลิกเพื่อดาวน์โหลดไฟล์หลาย ๆ รายการพร้อม ๆ กับ ก็เลยเกิดความอยากรู้ว่า มีหลักการและวิธีการเขียนโปรแกรมอย่างไร ที่จะแสดงสถานะการ Download file บน ListView ที่สามารถทำงานในหลาย ๆ Items พร้อม ๆ กัน
และในช่วงที่ได้ศึกษ๋าการทำงานของ Thread กับ AsyncTask ก็ได้เข้าใจหลักการพื้นฐานเกี่ยวกับการแยก Process การทำงานด้วย Thread และสั่งให้ AsyncTask ทำงานเป็น Background อยู่เบื้องหลัง และในขณะเดียวกันก็เขียน Handler เพื่ออัพเดดสถานะของ ListView ใน Item ต่าง ๆ ที่กำลังดาวน์โหลด
รูปอธิบายการทำงานและการดาวน์โหลดครั้งล่ะหลาย ๆ Item ของ ListView และการแสดง Progress สถานะเปอร์เซ็นต์ที่ทำงานอยู่
Android Thread and Handler
Android AsyncTask and ProgressBar
แนะนำให้อ่าน 2 บทความนี้เพื่อความเข้าใจมากขึ้น
AndroidManifest.xml
<uses-permission android:name="android.permission.INTERNET" />
ในการเขียน Android เพื่อติดต่อกับ Internet จะต้องกำหนด Permission ในส่วนนี้ด้วยทุกครั้ง
ไฟล์รุปภาพที่อยู่บน Web Server ที่จะดาวน์โหลดผ่านโปรแกรม Android สังเกตุว่ามีภาพที่เป็น Thumbnail และ Full Image ซึ่ง Thumbnail เราจะใช้แสดงบน Column ของ ListView และ Full Image จะใช้การดาวนโหลดจัดเก็บไว้ใน SD Card
Example 1 การสร้าง ListView และ Download file ในรายการของ Items
โครงสร้างของไฟล์ประกอบด้วย 4 ไฟล์คือ MainActivity.java, activity_main.xml, activity_column.xml และ custom_fullimage_dialog.xml
activity_main.xml
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tableLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TableRow
android:id="@+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="ListView and ProgressBar : "
android:layout_span="1"
android:textAppearance="?android:attr/textAppearanceMedium" />
</TableRow>
<View
android:layout_height="1dip"
android:background="#CCCCCC" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.1">
<ListView
android:id="@+id/listView1"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</ListView>
</LinearLayout>
<View
android:layout_height="1dip"
android:background="#CCCCCC" />
<LinearLayout
android:id="@+id/LinearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dip" >
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="By.. ThaiCreate.Com" />
</LinearLayout>
</TableLayout>
activity_column.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:id="@+id/ColImgPath"
android:layout_width="110dp"
android:layout_height="110dp"
/>
<TableLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="@+id/ColImgID"
android:text="Column 1" />
<TextView
android:id="@+id/ColImgName"
android:text="Column 2" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="@+id/ColStatus"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Status" />
<ProgressBar
android:id="@+id/progressBar"
style="?android:attr/progressBarStyleHorizontal"/>
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<Button
android:id="@+id/btnDownload"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Download" />
<Button
android:id="@+id/btnView"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="View Images" />
</TableRow>
</TableLayout>
</LinearLayout>
custom_fullimage_dialog.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/layout_root"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:padding="10dp" >
<ImageView
android:id="@+id/fullimage"
android:layout_width="match_parent"
android:layout_height="241dp" />
<TextView android:id="@+id/custom_fullimage_placename"
android:layout_width="wrap_content" android:layout_height="fill_parent"
android:textColor="#FFF">
</TextView>
</LinearLayout>
MainActivity.java
package com.myapp;
import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.ByteArrayOutputStream;
import java.io.Closeable;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.net.URL;
import java.net.URLConnection;
import java.util.ArrayList;
import java.util.HashMap;
import android.app.Activity;
import android.app.AlertDialog;
import android.app.Dialog;
import android.app.ProgressDialog;
import android.content.Context;
import android.content.DialogInterface;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Color;
import android.os.AsyncTask;
import android.os.Bundle;
import android.os.Handler;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.ProgressBar;
import android.widget.TextView;
public class MainActivity extends Activity {
private ListView lstView;
private ImageAdapter imageAdapter;
private Handler handler = new Handler();;
public static final int DIALOG_DOWNLOAD_THUMBNAIL_PROGRESS = 0;
private ProgressDialog mProgressDialog;
ArrayList<HashMap<String, Object>> MyArrList = new ArrayList<HashMap<String, Object>>();
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
new LoadContentFromServer().execute();
}
public void ShowThumbnailData()
{
// ListView and imageAdapter
lstView = (ListView) findViewById(R.id.listView1);
lstView.setClipToPadding(false);
imageAdapter = new ImageAdapter(getApplicationContext());
lstView.setAdapter(imageAdapter);
}
public void startDownload(final int position) {
Runnable runnable = new Runnable() {
int Status = 0;
public void run() {
String urlDownload = MyArrList.get(position).get("ImagePathFull").toString();
int count = 0;
try {
URL url = new URL(urlDownload);
URLConnection conexion = url.openConnection();
conexion.connect();
int lenghtOfFile = conexion.getContentLength();
Log.d("ANDRO_ASYNC", "Lenght of file: " + lenghtOfFile);
InputStream input = new BufferedInputStream(url.openStream());
// Get File Name from URL
String fileName = urlDownload.substring(urlDownload.lastIndexOf('/')+1, urlDownload.length() );
OutputStream output = new FileOutputStream("/mnt/sdcard/mydata/"+fileName);
byte data[] = new byte[1024];
long total = 0;
while ((count = input.read(data)) != -1) {
total += count;
Status = (int)((total*100)/lenghtOfFile);
output.write(data, 0, count);
// Update ProgressBar
handler.post(new Runnable() {
public void run() {
updateStatus(position,Status);
}
});
}
output.flush();
output.close();
input.close();
} catch (Exception e) {}
}
};
new Thread(runnable).start();
}
private void updateStatus(int index,int Status){
View v = lstView.getChildAt(index - lstView.getFirstVisiblePosition());
// Update ProgressBar
ProgressBar progress = (ProgressBar)v.findViewById(R.id.progressBar);
progress.setProgress(Status);
// Update Text to ColStatus
TextView txtStatus = (TextView)v.findViewById(R.id.ColStatus);
txtStatus.setPadding(10, 0, 0, 0);
txtStatus.setText("Load : " + String.valueOf(Status)+"%");
// Enabled Button View
if(Status >= 100)
{
Button btnView = (Button)v.findViewById(R.id.btnView);
btnView.setTextColor(Color.RED);
btnView.setEnabled(true);
}
}
@Override
protected Dialog onCreateDialog(int id) {
switch (id) {
case DIALOG_DOWNLOAD_THUMBNAIL_PROGRESS:
mProgressDialog = new ProgressDialog(this);
mProgressDialog.setMessage("Downloading Thumbnail.....");
mProgressDialog.setProgressStyle(ProgressDialog.STYLE_SPINNER);
mProgressDialog.setCancelable(true);
mProgressDialog.show();
return mProgressDialog;
default:
return null;
}
}
class LoadContentFromServer extends AsyncTask<Object, Integer, Object> {
protected void onPreExecute() {
super.onPreExecute();
showDialog(DIALOG_DOWNLOAD_THUMBNAIL_PROGRESS);
}
@Override
protected Object doInBackground(Object... params) {
HashMap<String, Object> map;
Bitmap bm;
map = new HashMap<String, Object>();
map.put("ImageID", "1");
map.put("ImageName", "Image 1");
map.put("ImagePathThum", "https://www.thaicreate.com/android/img1_thum.jpg");
bm = loadBitmap("https://www.thaicreate.com/android/img1_thum.jpg");
map.put("ImageThumBitmap", bm);
map.put("ImagePathFull", "https://www.thaicreate.com/android/img1_full.jpg");
MyArrList.add(map);
map = new HashMap<String, Object>();
map.put("ImageID", "2");
map.put("ImageName", "Image 2");
map.put("ImagePathThum", "https://www.thaicreate.com/android/img2_thum.jpg");
bm = loadBitmap("https://www.thaicreate.com/android/img2_thum.jpg");
map.put("ImageThumBitmap", bm);
map.put("ImagePathFull", "https://www.thaicreate.com/android/img2_full.jpg");
MyArrList.add(map);
map = new HashMap<String, Object>();
map.put("ImageID", "3");
map.put("ImageName", "Image 3");
map.put("ImagePathThum", "https://www.thaicreate.com/android/img3_thum.jpg");
bm = loadBitmap("https://www.thaicreate.com/android/img3_thum.jpg");
map.put("ImageThumBitmap", bm);
map.put("ImagePathFull", "https://www.thaicreate.com/android/img3_full.jpg");
MyArrList.add(map);
map = new HashMap<String, Object>();
map.put("ImageID", "4");
map.put("ImageName", "Image 4");
map.put("ImagePathThum", "https://www.thaicreate.com/android/img4_thum.jpg");
bm = loadBitmap("https://www.thaicreate.com/android/img4_thum.jpg");
map.put("ImageThumBitmap", bm);
map.put("ImagePathFull", "https://www.thaicreate.com/android/img4_full.jpg");
MyArrList.add(map);
map = new HashMap<String, Object>();
map.put("ImageID", "5");
map.put("ImageName", "Image 5");
map.put("ImagePathThum", "https://www.thaicreate.com/android/img5_thum.jpg");
bm = loadBitmap("https://www.thaicreate.com/android/img5_thum.jpg");
map.put("ImageThumBitmap", bm);
map.put("ImagePathFull", "https://www.thaicreate.com/android/img5_full.jpg");
MyArrList.add(map);
map = new HashMap<String, Object>();
map.put("ImageID", "6");
map.put("ImageName", "Image 6");
map.put("ImagePathThum", "https://www.thaicreate.com/android/img6_thum.jpg");
bm = loadBitmap("https://www.thaicreate.com/android/img6_thum.jpg");
map.put("ImageThumBitmap", bm);
map.put("ImagePathFull", "https://www.thaicreate.com/android/img6_full.jpg");
MyArrList.add(map);
return null;
}
@Override
protected void onPostExecute(Object result) {
ShowThumbnailData();
dismissDialog(DIALOG_DOWNLOAD_THUMBNAIL_PROGRESS);
removeDialog(DIALOG_DOWNLOAD_THUMBNAIL_PROGRESS);
}
}
class ImageAdapter extends BaseAdapter {
private Context mContext;
public ImageAdapter(Context context) {
mContext = context;
}
public int getCount() {
return MyArrList.size();
}
public Object getItem(int position) {
return MyArrList.get(position);
}
public long getItemId(int position) {
return position;
}
public View getView(final int position, View convertView, ViewGroup parent) {
// TODO Auto-generated method stub
LayoutInflater inflater = (LayoutInflater) mContext
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
if (convertView == null) {
convertView = inflater.inflate(R.layout.activity_column, null);
}
// ColImage
ImageView imageView = (ImageView) convertView.findViewById(R.id.ColImgPath);
imageView.getLayoutParams().height = 110;
imageView.getLayoutParams().width = 110;
imageView.setPadding(10, 10, 10, 10);
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
try
{
imageView.setImageBitmap((Bitmap)MyArrList.get(position).get("ImageThumBitmap"));
} catch (Exception e) {
// When Error
imageView.setImageResource(android.R.drawable.ic_menu_report_image);
}
// ColImgID
TextView txtImgID = (TextView) convertView.findViewById(R.id.ColImgID);
txtImgID.setPadding(10, 0, 0, 0);
txtImgID.setText("ID : " + MyArrList.get(position).get("ImageID").toString());
// ColImgName
TextView txtPicName = (TextView) convertView.findViewById(R.id.ColImgName);
txtPicName.setPadding(10, 0, 0, 0);
txtPicName.setText("Name : " + MyArrList.get(position).get("ImageName").toString());
// ColStatus
TextView txtStatus = (TextView) convertView.findViewById(R.id.ColStatus);
txtStatus.setPadding(10, 0, 0, 0);
txtStatus.setText("...");
//btnDownload
final Button btnDownload = (Button) convertView.findViewById(R.id.btnDownload);
btnDownload.setTextColor(Color.RED);
btnDownload.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
// Download
btnDownload.setEnabled(false);
btnDownload.setTextColor(Color.GRAY);
startDownload(position);
}
});
//btnView
Button btnView = (Button) convertView.findViewById(R.id.btnView);
btnView.setEnabled(false);
btnView.setTextColor(Color.GRAY);
btnView.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
ViewImageSDCard(position);
}
});
// progressBar
ProgressBar progress = (ProgressBar) convertView.findViewById(R.id.progressBar);
progress.setPadding(10, 0, 0, 0);
return convertView;
}
}
// View Image from SD Card
public void ViewImageSDCard(int position) {
final AlertDialog.Builder imageDialog = new AlertDialog.Builder(this);
final LayoutInflater inflater = (LayoutInflater) this
.getSystemService(LAYOUT_INFLATER_SERVICE);
View layout = inflater.inflate(R.layout.custom_fullimage_dialog,
(ViewGroup) findViewById(R.id.layout_root));
ImageView image = (ImageView) layout.findViewById(R.id.fullimage);
String urlDownload = MyArrList.get(position).get("ImagePathFull").toString();
// Get File Name from URL
String fileName = urlDownload.substring(urlDownload.lastIndexOf('/')+1, urlDownload.length() );
String strPath = "/mnt/sdcard/mydata/" + fileName;
Bitmap bm = BitmapFactory.decodeFile(strPath); // Path from SDCard
image.setScaleType(ImageView.ScaleType.CENTER_CROP);
image.setImageBitmap(bm);
String strName = MyArrList.get(position).get("ImageName").toString();
imageDialog.setIcon(android.R.drawable.btn_star_big_on);
imageDialog.setTitle("View : " + strName);
imageDialog.setView(layout);
imageDialog.setPositiveButton(android.R.string.ok,
new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int which) {
dialog.dismiss();
}
});
imageDialog.create();
imageDialog.show();
}
/***** Get Image Resource from URL (Start) *****/
private static final String TAG = "Image";
private static final int IO_BUFFER_SIZE = 4 * 1024;
public static Bitmap loadBitmap(String url) {
Bitmap bitmap = null;
InputStream in = null;
BufferedOutputStream out = null;
try {
in = new BufferedInputStream(new URL(url).openStream(), IO_BUFFER_SIZE);
final ByteArrayOutputStream dataStream = new ByteArrayOutputStream();
out = new BufferedOutputStream(dataStream, IO_BUFFER_SIZE);
copy(in, out);
out.flush();
final byte[] data = dataStream.toByteArray();
BitmapFactory.Options options = new BitmapFactory.Options();
//options.inSampleSize = 1;
bitmap = BitmapFactory.decodeByteArray(data, 0, data.length,options);
} catch (IOException e) {
Log.e(TAG, "Could not load Bitmap from: " + url);
} finally {
closeStream(in);
closeStream(out);
}
return bitmap;
}
private static void closeStream(Closeable stream) {
if (stream != null) {
try {
stream.close();
} catch (IOException e) {
android.util.Log.e(TAG, "Could not close stream", e);
}
}
}
private static void copy(InputStream in, OutputStream out) throws IOException {
byte[] b = new byte[IO_BUFFER_SIZE];
int read;
while ((read = in.read(b)) != -1) {
out.write(b, 0, read);
}
}
/***** Get Image Resource from URL (End) *****/
}
Screenshot
กำลังแสดงข้อมูลและโหลดภาพ Thumbnail จาก Server
หลังจากโหลดข้อมูลและ Thumbnail เรียบร้อยแล้วให้ทดสอบการดาวน์โหลด Full Image
คลิกดาวน์โหลด จะเห็นว่าใน ListView ของ Items นั้น ๆ จะแสดง ProgressBar และจำนวนเปอร์เซ็นต์ที่กำลัง Download
หลังจากที่ Download เรียบร้อยแล้วปุ่ม View Image จะถุก Enabled
สามารถคลิกดาวน์โหลดได้หลาย ๆ รายการพร้อม ๆ กับ และแต่ล่ะ Items ก็จะแยก Process การทำงานกัน
ไฟล์ที่เป็น Full Images จะถูก Save ลงใน SD Card
สามารถคลิกที่ View Image เพื่อดูเรียกภาพที่อยุ่ใน SD Card ออกมาแสดงบน Dialog
แสดง Dialog บน Popup ของ Full Image
Example 2 การอ่านข้อมูลจาก MySQL ที่อยู่ในฝั่งของ Server และแสดงผลบน ListView และสามารถดาวน์โหลดได้ในแต่ล่ะ Items เช่นเดียวกับตัวอย่างที่ 1
Web Server
images
CREATE TABLE IF NOT EXISTS `images` (
`ImageID` int(11) NOT NULL auto_increment,
`ImageName` varchar(50) NOT NULL,
`ImagePath_Thumbnail` varchar(150) NOT NULL,
`ImagePath_FullPhoto` varchar(150) NOT NULL,
PRIMARY KEY (`ImageID`)
) ENGINE=MyISAM AUTO_INCREMENT=7 ;
--
-- Dumping data for table `images`
--
INSERT INTO `images` (`ImageID`, `ImageName`, `ImagePath_Thumbnail`, `ImagePath_FullPhoto`) VALUES
(1, 'Image 1', 'https://www.thaicreate.com/android/img1_thum.jpg', 'https://www.thaicreate.com/android/img1_full.jpg'),
(2, 'Image 2', 'https://www.thaicreate.com/android/img2_thum.jpg', 'https://www.thaicreate.com/android/img2_full.jpg'),
(3, 'Image 3', 'https://www.thaicreate.com/android/img3_thum.jpg', 'https://www.thaicreate.com/android/img3_full.jpg'),
(4, 'Image 4', 'https://www.thaicreate.com/android/img4_thum.jpg', 'https://www.thaicreate.com/android/img4_full.jpg'),
(5, 'Image 5', 'https://www.thaicreate.com/android/img5_thum.jpg', 'https://www.thaicreate.com/android/img5_full.jpg'),
(6, 'Image 6', 'https://www.thaicreate.com/android/img6_thum.jpg', 'https://www.thaicreate.com/android/img6_full.jpg');
โครงสร้างของ MySQL Database ที่อยู่บน Web Server
getJSON.php
<?php
$objConnect = mysql_connect("localhost","root","root");
$objDB = mysql_select_db("mydatabase");
$strSQL = "SELECT * FROM images WHERE 1 ";
$objQuery = mysql_query($strSQL);
$intNumField = mysql_num_fields($objQuery);
$resultArray = array();
while($obResult = mysql_fetch_array($objQuery))
{
$arrCol = array();
for($i=0;$i<$intNumField;$i++)
{
$arrCol[mysql_field_name($objQuery,$i)] = $obResult[$i];
}
array_push($resultArray,$arrCol);
}
mysql_close($objConnect);
echo json_encode($resultArray);
?>
ไฟล์ php ในฝั่ง Server ที่จะส่งข้อมูลให้กับ Android
Android HttpGet and HttpPost
พื้นฐานให้อ่านบทความ HttpGet กับ HttpPost จะได้เข้าใจง่ายขึ้น
Android Project
โครงสร้างของไฟล์ประกอบด้วย 3 ไฟล์คือ MainActivity.java, activity_main.xml และ activity_column.xml
activity_main.xml
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tableLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TableRow
android:id="@+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="ListView and ProgressBar : "
android:layout_span="1"
android:textAppearance="?android:attr/textAppearanceMedium" />
</TableRow>
<View
android:layout_height="1dip"
android:background="#CCCCCC" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.1">
<ListView
android:id="@+id/listView1"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</ListView>
</LinearLayout>
<View
android:layout_height="1dip"
android:background="#CCCCCC" />
<LinearLayout
android:id="@+id/LinearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dip" >
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="By.. ThaiCreate.Com" />
</LinearLayout>
</TableLayout>
activity_column.xml
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tableLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="@+id/ColImgPath"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<TextView
android:id="@+id/ColImgID"
android:text="Column 1" />
<TextView
android:id="@+id/ColImgName"
android:text="Column 2" />
</TableRow>
<ProgressBar
android:id="@+id/progressBar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</TableLayout>
MainActivity.java
package com.myapp;
import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.BufferedReader;
import java.io.ByteArrayOutputStream;
import java.io.Closeable;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.io.OutputStream;
import java.net.URL;
import java.net.URLConnection;
import java.util.ArrayList;
import java.util.HashMap;
import org.apache.http.HttpEntity;
import org.apache.http.HttpResponse;
import org.apache.http.StatusLine;
import org.apache.http.client.ClientProtocolException;
import org.apache.http.client.HttpClient;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.impl.client.DefaultHttpClient;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.AsyncTask;
import android.os.Bundle;
import android.os.Handler;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.ProgressBar;
import android.widget.TextView;
public class MainActivity extends Activity {
private ListView lstView;
private ImageAdapter imageAdapter;
private Handler handler = new Handler();;
ArrayList<HashMap<String, Object>> MyArrList = new ArrayList<HashMap<String, Object>>();
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// ProgressBar
requestWindowFeature(Window.FEATURE_INDETERMINATE_PROGRESS);
setContentView(R.layout.activity_main);
// ListView and imageAdapter
lstView = (ListView) findViewById(R.id.listView1);
lstView.setClipToPadding(false);
imageAdapter = new ImageAdapter(getApplicationContext());
lstView.setAdapter(imageAdapter);
// OnClick
lstView.setOnItemClickListener(new OnItemClickListener() {
public void onItemClick(AdapterView<?> parent, View v,
int position, long id) {
startDownload(position);
}
});
new LoadContentFromServer().execute();
}
//Download
public void startDownload(final int position) {
Runnable runnable = new Runnable() {
int Status = 0;
public void run() {
String urlDownload = MyArrList.get(position).get("ImagePathFull").toString();
int count = 0;
try {
URL url = new URL(urlDownload);
URLConnection conexion = url.openConnection();
conexion.connect();
int lenghtOfFile = conexion.getContentLength();
Log.d("ANDRO_ASYNC", "Lenght of file: " + lenghtOfFile);
InputStream input = new BufferedInputStream(url.openStream());
// Get File Name from URL
String fileName = urlDownload.substring(urlDownload.lastIndexOf('/')+1, urlDownload.length() );
OutputStream output = new FileOutputStream("/mnt/sdcard/mydata/"+fileName);
byte data[] = new byte[1024];
long total = 0;
while ((count = input.read(data)) != -1) {
total += count;
Status = (int)((total*100)/lenghtOfFile);
output.write(data, 0, count);
// Update ProgressBar
handler.post(new Runnable() {
public void run() {
updateStatus(position,Status);
}
});
}
output.flush();
output.close();
input.close();
} catch (Exception e) {}
}
};
new Thread(runnable).start();
}
private void updateStatus(int index,int Status){
View v = lstView.getChildAt(index - lstView.getFirstVisiblePosition());
// Update ProgressBar
ProgressBar progress = (ProgressBar)v.findViewById(R.id.progressBar);
progress.setProgress(Status);
}
class LoadContentFromServer extends AsyncTask<Object, Integer, Object> {
protected void onPreExecute() {
super.onPreExecute();
setProgressBarIndeterminateVisibility(true);
}
@Override
protected Object doInBackground(Object... params) {
/** JSON from URL
* [
* {"ImageID":"1","ImageName":"Image 1","ImagePath_Thumbnail":"https://www.thaicreate.com/android/img1_thum.jpg" ,"ImagePath_FullPhoto":"https://www.thaicreate.com/android/img1_full.jpg"},
* {"ImageID":"2","ImageName":"Image 2","ImagePath_Thumbnail":"https://www.thaicreate.com/android/img2_thum.jpg" ,"ImagePath_FullPhoto":"https://www.thaicreate.com/android/img2_full.jpg"},
* {"ImageID":"3","ImageName":"Image 3","ImagePath_Thumbnail":"https://www.thaicreate.com/android/img3_thum.jpg" ,"ImagePath_FullPhoto":"https://www.thaicreate.com/android/img3_full.jpg"},
* {"ImageID":"4","ImageName":"Image 4","ImagePath_Thumbnail":"https://www.thaicreate.com/android/img4_thum.jpg" ,"ImagePath_FullPhoto":"https://www.thaicreate.com/android/img4_full.jpg"},
* {"ImageID":"5","ImageName":"Image 5","ImagePath_Thumbnail":"https://www.thaicreate.com/android/img5_thum.jpg" ,"ImagePath_FullPhoto":"https://www.thaicreate.com/android/img5_full.jpg"},
* {"ImageID":"6","ImageName":"Image 6","ImagePath_Thumbnail":"https://www.thaicreate.com/android/img6_thum.jpg" ,"ImagePath_FullPhoto":"https://www.thaicreate.com/android/img6_full.jpg"}
* ]
*/
String url = "https://www.thaicreate.com/android/getJSON.php";
JSONArray data;
try {
data = new JSONArray(getJSONUrl(url));
MyArrList = new ArrayList<HashMap<String, Object>>();
HashMap<String, Object> map;
for(int i = 0; i < data.length(); i++){
JSONObject c = data.getJSONObject(i);
map = new HashMap<String, Object>();
map.put("ImageID", (String)c.getString("ImageID"));
map.put("ImageName", (String)c.getString("ImageName"));
// Thumbnail Get ImageBitmap To Object
map.put("ImagePathThum", (String)c.getString("ImagePath_Thumbnail"));
map.put("ImageThumBitmap", (Bitmap)loadBitmap(c.getString("ImagePath_Thumbnail")));
// Full (for View Popup)
map.put("ImagePathFull", (String)c.getString("ImagePath_FullPhoto"));
MyArrList.add(map);
publishProgress(i);
}
} catch (JSONException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return null;
}
@Override
public void onProgressUpdate(Integer... progress) {
imageAdapter.notifyDataSetChanged();
}
@Override
protected void onPostExecute(Object result) {
setProgressBarIndeterminateVisibility(false);
}
}
class ImageAdapter extends BaseAdapter {
private Context mContext;
public ImageAdapter(Context context) {
mContext = context;
}
public int getCount() {
return MyArrList.size();
}
public Object getItem(int position) {
return MyArrList.get(position);
}
public long getItemId(int position) {
return position;
}
public View getView(final int position, View convertView, ViewGroup parent) {
// TODO Auto-generated method stub
LayoutInflater inflater = (LayoutInflater) mContext
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
if (convertView == null) {
convertView = inflater.inflate(R.layout.activity_column, null);
}
// ColImage
ImageView imageView = (ImageView) convertView.findViewById(R.id.ColImgPath);
imageView.getLayoutParams().height = 80;
imageView.getLayoutParams().width = 80;
imageView.setPadding(10, 10, 10, 10);
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
try
{
imageView.setImageBitmap((Bitmap)MyArrList.get(position).get("ImageThumBitmap"));
} catch (Exception e) {
// When Error
imageView.setImageResource(android.R.drawable.ic_menu_report_image);
}
// ColImgID
TextView txtImgID = (TextView) convertView.findViewById(R.id.ColImgID);
txtImgID.setPadding(10, 0, 0, 0);
txtImgID.setText("ID : " + MyArrList.get(position).get("ImageID").toString());
// ColImgName
TextView txtPicName = (TextView) convertView.findViewById(R.id.ColImgName);
txtPicName.setPadding(10, 0, 0, 0);
txtPicName.setText("Name : " + MyArrList.get(position).get("ImageName").toString());
// progressBar
ProgressBar progress = (ProgressBar) convertView.findViewById(R.id.progressBar);
progress.setPadding(10, 0, 10, 0);
return convertView;
}
}
/***** Get Image Resource from URL (Start) *****/
private static final String TAG = "Image";
private static final int IO_BUFFER_SIZE = 4 * 1024;
public static Bitmap loadBitmap(String url) {
Bitmap bitmap = null;
InputStream in = null;
BufferedOutputStream out = null;
try {
in = new BufferedInputStream(new URL(url).openStream(), IO_BUFFER_SIZE);
final ByteArrayOutputStream dataStream = new ByteArrayOutputStream();
out = new BufferedOutputStream(dataStream, IO_BUFFER_SIZE);
copy(in, out);
out.flush();
final byte[] data = dataStream.toByteArray();
BitmapFactory.Options options = new BitmapFactory.Options();
//options.inSampleSize = 1;
bitmap = BitmapFactory.decodeByteArray(data, 0, data.length,options);
} catch (IOException e) {
Log.e(TAG, "Could not load Bitmap from: " + url);
} finally {
closeStream(in);
closeStream(out);
}
return bitmap;
}
private static void closeStream(Closeable stream) {
if (stream != null) {
try {
stream.close();
} catch (IOException e) {
android.util.Log.e(TAG, "Could not close stream", e);
}
}
}
private static void copy(InputStream in, OutputStream out) throws IOException {
byte[] b = new byte[IO_BUFFER_SIZE];
int read;
while ((read = in.read(b)) != -1) {
out.write(b, 0, read);
}
}
/***** Get Image Resource from URL (End) *****/
/*** Get JSON Code from URL ***/
public String getJSONUrl(String url) {
StringBuilder str = new StringBuilder();
HttpClient client = new DefaultHttpClient();
HttpGet httpGet = new HttpGet(url);
try {
HttpResponse response = client.execute(httpGet);
StatusLine statusLine = response.getStatusLine();
int statusCode = statusLine.getStatusCode();
if (statusCode == 200) { // Download OK
HttpEntity entity = response.getEntity();
InputStream content = entity.getContent();
BufferedReader reader = new BufferedReader(new InputStreamReader(content));
String line;
while ((line = reader.readLine()) != null) {
str.append(line);
}
} else {
Log.e("Log", "Failed to download file..");
}
} catch (ClientProtocolException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
return str.toString();
}
}
Screenshot
กำลังโหลดข้อมูล
แสดงข้อมูลทีล่ะ Items โดย Items ไหนที่ดาวนโหลด Thumbnail เรียบร้อยแล้วก็จะแสดงผลทางหน้าจอ
เมื่อดาวน์โหลดครบทุกรายการแล้ว ProgressBar ก็จะหยุดการทำงานและแสดงผลข้อมูลทั้งหมด
คลิกที่ Item เพื่อดาวน์โหลด
กำลังดาวน์โหลดใน Item ที่เลือก
สามารถดาวน์โหลดได้หลาย ๆ รายการพร้อมกับ พร้อมกับแสดง ProgressBar สถานะความคืบหน้าจองการดาวน์โหลด
ข้อมูลที่ดาวน์โหลดถูกจัดเก็บไว้ใน SD Card
AsyncTask and ProgressDialog (showDialog, dismissDialog, removeDialog : Deprecated)
|