Showing the Progress Dialog same as IOS MB Progress Bar

Hello All,

Today I am sharing you small code for showing the custom progress bar same as ios, in android.First let me show you the screenshot of progress bar.

In the above screenshot we are showing the progress bar which is different than the default progress bar. so let's start with coding part:

Firstly you need to add the PNG icons of loaders in drawable folder,I have added the zip file for all loaders in this below link:

link : Progress Loaders Png Icons

Now let's make the "anim" folder inside "res" folder, and add an Xml file , named : spinner.xml, and add the following code:

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

    <item
        android:drawable="@drawable/spinner_0"
        android:duration="60"/>
    <item
        android:drawable="@drawable/spinner_1"
        android:duration="60"/>
    <item
        android:drawable="@drawable/spinner_2"
        android:duration="60"/>
    <item
        android:drawable="@drawable/spinner_3"
        android:duration="60"/>
    <item
        android:drawable="@drawable/spinner_4"
        android:duration="60"/>
    <item
        android:drawable="@drawable/spinner_5"
        android:duration="60"/>
    <item
        android:drawable="@drawable/spinner_6"
        android:duration="60"/>
    <item
        android:drawable="@drawable/spinner_7"
        android:duration="60"/>
    <item
        android:drawable="@drawable/spinner_8"
        android:duration="60"/>
    <item
        android:drawable="@drawable/spinner_9"
        android:duration="60"/>
    <item
        android:drawable="@drawable/spinner_10"
        android:duration="60"/>
    <item
        android:drawable="@drawable/spinner_11"
        android:duration="60"/>
</animation-list>

Now make an Xml drawable file , to show the partial black background of custom Progress Bar , named: progress_hud_bg.xml , and paste the below code: 

<?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:background="@drawable/progress_hud_bg"
    android:layout_gravity="center"
    android:orientation="vertical" android:gravity="center_horizontal" android:paddingLeft="30dp" android:paddingRight="30dp" android:paddingBottom="20dp" android:paddingTop="20dp">

    <ImageView
        android:id="@+id/spinnerImageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@anim/spinner" />

    <TextView
        android:id="@+id/message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Message" android:layout_marginTop="15dp" android:textColor="#FFFFFF"/>


</LinearLayout>

Now ,make a layout for showing the text and loader , named: progress_hud.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:background="@drawable/progress_hud_bg"

    android:layout_gravity="center"

    android:orientation="vertical" android:gravity="center_horizontal" android:paddingLeft="30dp" android:paddingRight="30dp" android:paddingBottom="20dp" android:paddingTop="20dp">

    <ImageView

        android:id="@+id/spinnerImageView"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:background="@anim/spinner" />

    <TextView

        android:id="@+id/message"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Message" android:layout_marginTop="15dp" android:textColor="#FFFFFF"/>

</LinearLayout>

We have to add style tag also , so paste the following code in styles.xml

 <style name="ProgressD" parent="@android:style/Theme.Dialog">

        <item name="android:windowFrame">@null</item>

        <item name="android:windowIsFloating">true</item>

        <item name="android:windowContentOverlay">@null</item>

        <item name="android:windowAnimationStyle">@android:style/Animation.Dialog</item>

        <item name="android:windowSoftInputMode">stateUnspecified|adjustPan</item>

        <item name="android:windowBackground">@android:color/transparent</item>

        <item name="android:windowNoTitle">true</item>

    </style>

Next Step , we need to make a sub class of   Dialog, let's assume the name of that java class is: ProgressD.java

Paste the following code inside this class: 

import android.app.Dialog;

import android.content.Context;

import android.graphics.drawable.AnimationDrawable;

import android.view.Gravity;

import android.view.View;

import android.view.WindowManager;

import android.widget.ImageView;

import android.widget.TextView;

public class ProgressD extends Dialog {

public ProgressD(Context context) {

super(context);

}

public ProgressD(Context context, int theme) {

super(context, theme);

}

public void onWindowFocusChanged(boolean hasFocus){

ImageView imageView = (ImageView) findViewById(R.id.spinnerImageView);

        AnimationDrawable spinner = (AnimationDrawable) imageView.getBackground();

        spinner.start();

    }

public void setMessage(CharSequence message) {

if(message != null && message.length() > 0) {

findViewById(R.id.message).setVisibility(View.VISIBLE);

TextView txt = (TextView)findViewById(R.id.message);

txt.setText(message);

txt.invalidate();

}

}

public static ProgressD show(Context context, CharSequence message, boolean indeterminate, boolean cancelable,

OnCancelListener cancelListener) {

ProgressD dialog = new ProgressD (context,R.style.ProgressD);

dialog.setTitle("");

dialog.setContentView(R.layout.progress_hud);

if(message == null || message.length() == 0) {

dialog.findViewById(R.id.message).setVisibility(View.GONE);

} else {

TextView txt = (TextView)dialog.findViewById(R.id.message);

txt.setText(message);

}

dialog.setCancelable(cancelable);

dialog.setOnCancelListener(cancelListener);

dialog.getWindow().getAttributes().gravity=Gravity.CENTER;

WindowManager.LayoutParams lp = dialog.getWindow().getAttributes();  

lp.dimAmount=0.2f;

dialog.getWindow().setAttributes(lp); 

//dialog.getWindow().addFlags(WindowManager.LayoutParams.FLAG_BLUR_BEHIND);

dialog.show();

return dialog;

}

}

Now I am showing the usage of this above class, starting the AsyncTask after click on button , following: 

Button btn = (Button)findViewById(R.id.btn);

        btn.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

TimeConsumingTask t = new TimeConsumingTask();

    t.execute();

}

});

Inside Async Task:

 public class TimeConsumingTask extends AsyncTask<Void, String, Void> implements OnCancelListener {
    ProgressD mProgressD;    

    @Override
    protected void onPreExecute() {
        mProgressD= ProgressD.show(ProgressDemo.this,"Connecting", true,true,this);
    super.onPreExecute();
    }
   
@Override
protected Void doInBackground(Void... params) {
try {
Thread.sleep(10000);
} catch (InterruptedException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return null;
}
   

@Override
protected void onPostExecute(Void result) {
mProgressD.dismiss();
super.onPostExecute(result);
}

@Override
public void onCancel(DialogInterface dialog) {
this.cancel(true);
mProgressD.dismiss();
}
    }
    
That's all, in the similar way we can make many types of loaders , we just need to change the loader designs.