ProgressBar – Example

Hoy os traigo un ejemplo simple de como hacer funcionar la progress bar. Normalmente usamos el progress para informar que se esta haciendo un tarea por un thread, pero para el usuario no saber cuanto le falta a esa tarea le puede llevar a tener una peor experiencia final de nuestra app.

Para dar esa información solamente debemos usar la progress bar, una de los problemas al implementarlas es saber cual será el máximo de nuestra tarea. Si tengo que descargar 10 fotografías saber que tengo 10 en total sera mi máximo en la tarea, por el contrario si solamente me pongo a descargar fotografías esperando llegar al final, no tendré máximo y bien delimito la tarea, recogiendo datos para saber la cantidad total de fotografías o me contento con un progress.

Otra parte fundamental para implementar la progress bar es tener un bucle hasta finalizar la tarea que permita incrementar el porcentaje de la barra según el proceso, algo muy intuitivo que bien porque usamos objetos ya creados o otras causas pueden complicar el código.

En este ejemplo de un app completamente funcional, nos descargaremos el html de una página web y lo mostraremos por pantalla en un textview, dado la longitud que tiene la página puede el texto se corte pero podremos ver como ha terminado la tarea. Todo esto en menos de 100 lineas.

Como decíamos necesitamos averiguar cual será el tamaño total de la página web que queremos descargar y esto lo obtendremos con la función inferior, ya hemos puesto el progreso de la barra a 100 como máximo. Luego iremos sacando los porcentajes de este total.

maxProgresso = conexion.getContentLength();

Ya tenemos la primera parte solucionada ahora solamente tendremos que averiguar cada cuanto en se ha de incrementar la barra:

while ( (s = buffer.readLine()) != null) {
	cuenta = input.read(data);
	progreso += cuenta;
 	response += s;
	progressBar.setProgress((int)(progreso*100/maxProgreso) );
  }

Podemos ver como va a leer toda la entrada del buffer, linea por linea hasta que no haya más. Entonces con cuenta y progreso lo único que nos sirven es para llevar la cuenta de lo que se esta adelantando en la tarea luego en el interior del setProgress calculamos el porcentaje que llevamos acumulado porque ya tenemos el total de datos que tendrá que llegar el bucle.

Una vez llegados podremos ver el código de la página por pantalla.

Dejo el código y el xml a parte el proyecto ya construido ProgressBarExample_androidconnect.org :

import java.io.BufferedInputStream;
import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.net.MalformedURLException;
import java.net.URL;
import java.net.URLConnection;

import android.app.Activity;
import android.os.AsyncTask;
import android.os.Bundle;
import android.view.View;
import android.widget.ProgressBar;
import android.widget.TextView;

public class ProgressBarExampleActivity extends Activity {
	private TextView textView;
	private ProgressBar progressBar;

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        textView = (TextView) findViewById(R.id.TextView01);
        progressBar = (ProgressBar) findViewById(R.id.progressbar_Horizontal);

    }

    private class DownloadWebPageTask extends AsyncTask<String, Void, String> {

    	@Override
		protected String doInBackground(String... urls) {
        	int progreso = 0;
        	int maxProgreso = 100;
        	int cuenta;

			String response = "";
			for (String url : urls) {
				try {
					URL conexionUrl = new URL(url);
					URLConnection conexion = conexionUrl.openConnection();
		            conexion.connect();

		            maxProgreso  = conexion.getContentLength() ;

		            InputStream input = new BufferedInputStream(conexionUrl.openStream());
		            BufferedReader buffer = new BufferedReader( new InputStreamReader(input));

		            byte data[] = new byte[1024];

					String s = "";

					while ( (s = buffer.readLine()) != null) {
						cuenta = input.read(data);
						progreso += cuenta;
					 	response += s;
						progressBar.setProgress((int)(progreso*100/maxProgreso) );
					}

				} catch (MalformedURLException e1) {
					e1.printStackTrace();
				} catch (IOException e) {
					e.printStackTrace();
				}
			}
			return response;
		}
		@Override
		protected void onPostExecute(String result) {
			textView.setText(result);
		}
	}

	public void readWebpage(View view) {
		DownloadWebPageTask task = new DownloadWebPageTask();
		task.execute(new String[] { "http://www.androidconnect.org" });
	}
}
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/hello"
    />

    <Button android:layout_height="wrap_content" android:layout_width="fill_parent"
    android:id="@+id/readWebpage" android:onClick="readWebpage" android:text="Load Webpage"></Button>
    <ScrollView android:layout_width="fill_parent" android:id="@+id/scrollView1" android:layout_height="wrap_content">
        <LinearLayout android:id="@+id/linearLayout1" android:layout_width="fill_parent" android:layout_height="wrap_content"
        	android:orientation="vertical">

			<TextView android:id="@+id/TextView01" android:layout_width="fill_parent"
			android:layout_height="wrap_content" android:text="Example Text"></TextView>

			<ProgressBar
			 android:layout_width="fill_parent"
			 android:layout_height="wrap_content"
			 style="?android:attr/progressBarStyleHorizontal"
			 android:id="@+id/progressbar_Horizontal"
			 android:max="100"
			 />

		 </LinearLayout>
 	</ScrollView>
</LinearLayout>

Fuentes: ProgressBar running in AsyncTask , AsyncTask Example

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *