Android: Cambia el diseño de tu Dialog

El estilo por defecto de los “Dialogs” en android están pensados para que se adapten a cualquier aplicación, por eso tienen unos colores y formas muy básicos. Sin embargo android permite crear nuestras propias vistas, y en esta entrada se muestra como podemos crear una alerta de progreso personalizada con los colores y estilo de nuestra app. 

Comenzamos diseñando nuestra vista como cualquier otro layout, se llamará “dialog_cargando.xml”:

<!--?xml version="1.0" encoding="utf-8"?>
xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:background="@drawable/radius_black_transparent"
 android:layout_gravity="center"
 android:layout_margin="25dp"
 android:paddingTop="@dimen/activity_vertical_margin"
 android:paddingBottom="@dimen/activity_vertical_margin"
 android:paddingLeft="@dimen/activity_horizontal_margin"
 android:paddingRight="@dimen/activity_horizontal_margin">


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

 <TextView
 android:id="@+id/txtMensaje"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:textSize="@dimen/tamaño_cuerpo"
 android:text="Cargando..."
 android:layout_gravity="center_horizontal"
 android:layout_marginTop="5dp"
 android:layout_marginLeft="5dp"
 android:layout_marginRight="5dp"
 android:textColor="@color/white" />

</LinearLayout>

He marcado la propiedad background del linear layout porque hace referencia a un xml que define los bordes y el color de la vista, se llama “radius_black_transparent.xml” y se debe crear dentro de la carpeta drawable como una “drawable resource file”. Contiene lo siguiente:

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

xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" android:padding="10dp">

    <corners
       android:bottomRightRadius="5dp"
       android:bottomLeftRadius="5dp"
       android:topLeftRadius="5dp"
       android:topRightRadius="5dp"/>
    
    android:color="#80000000"/>
</shape>

Ya tenemos definida la vista que queremos cargar, en este caso la cargaremos en el onCreate, y la mostraremos en una Asyntask concretamente en el método “onPreExecute()”, pero antes debemos definir una nueva clase llamada “CustomProgressDialog.java” que instanciaremos cuando queramos cargar la vista en un alertDialog:

public class CustomProgressDialog extends AlertDialog {

   private String message = null;

   //Constructor implícito que recibe el contexto (acitivty) en el que se crea
   public CustomProgressDialog(Context context) {
      super(context);
   }

   //Constructor explícito que recibe el contexto (activity) en el que se crea, y el mensaje que muestra (por defecto es "Cargando...")
   public CustomProgressDialog(Context context, String message) {
      super(context);
      this.message = message;
   }


   @Override
   public void show() {
      super.show();

      setCancelable(false);
      //En android Lollipop además de mostrar el dialog personalizado también muestra un dialog en blanco debajo...ponemos en transparente ese dialog y solucionado!
      getWindow().setBackgroundDrawable(getContext().getResources().getDrawable(R.drawable.tranparent));
      setContentView(R.layout.dialog_cargando);
      if (message != null){
          TextView txt = (TextView)this.findViewById(R.id.txtMensaje);
          txt.setText(message);
          txt.setGravity(Gravity.CENTER_HORIZONTAL);
      }
   }

   // Este método sirve para cerrar el dialog pasado un tiempo, este tiempo lo recibe por parámetro en milisegundos...es útil en algunos casos, pero no lo utilizaremos. 
   public void contrarrelojCerrarDialog(long time){
      new Handler().postDelayed(new Runnable() {
         public void run() {
            dismiss();
         }
      }, time);
   }

}

Ya está todo listo, ahora nos queda instanciar la clase en el onCreate de la activity en la que queremos mostrar la vista, y llamar al método show en el onPreExecute().

public class LlistaClientsActivity extends Activity {

   private static CustomProgressDialog pDialog;

   protected void onCreate(Bundle savedInstanceState){

      ...

      //Instancia implícita
      pDialog = new CustomProgressDialog(getApplicationContext());
   }


   //AsyncTask
   public static class miAsyncTask extends Asynctask<string, string,="" string="">{

     @Override
     protected void onPreExecute(){
     
        //Mostramos el dialog
        pDialog.show();
     
     }

     @Overrride
     protected String doInBackground(String... arg0){
    
        ...
     }


     @Overrride
     protected void onPostExecute(){

         //Cerramos el dialog
         pDialog.dismiss();

     }

  }
}

 

Anuncios

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