Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone



Clound SSD Virtual Server

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 ต่าง ๆ ที่กำลังดาวน์โหลด

Android Multiple Download file in ListView and Show Progress unit percentage


รูปอธิบายการทำงานและการดาวน์โหลดครั้งล่ะหลาย ๆ Item ของ ListView และการแสดง Progress สถานะเปอร์เซ็นต์ที่ทำงานอยู่

Android Thread and Handler

Android AsyncTask and ProgressBar

แนะนำให้อ่าน 2 บทความนี้เพื่อความเข้าใจมากขึ้น


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

ในการเขียน Android เพื่อติดต่อกับ Internet จะต้องกำหนด Permission ในส่วนนี้ด้วยทุกครั้ง

Android Multiple Download file in ListView and Show Progress unit percentage

ไฟล์รุปภาพที่อยู่บน 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

Android Multiple Download file in ListView and Show Progress unit percentage

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>


Android Multiple Download file in ListView and Show Progress unit percentage

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

Android Multiple Download file in ListView and Show Progress unit percentage

กำลังแสดงข้อมูลและโหลดภาพ Thumbnail จาก Server

Android Multiple Download file in ListView and Show Progress unit percentage

หลังจากโหลดข้อมูลและ Thumbnail เรียบร้อยแล้วให้ทดสอบการดาวน์โหลด Full Image

Android Multiple Download file in ListView and Show Progress unit percentage

คลิกดาวน์โหลด จะเห็นว่าใน ListView ของ Items นั้น ๆ จะแสดง ProgressBar และจำนวนเปอร์เซ็นต์ที่กำลัง Download

Android Multiple Download file in ListView and Show Progress unit percentage

หลังจากที่ Download เรียบร้อยแล้วปุ่ม View Image จะถุก Enabled

Android Multiple Download file in ListView and Show Progress unit percentage

สามารถคลิกดาวน์โหลดได้หลาย ๆ รายการพร้อม ๆ กับ และแต่ล่ะ Items ก็จะแยก Process การทำงานกัน

Android Multiple Download file in ListView and Show Progress unit percentage

ไฟล์ที่เป็น Full Images จะถูก Save ลงใน SD Card

Android Multiple Download file in ListView and Show Progress unit percentage

สามารถคลิกที่ View Image เพื่อดูเรียกภาพที่อยุ่ใน SD Card ออกมาแสดงบน Dialog

Android Multiple Download file in ListView and Show Progress unit percentage

แสดง 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');


Android Multiple Download file in ListView and Show Progress unit percentage

โครงสร้างของ 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

Android Multiple Download file in ListView and Show Progress unit percentage

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>


Android Multiple Download file in ListView and Show Progress unit percentage

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

Android Multiple Download file in ListView and Show Progress unit percentage

กำลังโหลดข้อมูล

Android Multiple Download file in ListView and Show Progress unit percentage

แสดงข้อมูลทีล่ะ Items โดย Items ไหนที่ดาวนโหลด Thumbnail เรียบร้อยแล้วก็จะแสดงผลทางหน้าจอ

Android Multiple Download file in ListView and Show Progress unit percentage

เมื่อดาวน์โหลดครบทุกรายการแล้ว ProgressBar ก็จะหยุดการทำงานและแสดงผลข้อมูลทั้งหมด

Android Multiple Download file in ListView and Show Progress unit percentage

คลิกที่ Item เพื่อดาวน์โหลด

Android Multiple Download file in ListView and Show Progress unit percentage

กำลังดาวน์โหลดใน Item ที่เลือก

Android Multiple Download file in ListView and Show Progress unit percentage

สามารถดาวน์โหลดได้หลาย ๆ รายการพร้อมกับ พร้อมกับแสดง ProgressBar สถานะความคืบหน้าจองการดาวน์โหลด

Android Multiple Download file in ListView and Show Progress unit percentage

ข้อมูลที่ดาวน์โหลดถูกจัดเก็บไว้ใน SD Card



AsyncTask and ProgressDialog (showDialog, dismissDialog, removeDialog : Deprecated)


   
Share


ช่วยกันสนับสนุนรักษาเว็บไซต์ความรู้แห่งนี้ไว้ด้วยการสนับสนุน Source Code 2.0 ของทีมงานไทยครีเอท


ลองใช้ค้นหาข้อมูล


   


Bookmark.   
       
  By : ThaiCreate.Com Team (บทความเป็นลิขสิทธิ์ของเว็บไทยครีเอทห้ามนำเผยแพร่ ณ เว็บไซต์อื่น ๆ)
  Score Rating :  
  Create/Update Date : 2012-08-11 12:32:21 / 2017-03-26 22:43:32
  Download : No files
 Sponsored Links / Related

 
Android and Custom ProgressBar
Rating :

 
Android ListView แบบ Custom Layout แสดงข้อมูล ListView หลายคอลัมบ์ Multiple Column
Rating :

 
Android ListView and ImageView Image / Text in ListView Custom Layout Column
Rating :

 
Android แสดงรูปภาพ ImageView จาก Web URL ของเว็บไซต์ บน ListView
Rating :

 
Android ListView Padding and Pagination
Rating :

 
Android กับ ListView แสดงข้อมูลจาก Database ของ SQLite
Rating :

 
Android ListView and Checkbox
Rating :

 
Android ListView and Buttons inside Create Custom Command in ListView
Rating :

 
Android Populate ListView ImageView get Image Resource from SD Card
Rating :

 
Android EditText or Textbox in ListView
Rating :

 
Android Gesture on ListView Detecting Sliding Items (Flip and Swipe)
Rating :

 
Android and Web Server ของ PHP กับ MySQL แสดงบน ListView ในรูปแบบของ JSON
Rating :

 
Android JSON Retrieving Data from URL Web Server (PHP MySQL and JSON)
Rating :

 
Android Loading JSON and ProgressBar/ProgressDialog
Rating :

 
Android Indeterminate Progress Bar (FEATURE_INDETERMINATE_PROGRESS)
Rating :

 
Android ProgressDialog When Click Item in ListView for Download file from Server
Rating :

 
Android AsyncTask and ProgressBar
Rating :

 
Android Multiple Upload Send file to Server and Show Items ProgressBar in ListView
Rating :

 
Android ProgressBar/ProgressDialog Search Display result Data from Web Server
Rating :

 
Android SeekBar Control MediaPlayer Progress
Rating :

 
Android AsyncTask update ListView notifyDataSetChanged when Items Load finish
Rating :

 
Android (ListView/GridView) get Result from Web Server and Paging Pagination
Rating :

 
Android Performance of Listview
Rating :

 
AsyncTask and ProgressDialog (showDialog, dismissDialog, removeDialog : Deprecated)
Rating :


ThaiCreate.Com Forum


Comunity Forum Free Web Script
Jobs Freelance Free Uploads
Free Web Hosting Free Tools

สอน PHP ผ่าน Youtube ฟรี
สอน Android การเขียนโปรแกรม Android
สอน Windows Phone การเขียนโปรแกรม Windows Phone 7 และ 8
สอน iOS การเขียนโปรแกรม iPhone, iPad
สอน Java การเขียนโปรแกรม ภาษา Java
สอน Java GUI การเขียนโปรแกรม ภาษา Java GUI
สอน JSP การเขียนโปรแกรม ภาษา Java
สอน jQuery การเขียนโปรแกรม ภาษา jQuery
สอน .Net การเขียนโปรแกรม ภาษา .Net
Free Tutorial
สอน Google Maps Api
สอน Windows Service
สอน Entity Framework
สอน Android
สอน Java เขียน Java
Java GUI Swing
สอน JSP (Web App)
iOS (iPhone,iPad)
Windows Phone
Windows Azure
Windows Store
Laravel Framework
Yii PHP Framework
สอน jQuery
สอน jQuery กับ Ajax
สอน PHP OOP (Vdo)
Ajax Tutorials
SQL Tutorials
สอน SQL (Part 2)
JavaScript Tutorial
Javascript Tips
VBScript Tutorial
VBScript Validation
Microsoft Access
MySQL Tutorials
-- Stored Procedure
MariaDB Database
SQL Server Tutorial
SQL Server 2005
SQL Server 2008
SQL Server 2012
-- Stored Procedure
Oracle Database
-- Stored Procedure
SVN (Subversion)
แนวทางการทำ SEO
ปรับแต่งเว็บให้โหลดเร็ว


Hit Link
   







Load balance : Server 01
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่