Juguemos con las ProgressBar Yayy!!!

[zero_master]

Saludos gente, despues de estar unos dias desaparecidos en lo profundo de la selva de mi tierra natal Chiapas, Mexico; vuelvo a la tecnologia si lo se la verdad si se extraña andar viendo porno digo viendo foros ... pues bueno.

Hoy hablaremos sobre las ProgressBar y si se preguntan... que madres es una progressbar. Pues las clasicas barritas que aparecen cuando estamos instalando, esperando que cargue alguna aplicacion.



En android nos facilitaron mucho las cosas la verdad , tenemos la que es por default "Round shape" que es una progress bar de forma circular.

Ok, entramos a nuestro Eclipse y creemos nuestro nuevo proyecto, abrimos el archivo main.xlm y en este archivo lo que vamos a poner es la indicación de nuestra progress bar utilizando la siguiente linea de código.

<ProgressBar
android:id="@+id/progressbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>

Oye asi de facil?

Si corremos nuestro proyecto esto seria lo que nos saldrá



Si nos fijamos tendremos nuestro progressbar tipo "Round Shape" como si fuera un gif...

Tenemos otro tipo de progressbar que es la mas usada normalmente. La progressbar "Style Horizontal".

Para usar este tipo de ProgressBar de la misma manera en nuestro main.xlm debemos incluir estas lineas de código

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

Si nos fijamos un poco en nuestro código aquí le estamos indicando a nuestro proyecto que vamos a tener un valor máximo y también el progreso de donde se encuentra nuestra barra que sera a la mitad.

Nuestro proyecto tendrá una forma parecida a esta.



No se mueveee!!!! claro que no por que aun nos falta agregar unas cosas ya sabia!! (Hablo conmigo mismo )

Si recordamos agregamos una instrucción que es el android:progress aquí podemos ir modificando el estatus de nuestro progressbar para iniciar lo dejaremos en 0.

Primero carguemos nuestra librería para manejos de progressbar en nuestro archivo *.java

import android.widget.ProgressBar;

Y librerías auxiliares para correr unas rutinas

import android.app.Activity;
import android.os.AsyncTask;
import android.os.Bundle;
import android.os.SystemClock;
import android.view.View;
import android.widget.Button;

Lo que vamos a hacer es agregar un botón y animar nuestro progressbar con el uso del systemclock.

Nuestro código final tendrá una forma parecida a esta.

Código Javascript:

public class AndroidProgressBar extends Activity {
  
 Button buttonStart;
 ProgressBar progressBar;
  
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        buttonStart = (Button)findViewById(R.id.start);
        progressBar = (ProgressBar)findViewById(R.id.progressbar);
         
        buttonStart.setOnClickListener(new Button.OnClickListener(){
 
   @Override
   public void onClick(View arg0) {
    // TODO Auto-generated method stub
    buttonStart.setClickable(false);
    new asyncTaskUpdateProgress().execute();
   }
          
        });
         
    }
     
    public class asyncTaskUpdateProgress extends AsyncTask<Void, Integer, Void> {
 
     int progress;
      
  @Override
  protected void onPostExecute(Void result) {
   // TODO Auto-generated method stub
   buttonStart.setClickable(true);
  }
 
  @Override
  protected void onPreExecute() {
   // TODO Auto-generated method stub
   progress = 0;
  }
 
  @Override
  protected void onProgressUpdate(Integer... values) {
   // TODO Auto-generated method stub
   progressBar.setProgress(values[0]);
  }
 
  @Override
  protected Void doInBackground(Void... arg0) {
   // TODO Auto-generated method stub
   while(progress<100){
    progress++;
    publishProgress(progress);
    SystemClock.sleep(100); 
   }
   return null;
  }
      
    }
}
 

Si corremos nuestro proyecto tendremos nuestra barra animada no les muestro la imagen por que no se va a ver animada ademas de que me da flojera hacer gif's jajaja

Bueno espero les funcione cualquier duda o sugerencias ya saben escriban algo el que no escriba no merece copiar el código y presumir al rato que "hace aplicaciones android"

[so1rak]

Hola amigo como aplicarias este metodo al recibir respuesta de sockets para llenarla,

ejemplo:

si el socket se conecta que avance hasta el 15% si recibe respuesto avance otro 40% yasi hasta llagr al 100% SALUDOS

[zero_master]

Saludos; mira si de antemano sabes cuando te llegaron esas notificaciones o sea si ya tienes tu esa dichosa funcion es mucho mas facil.

En el comando cuando utilizamos:
progressBar.setProgress(values[0]);

En ves de tener "values[0]" tu puedes poner como dices 15, 45 o 100.
No importa si usas ese comando en diferentes rutinas, te pongo un ejemplo no se
al iniciar tu aplicacion podrias decirle:
progressBar.setProgress(0);
Despues que sabes que se conecto pones:
progressBar.setProgress(15);
Ya finalizaste la tarea que querias agregarle el progress bar pones:
progressBar.setProgress(100);

Aunque si te quieres evitar problemas de estar mandando a llamarlo tantas veces mejor utiliza el primer tipo de progress que mencione el "Round Shape"

[so1rak]

Código Javascript:

package com.mobil.time;
 
import java.io.DataInputStream;
import java.io.DataOutputStream;
import java.io.IOException;
import java.net.Socket;
import java.net.UnknownHostException;
 
import android.R.color;
import android.R.string;
import android.app.Activity;
import android.app.Dialog;
import android.app.ProgressDialog;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.telephony.TelephonyManager;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.ProgressBar;
import android.widget.TextView;
 
public class CambiarNIP extends Activity {
 
    EditText getInput, getInput2, getInput3;
    TextView haduken, haduken2;
    ProgressThread progThread;
    ProgressDialog progDialog;
    int typeBar;                 
    int delay = 40;                  
    int maxBarValue =0;
 
    protected void onCreate(Bundle savedInstanceState) {
 
        super.onCreate(savedInstanceState);
        setContentView(R.layout.cambiar_nip);
 
        getInput = (EditText) findViewById(R.id.txtNiPactual);
        getInput2 = (EditText) findViewById(R.id.txtNIPnuevo);
        getInput3 = (EditText) findViewById(R.id.txtNIPconfirmar);
        Button boton = (Button) findViewById(R.id.BcambioNIP);
        haduken = (TextView) findViewById(R.id.txttodo);
        haduken2 = (TextView) findViewById(R.id.txtconexion);
 
        boton.setOnClickListener(new View.OnClickListener() {
 
            String a, b, c;
 
            @Override
            public void onClick(View v) {
 
                 
                    
                TelephonyManager telephonyManager = (TelephonyManager) getSystemService(Context.TELEPHONY_SERVICE);
                String imei = telephonyManager.getDeviceId();
                String d = imei;
                String a = getInput.getText().toString();
                String b = getInput2.getText().toString();
                String c = getInput3.getText().toString();
 
                if (a.length()<=4 || b.length()<=4 || c.length()<=4) {
 
                    haduken.setText("Campos Incompletos o Vacios");
 
                } else {
                    if (b.equals(c)) {
 
                        typeBar = 1;
                        showDialog(typeBar);
                         
                        Socket socket = null;
                        DataOutputStream dataOutputStream = null;
                        DataInputStream dataInputStream = null;
                        try {
                            socket = new Socket("10.0.2.2", 4445);
 
                            haduken.setText("30\n" + a + "\n" + b + "\n" + c
                                    + "\n" + d);
 
                        } catch (UnknownHostException e) {
                            // TODO Auto-generated catch block
                            e.printStackTrace();
                        } catch (IOException e) {
                            // TODO Auto-generated catch block
                            e.printStackTrace();
                        }
                    } else {
 
                        haduken.setText("El NIP no coincide");
 
                    }
                }
            }
 
        });
    } @Override
    protected Dialog onCreateDialog(int id) {
        switch(id) {
            case 1:                    
            progDialog = new ProgressDialog(this);
            progDialog.setProgressStyle(ProgressDialog.STYLE_HORIZONTAL);
            progDialog.setMax(maxBarValue);
            progDialog.setMessage("Enviando datos porfavor ESPERE !!!:");
            progThread = new ProgressThread(handler);
            progThread.start();
            return progDialog;
        default:
            return null;
        }
    }
    
    final Handler handler = new Handler() {
        public void handleMessage(Message msg) {
            int total = msg.getData().getInt("total");
            progDialog.setProgress(total);
            if (total >= 100){
                dismissDialog(typeBar);
                progThread.setState(ProgressThread.DONE);
            }
        }
    };
    
private class ProgressThread extends Thread {   
        
       
        final static int DONE = 0;
        final static int RUNNING = 1;
        
        Handler mHandler;
        int mState;
        int total;
    
        
        ProgressThread(Handler h) {
            mHandler = h;
        }
        
        
        @Override
        public void run() {
            mState = RUNNING;   
            total = maxBarValue;
            while (mState == RUNNING) {
               
                try {
                   
                    Thread.sleep(delay);
                } catch (InterruptedException e) {
                    Log.e("ERROR", "El proceso fue interrumpido");
                }
                
                Message msg = mHandler.obtainMessage();
                Bundle b = new Bundle();
                b.putInt("total", total);
                msg.setData(b);
                mHandler.sendMessage(msg);
                
                
                total++;   
            }
        }
        
      
        public void setState(int state) {
            mState = state;
        }
}
}
 

Código Javascript:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent" android:background="@drawable/androide"
    android:weightSum="1">
    <TextView android:gravity="center" android:text="Cambio NIP"
        android:id="@+id/textView2" android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:layout_width="match_parent"></TextView>
    <TextView android:id="@+id/textView6" android:textAppearance="?android:attr/textAppearanceLarge"
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:text=" "></TextView>
    <TextView android:layout_gravity="center" android:text="NIP Actual:"
        android:layout_width="wrap_content" android:id="@+id/textView1"
        android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceMedium"></TextView>
    <EditText android:layout_gravity="center"
        android:layout_height="wrap_content" android:inputType="phone"
        android:layout_width="149dp" android:maxLength="5" android:id="@+id/txtNiPactual">
        <requestFocus></requestFocus>
    </EditText>
    <TextView android:layout_gravity="center" android:text="NIP Nuevo:"
        android:layout_width="wrap_content" android:id="@+id/textView3"
        android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceMedium"></TextView>
    <EditText android:layout_gravity="center"
        android:layout_height="wrap_content" android:inputType="phone"
        android:layout_width="149dp" android:maxLength="5" android:id="@+id/txtNIPnuevo"></EditText>
    <TextView android:layout_gravity="center" android:text="Confirmar NIP Nuevo:"
        android:layout_width="wrap_content" android:id="@+id/textView4"
        android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceMedium"></TextView>
    <EditText android:layout_gravity="center" android:inputType="phone"
        android:layout_height="wrap_content" android:layout_width="149dp"
        android:maxLength="5" android:id="@+id/txtNIPconfirmar"></EditText>
    <Button android:layout_gravity="center" android:text="Aceptar"
        android:layout_width="88dp" android:layout_height="wrap_content"
        android:id="@+id/BcambioNIP"></Button>
    <TextView android:id="@+id/txttodo" android:layout_height="wrap_content"
        android:text=" " android:layout_width="match_parent"
        android:layout_gravity="center" android:textAppearance="?android:attr/textAppearanceLarge"
        android:gravity="center"></TextView>
 
    <TextView android:layout_gravity="center" android:gravity="center"
        android:layout_width="308dp" android:layout_weight="0.33"
        android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceLarge"
        android:id="@+id/txtconectado"></TextView>
    <TextView android:text=" " android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:layout_gravity="center" android:layout_width="249dp"
        android:gravity="center" android:id="@+id/txtconexion"></TextView>
    <TextView android:textAppearance="?android:attr/textAppearanceSmall"
        android:id="@+id/textView9" android:layout_width="wrap_content"
        android:layout_height="wrap_content" android:text=" "></TextView>
    <TextView android:textAppearance="?android:attr/textAppearanceLarge"
        android:id="@+id/textView8" android:layout_width="wrap_content"
        android:layout_height="wrap_content" android:text=" "></TextView>
 
</LinearLayout>
 

AQUI ENCAPSULO MI CODIGO POR SI LE SIRVE A ALGIEN =)


muchas gracias por la respuesta amigo

[javih]

Gracias, le voy a echar un vistazo, tengo que hacer algo parecido con un socket.

Saludos

[javih]

Hola,

Me gustó como funciona el de sor1ak, pero al final estoy utilizando el de zeromaster pero tengo una duda a ver si me pueden orientar un poco, estoy utilizadno .setProgress(int) para ir marcando el progreso y funciona bien pero resulta que el botón se queda bloqueado porque no he añadido un thread para esa función y entonces a ver si me pueden orientar un poco en como hacerlo porque así no se aprecia el progressBar, después de clicar el botón, éste se queda naranja (seleccionado) hasta que envía la imagen y después de enviar la imagen lo 'suelta' y es aquí cuando comienza a trabajar el progressBar pero claro a tanta velociad que no se aprecia y necesitaría añadir un asyncTask o algo así pero no sé si añadirlo en la Activity o en la Clase que tengo para ese método de enviar, me explico:

Tengo una Actividad y una Clase, MainActivity y una Clase Java convencional.

En la Clase Java tengo un método booleano que utilizo para enviar la imagen:

Código:

public boolean imagen() throws Exception  {

Y en la Actividad, MainActivity llamo a ese método así para que envíe la imagen y me devuelva true en caso de enviar satisfactoriamente o false por si hay algún error así:

progressBar.setProgress(30);

try {
imagen.adjuntarImagen(fileImagen);

progressBar.setProgress(40);

if (imagen.enviar()) {
progressBar.setProgress(100);

Log.d(logTag, "Imagen enviada ");

(los otros .setProgress(int) que comprenden del 40 al 100 están dentro del método imagen() de la Clase java).

Mi pregunta es sí sería mejor (y si se puede) crear el thread desde la Activity? o crearlo en la Clase java, estoy perdido con esto, culquier sugerencia se agradece.


Saludos

[zero_master]

Depende mucho de tu codigo, lo probaste en un celular o en algun lado? casi siempre en el emulador corre de manera mas lenta o puede que tu class java te este generando "lag" por asi decirlo, a mi me pasa en una aplicacion de procesamiento de imagenes, mientras le di el boton se queda de color naranja hasta que termine la funcion regresa a su estado normal talvez podrias agregarle al hacer click a tu boton este desaparesca con VISIBILITY.GONE

[javih]

Gracias por la respuesta,

De momento no me interesa hacer invisible el botón, pero haré eso que comentas, porque solo lo estoy probando en el emulador, voy a probarlo en un teléfono a ver que ocurre y comento. Aunque me da que va a ocurrir lo mismo.

Saludos

[javih]

Pues no zero_master no ha habido suerte, lo probé con un Samsung Galaxy con Froyo 2.2 pero la barra de progreso no se ve, porque mientras está enviando el botón se queda seleccionado y hasta que no finaliza el envío no lo suelta y luego es cuando comienza la barra de progreso, pero es tan rápido que ni se ve, pero la barra si que funciona porque depurando ya lo he visto y queda chula.

Vamos que tengo que manejarlo en un hilo sí o sí.

Pero ahora tengo un lío en haccer runnable esa clase, no sé si podré hacerlo desde la activity o extender la Clase de un Thread.

Tampoco estoy seguro si usar un Thread como en JavaSE o emplear un AsyncTask o un Service de Android.

¿Qué me vendría mejor?

Saludos

[javih]

Hola,

Utilicé un thread y ha funcionado muy bien, ahora al pulsar el botón no se queda bloqueado y la barra hace su trabajo perfectamente.

Solo tengo un problema y es que al pulsar el botón la primera vez no ocurre nada, tengo que volver a pulsar para que comience a trabajar, ya luego después de esto cada vez que pulso el botón funciona todo, pero siempre que inicio la aplicación la primera vez que pulso el botón no funciona nada.

¿Esto por qué puede ser?

Saludos

[javih]

he visto que lanza una excepción, cuando el progressbar llega a 100 y lo hace después de que le llegue un booleano a true desde otra clase y es entonces cuando muestra la barra al completo (100) luego imprime en el logcat "Envío realizado con éxito", a continuación debería de mostrar un Toast notificando al usuario que el envío se realizó con éxito pero es ahí cuando lanza esta excepción, pero no por el toast, el toast está bien construido, de hecho funcionaba antes de añadir el Thread.

esta es la excepción:

10-15 17:18:09.812: DEBUG/appDemo(404): El Thread ha tenido problemas durante su ejecución: java.lang.RuntimeException: Can't create handler inside thread that has not called Looper.prepare()

¿tengo que crear un handler?

Saludos

PD: y esta es la excepción cuando pulso por primera vez el botón después de arrancar la aplciación:
10-15 17:22:19.702: DEBUG/appDemo(439): El Trhead ha tenido problemas durante su ejecución: android.view.ViewRoot$CalledFromWrongThreadExcepti on: Only the original thread that created a view hierarchy can touch its views.

[javih]

nada ya lo comprendrí, disculpen todo el rollo.

al final he usado ese mismo asyntask y eliminado el thread y metido todo en código en doinbackground y el toast en post y funciona todo bien.

gracias y saludos

[javih]

Hola de nuevo,

Ahora cuando llega a 100 hago que el progressbar sea invisible, pero no se ve muy bien ese momento al que llega a 100, porque se hace invisible muy rápidamente

Código:

 progressBar.setProgress(100);
progressBar.setVisibility(View.INVISIBLE);

¿Qué podría hacer para que se espere un poco cuando se completa la barra, antes de hacerse invisible?

Otra pregunta, ¿qué podría hacer para que cuando llega a 100 (se completa la barra), aparezca un borde con opacidad (como un destello), algún efecto tipo fade o así para que quede más curiosa la barra. El borde lo podría hacer en el xml pero no se como aplicarle un efecto tipo fade.

Saludos

[zero_master]

Wooo solo me fui unos dias de viaje y ya vi todo lo que escribiste jejeje bueno pues que bueno que ya vas solucionando tu problema, el efecto que le quieres agregar no tengo conocimiento de una vez aclaro jeje puede que jugandole un poco al xml como dices, ademas para darle un poco de tiempo podrias usar el comando "SystemClock.sleep(100); " el valor 100 que puse esta en milisegundos entonces si quieres verlo mas o menos un segundo agrega SystemClock.sleep(1000);
Suerte seria bueno que mandaras unas capturas para ver como te va quedando

[so1rak]

Iniciado por javih

Hola de nuevo,

Ahora cuando llega a 100 hago que el progressbar sea invisible, pero no se ve muy bien ese momento al que llega a 100, porque se hace invisible muy rápidamente

Código:

 progressBar.setProgress(100);
progressBar.setVisibility(View.INVISIBLE);

¿Qué podría hacer para que se espere un poco cuando se completa la barra, antes de hacerse invisible?

Otra pregunta, ¿qué podría hacer para que cuando llega a 100 (se completa la barra), aparezca un borde con opacidad (como un destello), algún efecto tipo fade o así para que quede más curiosa la barra. El borde lo podría hacer en el xml pero no se como aplicarle un efecto tipo fade.

Saludos

no intentaste con un GONE
progressBar.setVisibility(View.GONE);

a caray yo tampoco me habia dado cuenta de toda l a informacion que se escribio aqui jejeje