Tip Android #28: ProgressDialog personalizado

29/08/2013
android tip

En el tip #15 vimos cómo diseñar nuestros propios Dialog para superar las limitaciones y restricciones que nos imponen los AlertDialog de Android. En este tip vamos a hacer lo mismo pero para los ProgressDialog con el mismo objetivo: controlar completamente tanto el formato del Dialog como sus estilos, haciendo que estos sean los mismos en cualquier dispositivo independientemente de la versión de Android que ejecuten y que, por lo tanto,siempre “encajen” con el estilo de nuestra app.

El ejemplo que se mostrará consistirá en un pequeño Dialog que se mostrará en el centro de la pantalla con la imagen animada circular de progreso de Android y un texto en la parte inferior (el ProgressDialog por defecto obliga a que haya un texto a la derecha de la imagen y su estilo es díficil de modificar).

custom_progressdialog.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:background="@drawable/progressdialog"
    android:orientation="vertical" >

    <ProgressBar
        android:id="@+id/progressBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:layout_gravity="center_horizontal"/>

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/loading" 
        android:textStyle="bold"
        android:textColor="@color/progress_text"
        android:layout_marginTop="8dp"/>

</LinearLayout>

El formato de la “caja contenedora” del Dialog es el siguiente drawable:

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <solid android:color="@color/progress_bg" />

    <corners android:radius="10dp" />
    
    <padding android:left="15dp" android:top="15dp" android:right="15dp" android:bottom="15dp"/>    

</shape>

Para probar este Dialog simplemente vamos a crear una Activity con un LinearLayout vacio, la aplicación de ejemplo no tiene otro objetivo que mostrar el Dialog. El código de la Activity no puede ser más sencillo:

package com.danielme.tipsandroid.progressdialog;

import android.app.Activity;
import android.app.ProgressDialog;
import android.os.Bundle;

import com.danieme.tipsandroid.progressdialog.R;


/**
 * 
 * @author danielme.com
 *
 */
public class MainActivity extends Activity
{	
	ProgressDialog progressDialog = null;
	
	@Override
	protected void onCreate(Bundle savedInstanceState)
	{		
		super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main); 
        
		progressDialog = new ProgressDialog(this);
        progressDialog.show();        
        progressDialog.setContentView(R.layout.custom_progressdialog);
        //se ppdrá cerrar simplemente pulsando back
		progressDialog.setCancelable(true);
		
		//no olvidar invocar dismiss para cerrarlo
	}	
	
}

El resultado final dependerá del dispositivo y versión de Android en lo que a la “rueda” se refiere, sobre el resto de elementos tendremos el control absoluto y siempre debería verse igual. Como referencia, dejo a continuación las capturas tomdas del emulador oficial de Android SDK.

3 Responses to Tip Android #28: ProgressDialog personalizado

  1. Vicente dice:

    Gracias, esto es lo que necesitaba🙂

  2. david macias dice:

    como se invocaria el dismisis para que cierre despues de un intervalo de tiempo?

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: