Monday, November 10, 2014

How to customize Android's Progress Dialog with Animation List xml

What is meant by Progress Dialog?

A dialog showing a progress indicator and an optional text message or view. Only a text message or a view can be used at the same time.


Mobile Applications needs to have some cool stuff to impress the users to make them alive forever with the subscription and gain some money. That impression need to be at First attempt.


                   


Loading images are boring in "Android" with same set of circle with Loading Text. So here we go with some Customized Progress Dialog that can catch your eyes with cool things. Animations are playing a major role in Mobile Applications like swiping an Activity to reach another Activity, and many more things a developer aware of it.

Progress Dialog's can be used as an Interface to act like a “Animated Loader"
Code for Normal Progress Dialog,

ProgressDialog pd =new ProgressDialog(context);

Declared a ProgressDialog variable "pd" and Created a new Instance with ProgressDialog(context) passing a activity context to it.

We are here going to change the ProgresDialog Instance with our own Custom Class that extended with ProgressDialog.

Here is how we made an Instance with Custom Class

     ProgressDialog pd = MyCustomProgressDialog.ctor(ctx);

CustomProgressDialog.java


public class CustomProgressDialog extends ProgressDialog {

private AnimationDrawable animation;

public static ProgressDialog ctor(Context context) {

 CustomProgressDialog dialog = new CustomProgressDialog (context);

 dialog.setIndeterminate(true);

 dialog.setCancelable(false);

  return dialog;
  }
  public CustomProgressDialog (Context context) {

    super(context);
  }

  public CustomProgressDialog (Context context, int theme) {

    super(context, theme);
  }

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    
   super.onCreate(savedInstanceState);

    setContentView(R.layout.view_custom_progress_dialog);

    ImageView animate = (ImageView) findViewById(R.id.animation);

    animate.setBackgroundResource(R.drawable. custom_animation);

    animation = (AnimationDrawable) animate.getBackground();
  }

  @Override
  public void show() {

    super.show();

    animation.start();
  }

  @Override
  public void dismiss() {

    super.dismiss();

    animation.stop();

  }
}


AnimationDrawable
It is the core part of the code, since us going to achieve the animation through this "AnimationDrawable" object.

Note: Animation like "GIF's" are not Supported by Android by default.
AnimationDrawable are like going to make an illusion that the result of “GIF” animations is appear.

Usually GIF Images have multiple sets of images to act in nano seconds as moving object.
As same concept we are going to make a Drawable object with defining multiple images.

custom_animation.xml


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

<animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false">

  <item android:drawable="@drawable/anim00" android:duration="250" />

  <item android:drawable="@drawable/anim01" android:duration="250" />

  <item android:drawable="@drawable/anim02" android:duration="250" />

  <item android:drawable="@drawable/anim03" android:duration="250" />

</animation-list>



Put this above xml file in Drawable folder under res folder of your android Project. Progress Dialog makes a view over an ImageView in our Code, so that we created a Layout obtaining an ImageView in it.
Here is the Layout code, put it in layout folder:

view_custom_progress_dialog.xml


<LinearLayout



    android:layout_width="match_parent"

    android:layout_height="match_parent"

   android:gravity="center" >

    <ImageView

        android:id="@+id/animation"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:adjustViewBounds="true"

        android:contentDescription="@string/empty_string"

        android:scaleType="centerCrop" />

</LinearLayout>



Finally,  Start your progress dialog in onPreExecute() of your asynctask class or any place, we used in asynctask class, since network attempt mostly can be in asynctask class, otherwise NetworkOnMainThread Exception will occur.

@Override
protected void onPreExecute() {

   super.onPreExecute();

   progressDialog.show();
 }

Do your tasks in doInBackground Function.
And then stop the ProgressDialog in onPostExecute Function

 @Override
 protected void onPostExecute(Void result) {

      super.onPostExecute(result);

      progressDialog.hide();
 }


No comments:

Post a Comment