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 and Custom ProgressBar

Android and Custom ProgressBar ในการสร้าง Custom ProgressBar บน Android ใน Version 4.x ตัว ProgressBar ที่เป็นแบบ Horizontal (แนวนอนแถบแสดงสถานะการทำงาน) จะมีหน้าตาไม่ค่อยส่วนนัก โดยค่า Default เป็นเพียงแค่แถบสนน้ำเงิน ๆ เล็ก ๆ แสดงในขณะทำงานเท่านั้น แต่ถ้าจะทำ Custom ProgressBar แบบ Horizontal และ ProgressDialog ก็สามารถทำได้ไม่ยาก ลองมาดูตัวอย่าง

Android and Custom ProgressBar


Step การทำ Custom ProgressBar

หลัก ๆ แล้วสร้าง Style ขึ้นมาแค่ชุดเดียว โดยในตัวอย่างนี้ชื่อว่า custom_progress.xml จัดเก็บไว้ที่

/res/drawable/custom_progress.xml
<?xml version="1.0" encoding="UTF-8"?>
<layer-list
	xmlns:android="http://schemas.android.com/apk/res/android">
	<item
		android:id="@android:id/background">
		<shape>
			<corners
				android:radius="5dip" />
			<gradient
				android:startColor="#ffffffff"
				android:centerColor="#ffdddddd"
				android:centerY="0.50"
				android:endColor="#ffffffff"
				android:angle="270" />
		</shape>
	</item>
	<item
		android:id="@android:id/secondaryProgress">
		<clip>
			<shape>
				<corners
					android:radius="5dip" />
				<gradient
					android:startColor="#770e75af"
					android:endColor="#771997e1"
					android:angle="90" />
			</shape>
		</clip>
	</item>
	<item
		android:id="@android:id/progress">
		<clip>
			<shape>
				<corners
					android:radius="5dip" />
				<gradient
					android:startColor="#ff0e75af"
					android:endColor="#ff1997e1"
					android:angle="90" />
			</shape>
		</clip>
	</item>
</layer-list>


Android and Custom ProgressBar

โครงสร้างของไฟล์ทั้งหมด จัดเก็บตาม Path และ Directory ดังภาพ


Example 1 ทดสอบกับ ProgressBar แบบ Horizontal แบบง่าย ๆ

Android and Custom ProgressBar

activity_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" >
 
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical|center_horizontal|center"
        android:text="Do Work!" />

    <ProgressBar
        android:id="@+id/progressBar1"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:progressDrawable="@drawable/custom_progress" />
 
</LinearLayout>

ใน Widgets ของ ProgressBar จะมีการเรียกใช้ android:progressDrawable="@drawable/custom_progress"








MainActivity.java
package com.myapp;

import android.os.Bundle;
import android.os.Handler;
import android.app.Activity;
import android.view.View;
import android.widget.Button;
import android.widget.ProgressBar;

public class MainActivity extends Activity {
	 
		Button btnDoWork;
		ProgressBar progressBar;
		private int progressBarStatus = 0;
		private Handler progressBarHandler = new Handler();
	 
 
		@Override
		public void onCreate(Bundle savedInstanceState) {
			super.onCreate(savedInstanceState);
			setContentView(R.layout.activity_main);
			
			progressBar = (ProgressBar) findViewById(R.id.progressBar1);
			
			progressBar.setVisibility(View.INVISIBLE);  // Hide ProgressBar
			
			// button1 Do Work
			btnDoWork = (Button) findViewById(R.id.button1);
			btnDoWork.setOnClickListener(new View.OnClickListener() {
		            public void onClick(View v) { // Start Event onClick
		
		            	progressBar.setVisibility(View.VISIBLE);
						progressBar.setProgress(0);
						progressBar.setMax(100);
						progressBar.setProgressDrawable(v.getResources().getDrawable(
				                R.drawable.custom_progress));
			 

						progressBarStatus = 0;
			 
								new Thread(new Runnable() {
								  public void run() {
									while (progressBarStatus < 100) {
					 
									  // process some tasks
									  progressBarStatus = DoWork();
					 
										try {
											Thread.sleep(300);
										} catch (InterruptedException e) {
											e.printStackTrace();
										}
						 
									  // Update the progress bar
									  progressBarHandler.post(new Runnable() {
										public void run() {
										  progressBar.setProgress(progressBarStatus);
										}
									  });
									}
							
						  }
					   }).start();
									
					
		            } // End Event onClick
		            
		        });
	 
		}
	 

	 
		// DoWork & Set Status Progress Bar
		public int DoWork() {
			
			// Do some work EG: Save , Download , Insert , ..
			// **** Work
			// **** Work
			// **** Work
			// **** Work
			progressBarStatus++; // Work process and return status
			
			if( progressBarStatus < 100)
			{
				return progressBarStatus;
			}
			
			// When Finish
			try {
				Thread.sleep(1000);
			} catch (InterruptedException e) {
				e.printStackTrace();
			}

			return 100;
	 
		}
	 
	}



Screenshot

Android and Custom ProgressBar

ค่าเริ่มต้น ProgressBar จะยังไม่แสดง และเมื่อคลิกที่ปุ่ม Do Work! จะเริ่มการทำงานของ ProgressBar

Android and Custom ProgressBar

ProgressBar กำลังทำงาน




Example 2 ทดสอบการ ProgressBar แบบ Dialog (ProgressDialog)

Android and Custom ProgressBar

activity_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" >
 
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical|center_horizontal|center"
        android:text="Do Work!" />

 
</LinearLayout>


MainActivity.java
package com.myapp;

import android.os.Bundle;
import android.os.Handler;
import android.app.Activity;
import android.app.ProgressDialog;
import android.view.View;
import android.widget.Button;

public class MainActivity extends Activity {
	 
		Button btnDoWork;
		ProgressDialog progressBar;
		private int progressBarStatus = 0;
		private Handler progressBarHandler = new Handler();
	 
 
		@Override
		public void onCreate(Bundle savedInstanceState) {
			super.onCreate(savedInstanceState);
			setContentView(R.layout.activity_main);
			
			// button1 Do Work
			btnDoWork = (Button) findViewById(R.id.button1);
			btnDoWork.setOnClickListener(new View.OnClickListener() {
		            public void onClick(View v) { // Start Event onClick
		
		    			progressBar = new ProgressDialog(v.getContext());
						progressBar.setCancelable(true);
						progressBar.setMessage("Working... ...");
						progressBar.setProgressStyle(ProgressDialog.STYLE_HORIZONTAL);
						progressBar.setProgress(0);
						progressBar.setMax(100);
						progressBar.setProgressDrawable(v.getResources().getDrawable(
				                R.drawable.custom_progress));
						progressBar.show();
			 

						progressBarStatus = 0;
			 
								new Thread(new Runnable() {
								  public void run() {
									while (progressBarStatus < 100) {
					 
									  // process some tasks
									  progressBarStatus = DoWork();
					 
										try {
											Thread.sleep(300);
										} catch (InterruptedException e) {
											e.printStackTrace();
										}
						 
									  // Update the progress bar
									  progressBarHandler.post(new Runnable() {
										public void run() {
										  progressBar.setProgress(progressBarStatus);
										}
									  });
									}
							
						  }
					   }).start();
									
					
		            } // End Event onClick
		            
		        });
	 
		}
	 

	 
		// DoWork & Set Status Progress Bar
		public int DoWork() {
			
			// Do some work EG: Save , Download , Insert , ..
			// **** Work
			// **** Work
			// **** Work
			// **** Work
			progressBarStatus++; // Work process and return status
			
			if( progressBarStatus < 100)
			{
				return progressBarStatus;
			}
			
			// When Finish
			try {
				Thread.sleep(1000);
			} catch (InterruptedException e) {
				e.printStackTrace();
			}
			progressBar.dismiss();

			return 100;
	 
		}
	 
	}



Screenshot

Android and Custom ProgressBar

คลิกที่ Do Work! เพื่อแสดง ProgressDialog








Android and Custom ProgressBar

แสดง ProgressBar แบบ Dialog และเมื่อทำงานเรียบร้อยก็จะหายไป

ProgressBar - Android Widgets Example

ProgressBar (Horizontal) - Android Widgets Example

Android AsyncTask and ProgressBar


   
Share


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


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


   


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

 
Android กับ Dialog boxes การโต้ตอบเบื้องต้นกับ AlertDialog และ makeText(Toast)
Rating :

 
Android Dialogs(AlertDialog) and Popup
Rating :

 
Android Confirm [Yes/No] AlertDialog Popup
Rating :

 
Android SeekBar in Alert Dialog Popup
Rating :

 
Android RatingBar in AlertDialog Popup
Rating :

 
Android Toast Notifications Custom Display XML Layout
Rating :

 
Android and Custom RatingBar
Rating :

 
Android and Custom SeekBar
Rating :

 
Android Popup Custom Layout and Returning (EditText/Textbox) from Dialog
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 Multiple Download file in ListView and Show Progress unit percentage
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 02
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 อัตราราคา คลิกที่นี่