Android Custom Progress Dialog

Android Custom Progress Dialog

We are working on our one of android project. For this app, we need to fetch the data from the server. We used AsyncTask to fetch data from the server. During the execution of AsyncTask, we usually use an indeterminate progress dialogue to prevent further user's input. However, for this app, we don't want the default and boring progress dialog. To replace the default progress dialog, we created a custom one. Below is the demo what we are using for the app.

What have we done in the above demo?
We are using a custom layout with few images for our progress dialog. We are changing this image with time.
Let's start with the actual coding. 
For this demo, we used 10 different images.

Note: All images are with transparent background. First, five images are in white. We are using a dark background to display it’s contents correctly.

Create a progress_dialog.xml file. Below is the code for the XML file
 

Code

<?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:layout_gravity="center_horizontal"
    android:gravity="center_horizontal"
    android:background="@color/colorDark"
    >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" android:orientation="horizontal">

        <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp" android:layout_margin="5dp"
            android:src="@mipmap/ic_fruit_1"
            android:id="@+id/pd_iv_fruit_1"
            />

        <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp" android:layout_margin="5dp"
            android:src="@mipmap/ic_fruit_2"
            android:id="@+id/pd_iv_fruit_2"
            />

        <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp" android:layout_margin="5dp"
            android:src="@mipmap/ic_fruit_3"
            android:id="@+id/pd_iv_fruit_3"
            />

        <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp" android:layout_margin="5dp"
            android:src="@mipmap/ic_fruit_4"
            android:id="@+id/pd_iv_fruit_4"
            />

        <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp" android:layout_margin="5dp"
            android:src="@mipmap/ic_fruit_5"
            android:id="@+id/pd_iv_fruit_5"
            />
    </LinearLayout>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Yummy Fresh Fruits"
        android:textColor="@color/colorPrimary2"
        android:layout_gravity="center_horizontal"
        android:gravity="center_horizontal"
        />

</LinearLayout>

Next thing we are going to create ProgressDialog.java class which is going to control the image animation for custom progres_dialog.xml file.

Code

import android.os.Bundle;
import android.os.Handler;
import android.support.v4.app.DialogFragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.widget.ImageView;

/**
 * Created by mayank.sanghvi on 07-07-2016.
 */
public class ProgressDialog extends DialogFragment
{
    ImageView imageView_1,imageView_2,imageView_3,imageView_4,imageView_5;
    int position=0;
    @Override
    public View onCreateView(LayoutInflater inflater,
                             ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.progress_dialog, container);
        imageView_1 = (ImageView) view.findViewById(R.id.pd_iv_fruit_1);
        imageView_2 = (ImageView) view.findViewById(R.id.pd_iv_fruit_2);
        imageView_3 = (ImageView) view.findViewById(R.id.pd_iv_fruit_3);
        imageView_4 = (ImageView) view.findViewById(R.id.pd_iv_fruit_4);
        imageView_5 = (ImageView) view.findViewById(R.id.pd_iv_fruit_5);
        getDialog().setCancelable(false);
        getDialog().requestWindowFeature(Window.FEATURE_NO_TITLE);
        getDialog().setCanceledOnTouchOutside(false);
        return view;
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        changeImageSlider();
    }

    private void changeImageSlider() {
        position++;
        switch (position)
        {
            case 1:{ imageView_1.setImageResource(R.mipmap.ic_fruit_c_1); }break;
            case 2:{ imageView_2.setImageResource(R.mipmap.ic_fruit_c_2); }break;
            case 3:{ imageView_3.setImageResource(R.mipmap.ic_fruit_c_3); }break;
            case 4:{ imageView_4.setImageResource(R.mipmap.ic_fruit_c_4); }break;
            case 5:{ imageView_5.setImageResource(R.mipmap.ic_fruit_c_5); }break;
            case 6:{ imageView_1.setImageResource(R.mipmap.ic_fruit_1); }break;
            case 7:{ imageView_2.setImageResource(R.mipmap.ic_fruit_2); }break;
            case 8:{ imageView_3.setImageResource(R.mipmap.ic_fruit_3); }break;
            case 9:{ imageView_4.setImageResource(R.mipmap.ic_fruit_4); }break;
            case 10:{ imageView_5.setImageResource(R.mipmap.ic_fruit_5);position=0; }break;
            default:{position=0;}
        }


        final Handler handler = new Handler();
        handler.postDelayed(new Runnable() {
            @Override
            public void run() {
                changeImageSlider();
            }
        }, 500);
    }
}

Now our Progress dialog is ready next thing we are going to show it in our main activity. Below is the code of MainActivity.java file. Line 15 and 16 is used to display the progress dialog. We are also using delay execution to close our progress dialog after 15 sec.

Code

import android.os.Handler;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    ProgressDialog progressDialog;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        setContentView(R.layout.activity_main);
        progressDialog = new ProgressDialog();
        progressDialog.show(getSupportFragmentManager(),"Yummy Fresh Fruits");

        /* Below code is to hide the progress dialog after 15 seconds.*/

        final Handler handler = new Handler();
        handler.postDelayed(new Runnable() {
            @Override
            public void run() {
                progressDialog.dismiss();
            }
        }, 15000);
    }
}

Below is the code for the color.xml file. 

Code

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="colorDark">#212121</color>
    <color name="colorPrimary2">#FFFFFF</color>
</resources>

Finally, it's time to run our app.
I hope you enjoy this article. You may also like.

More Examples

0 Comments
Leave A Comment

Please login to post your valuable comments.

Join the newsletter

Get the latest vLemonn news first

share