Android ProgressDialog When Click Item in ListView for Download file from Server |
Android ProgressDialog When Click Item in ListView for Download file from Server บทความ Advanced การเขียน Android เพื่อแสดงข้อมูลรายการของไฟล์บน ListView และคลิกที่ Items ของ ListView เพื่อที่จะดาวน์โหลดไฟล์นั้น ๆ และเมื่อดาวน์โหลดไฟล์ในรายการของ ListView เสร้จแล้ว จะเปลี่ยนสถานะข้อความใน ListView ของ Items นั้น ว่า Download เรียบร้อย และสามารถคลิกที่ Item เพื่อเปิดดูรายการ Items นั้น ๆ โดยไฟล์ที่ได้จะถูกจัดเก็บลงใน SD Card และการเปิดไฟล์ที่ดาวน์โหลดจะเป็นการเรียกจา SD Card มาแสดงในหน้าจอ และในช่วงของการดาวน์โหลดแต่ล่ะไฟล์จะใช้ ProgressDialog แสดงสถานะและเปอร์เซ็ตความคืบหน้าของการดาวน์โหลด
รูปภาพอธบิายการทำงาน ซึ่งจะแสดงรายการบน ListView และการคลิกที่ Items เพื่อดาวน์โหลดไฟล์แต่ล่ะรายการ
AndroidManifest.xml
<uses-permission android:name="android.permission.INTERNET" />
ในการเขียน Android เพื่อติดต่อกับ Internet จะต้องกำหนด Permission ในส่วนนี้ด้วยทุกครั้ง
Web Server
images
CREATE TABLE IF NOT EXISTS `images` (
`ImageID` int(11) NOT NULL auto_increment,
`ImageName` varchar(50) NOT NULL,
`ImagePath` varchar(150) NOT NULL,
PRIMARY KEY (`ImageID`)
) ENGINE=MyISAM DEFAULT CHARSET=tis620 AUTO_INCREMENT=7 ;
--
-- Dumping data for table `images`
--
INSERT INTO `images` (`ImageID`, `ImageName`, `ImagePath`) VALUES
(1, 'Image 1', 'https://www.thaicreate.com/android/img1.jpg'),
(2, 'Image 2', 'https://www.thaicreate.com/android/img2.jpg'),
(3, 'Image 3', 'https://www.thaicreate.com/android/img3.jpg'),
(4, 'Image 4', 'https://www.thaicreate.com/android/img4.jpg'),
(5, 'Image 5', 'https://www.thaicreate.com/android/img5.jpg'),
(6, 'Image 6', 'https://www.thaicreate.com/android/img6.jpg');
โครงสร้างของ MySQL Database ที่จัดเก็บ URL ของรูปภาพ ที่จะแสดงบน ListView
ไฟล์รูปภาพที่อยู่บน Web Server
getData.php
<?
$objConnect = mysql_connect("localhost","root","root");
$objDB = mysql_select_db("mydatabase");
$strSQL = "SELECT * FROM images WHERE 1 ORDER BY ImageID ";
$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
โครงสร้างของไฟล์ประกอบด้วย 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="Download file from Server : "
android:layout_span="1"
android:textAppearance="?android:attr/textAppearanceLarge" />
</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
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
android:id="@+id/ColImageID"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:text="ImageID"/>
<TextView
android:id="@+id/ColImageName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="ImageName"/>
<TextView
android:id="@+id/ColStatus"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Status" />
</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.BufferedReader;
import java.io.File;
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.os.AsyncTask;
import android.os.Bundle;
import android.os.StrictMode;
import android.annotation.SuppressLint;
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.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.Menu;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;
public class MainActivity extends Activity {
private String SDCardPath = "/mnt/sdcard/mypicture/";
public static final int DIALOG_DOWNLOAD_PROGRESS = 0;
private ProgressDialog mProgressDialog;
ArrayList<HashMap<String, String>> MyArrList;
@SuppressLint("NewApi")
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Permission StrictMode
if (android.os.Build.VERSION.SDK_INT > 9) {
StrictMode.ThreadPolicy policy = new StrictMode.ThreadPolicy.Builder().permitAll().build();
StrictMode.setThreadPolicy(policy);
}
/** JSON return
* [
* {"ImageID":"1","ImageName":"Image 1","ImagePath":"https://www.thaicreate.com/android/img1.jpg"},
* {"ImageID":"2","ImageName":"Image 2","ImagePath":"https://www.thaicreate.com/android/img2.jpg"},
* {"ImageID":"3","ImageName":"Image 3","ImagePath":"https://www.thaicreate.com/android/img3.jpg"},
* {"ImageID":"4","ImageName":"Image 4","ImagePath":"https://www.thaicreate.com/android/img4.jpg"},
* {"ImageID":"5","ImageName":"Image 5","ImagePath":"https://www.thaicreate.com/android/img5.jpg"},
* {"ImageID":"6","ImageName":"Image 6","ImagePath":"https://www.thaicreate.com/android/img6.jpg"}
* ]
*/
String url = "https://www.thaicreate.com/android/getData.php";
try {
JSONArray data = new JSONArray(getJSONUrl(url));
MyArrList = new ArrayList<HashMap<String, String>>();
HashMap<String, String> map;
for(int i = 0; i < data.length(); i++){
JSONObject c = data.getJSONObject(i);
map = new HashMap<String, String>();
map.put("ImageID", c.getString("ImageID"));
map.put("ImageName", c.getString("ImageName"));
map.put("ImagePath", c.getString("ImagePath"));
MyArrList.add(map);
ShowDataListView();
}
} catch (JSONException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
// Show Data from JSON to ListView
public void ShowDataListView()
{
// listView1
final ListView lisView1 = (ListView)findViewById(R.id.listView1);
lisView1.setAdapter(new ImageAdapter(this));
// OnClick View and Download Image
lisView1.setOnItemClickListener(new OnItemClickListener() {
public void onItemClick(AdapterView<?> parent, View v,
int position, long id) {
//*** Check file exists in SDCard ***/
String ImageServerPath = MyArrList.get(position).get("ImagePath");
String fileName = ImageServerPath.substring(ImageServerPath.lastIndexOf('/')+1, ImageServerPath.length() );
String strPath = SDCardPath + fileName; // file in sdcard Eg : /mnt/sdcard/mypicture/img1.jpg
File file = new File(strPath);
String ImageName = MyArrList.get(position).get("ImageName");
/*** if file exists (View for Download) ***/
if(file.exists())
{
ViewImageSDCard(strPath,ImageName);
}
else
{
// if file not exists --> download first
DownloadToSDCard(ImageServerPath,ImageName);
}
}
});
}
// View Image from SD Card
public void ViewImageSDCard(String strPath,String strName)
{
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);
Bitmap bm = BitmapFactory.decodeFile(strPath); // Path from SDCard
image.setScaleType(ImageView.ScaleType.CENTER_CROP);
image.setImageBitmap(bm);
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();
}
// Image Adapter to ListView
public class ImageAdapter extends BaseAdapter
{
private Context context;
public ImageAdapter(Context c)
{
// TODO Auto-generated method stub
context = c;
}
public int getCount() {
// TODO Auto-generated method stub
return MyArrList.size();
}
public Object getItem(int position) {
// TODO Auto-generated method stub
return position;
}
public long getItemId(int position) {
// TODO Auto-generated method stub
return position;
}
public View getView(int position, View convertView, ViewGroup parent) {
// TODO Auto-generated method stub
LayoutInflater inflater = (LayoutInflater) context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
if (convertView == null) {
convertView = inflater.inflate(R.layout.activity_column, null);
}
// ColImageID
TextView txtImageID = (TextView) convertView.findViewById(R.id.ColImageID);
txtImageID.setPadding(10, 0, 0, 0);
txtImageID.setText("ID : " + MyArrList.get(position).get("ImageID"));
// ColImageName
TextView txtImageName = (TextView) convertView.findViewById(R.id.ColImageName);
txtImageName.setPadding(20, 0, 0, 0);
txtImageName.setText(MyArrList.get(position).get("ImageName"));
// txtStatus
TextView txtStatus = (TextView) convertView.findViewById(R.id.ColStatus);
txtStatus.setPadding(5, 0, 0, 0);
// ImagePath
String ImagePath = MyArrList.get(position).get("ImagePath");
String fileName = ImagePath.substring(ImagePath.lastIndexOf('/')+1,ImagePath.length() );
String path = SDCardPath + fileName; // file in sdcard Eg : /mnt/sdcard/mypicture/img1.jpg
File file = new File(path);
/*** if file exists (RED/GREEN) ***/
if(file.exists())
{
txtStatus.setText("Download finish.");
txtStatus.setTextColor(Color.GREEN);
}
else
{
txtStatus.setText("No download.");
txtStatus.setTextColor(Color.RED);
}
return convertView;
}
}
// Get all data using JSON
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();
}
/*** Download file from URL to SD Card (Start)***/
public void DownloadToSDCard(String ImageServerPath,String ImageName)
{
new DownloadFileAsync().execute(ImageServerPath,ImageName);
}
@Override
protected Dialog onCreateDialog(int id) {
switch (id) {
case DIALOG_DOWNLOAD_PROGRESS:
mProgressDialog = new ProgressDialog(this);
mProgressDialog.setMessage("Downloading file..");
mProgressDialog.setProgressStyle(ProgressDialog.STYLE_HORIZONTAL);
mProgressDialog.setCancelable(false);
mProgressDialog.show();
return mProgressDialog;
default:
return null;
}
}
class DownloadFileAsync extends AsyncTask<String, String, String> {
String sSDPath = "";
String sName = "";
protected void onPreExecute() {
super.onPreExecute();
showDialog(DIALOG_DOWNLOAD_PROGRESS);
}
protected String doInBackground(String... aurl) {
int count;
try {
String ImageServerPath = aurl[0];
sName = aurl[1];
URL url = new URL(aurl[0]);
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 = ImageServerPath.substring(ImageServerPath.lastIndexOf('/')+1, ImageServerPath.length() );
sSDPath = SDCardPath + fileName;
OutputStream output = new FileOutputStream(sSDPath);
byte data[] = new byte[1024];
long total = 0;
while ((count = input.read(data)) != -1) {
total += count;
publishProgress(""+(int)((total*100)/lenghtOfFile));
output.write(data, 0, count);
}
output.flush();
output.close();
input.close();
} catch (Exception e) {}
return null;
}
protected void onProgressUpdate(String... progress) {
Log.d("ANDRO_ASYNC",progress[0]);
mProgressDialog.setProgress(Integer.parseInt(progress[0]));
}
protected void onPostExecute(String unused) {
// When Finish Reload ListView and Show Image Popup
ViewImageSDCard(sSDPath,sName); // Update ListView
ShowDataListView(); // Show Image Popu
dismissDialog(DIALOG_DOWNLOAD_PROGRESS);
removeDialog(DIALOG_DOWNLOAD_PROGRESS);
}
}
/*** Download file from URL to SD Card (End)***/
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}
}
Screenshot
แสดงรายการข้อมลจาก Web Server บน ListView
คลิกที่ Item เพื่อดาวน์โหลดรายการ
หลังจากดาวน์โหลด Item นั้น ๆ เรียบร้อยแล้ว จะเปิด Dialog เพื่อแสดงภาพนั้นอัตโนมัติ
ใน ListView จะเปลี่ยนสถานะว่าดาวน์โหลดเรียบร้อย
ทดสอบการดาวน์โหลดรายการอื่น ๆ ใน Item
หลังจากดาวน์โหลดแล้ว เมื่อคลิก Item นั้น ๆ จะเป็นการเปิด Dialog เพื่อแสดงข้อมูล
เปิด Dialog เพื่อแสดงผลข้อมูล
โดยไฟล์ที่ได้จะถุกจัดเก็บไว้ใน SD Card
สำหรับตัวอย่างนี้จะเป็นการดาวน์โหลดทีล่ะ Item ของ ListView แต่ถ้าหากต้องการให้สามารถดาวน์โหลดได้หลาย ๆ รายการใน item ของ ListView และแสดง Progress ของการดาวน์โหลดด้วย สามารถอ่านได้ที่บทความนี้
Android Multiple Download file in ListView and Show Progress unit percentage
AsyncTask and ProgressDialog (showDialog, dismissDialog, removeDialog : Deprecated)
|
ช่วยกันสนับสนุนรักษาเว็บไซต์ความรู้แห่งนี้ไว้ด้วยการสนับสนุน 
Load balance : Server 01
