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 server. We used AsyncTask to fetch data from server. During the execution of AsyncTask we a normally use a indeterminate progress dialog to prevent further user’s input. But for this app we don't want the default and boring progress dialog. To replace the default progress dialog we created a custom progress dialog. Below is the demo what we created for our new .

 

 

 


What we are doing in above demo.
We are using a custom layout with few images for our progress dialog. We are changing those image with time.

Let's start with the actual coding. 
For this demo we used 10 different images.

Note: All images are with transperent background. First five image is in white color. We are using dark background to display it’s contents correctly.

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

<?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.
 

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.

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 color.xml file. 

<?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 enyoy 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