Android custom progress bar with .gif file

Question

In my app i have a custom progress bar

progress.xml

Answer 1

Put your gif image in /res/raw folder

In your class declare mProgressDialog

TransparentProgressDialog mProgressDialog;

then use following code to show progress dialog

if (mProgressDialog == null)
    mProgressDialog = new TransparentProgressDialog(this);
if (mProgressDialog.isShowing())
    mProgressDialog.dismiss();
    mProgressDialog.setTitle(getResources().getString(R.string.title_progress_dialog));
    mProgressDialog.setCancelable(false);
    mProgressDialog.show();

Create a class TransparentProgressDialog where .gif can be loaded using Glide library.

public class TransparentProgressDialog extends Dialog {

private ImageView iv;

public TransparentProgressDialog(Context context) {
    super(context, R.style.TransparentProgressDialog);
    WindowManager.LayoutParams wlmp = getWindow().getAttributes();
    wlmp.gravity = Gravity.CENTER_HORIZONTAL;
    getWindow().setAttributes(wlmp);
    setTitle(null);
    setCancelable(false);
    setOnCancelListener(null);
    LinearLayout layout = new LinearLayout(context);
    layout.setOrientation(LinearLayout.VERTICAL);
    LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
    iv = new ImageView(context);
    GlideDrawableImageViewTarget imageViewTarget = new GlideDrawableImageViewTarget(iv);
    Glide.with(context).load(R.raw.gif_loader).into(imageViewTarget);

    layout.addView(iv, params);
    addContentView(layout, params);
}

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

}

Answer 2

Android progress dialog with gif

public class CustomProgressDialog extends AlertDialog {
public CustomProgressDialog(Context context) {
    super(context);
    getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));
}

@Override
public void show() {
    super.show();
    setContentView(R.layout.custom_progress_dialog);
 }
}

for more info http://www.androidcoding.in/2017/11/14/android-custom-progressbar/

Answer 3

I solved it before on this post easily: Custom progress bar with GIF (animated GIF) Use an ImageView that shows an Animated GIF and when need to show waiting make it visible and when works all will be done, make it Gone!

Answer 4

• First Conver your Gif image to png Slice image sequence.

• Declare Your Progress bar as Image view.

   <ImageView
       android:id="@+id/main_progress"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_gravity="center"
       android:visibility="visible" />
  

• Create .xml file in drawable folder using your .png sequence image those are generated from gif. In this case, Loading_web_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="@mipmap/wblod_0"
       android:duration="40" />
   <item
       android:drawable="@mipmap/wblod_1"
       android:duration="40" />
   <item
       android:drawable="@mipmap/wblod_2"
       android:duration="40" />
   <item
       android:drawable="@mipmap/wblod_3"
       android:duration="40" />
   <item
       android:drawable="@mipmap/wblod_4"
       android:duration="40" />
   <item
       android:drawable="@mipmap/wblod_5"
       android:duration="40" />
   <item
       android:drawable="@mipmap/wblod_6"
       android:duration="40" />
   <item
       android:drawable="@mipmap/wblod_7"
       android:duration="40" />
   <item
       android:drawable="@mipmap/wblod_8"
       android:duration="40" />
   <item
       android:drawable="@mipmap/wblod_9"
       android:duration="40" />
   <item
       android:drawable="@mipmap/wblod_10"
       android:duration="40" />
   <item
       android:drawable="@mipmap/wblod_11"
       android:duration="40" />
   </animation-list>
  

• In Main Activity set the code like,

   private AnimationDrawable animationDrawable;
   private ImageView mProgressBar;
   mProgressBar.setBackgroundResource(R.drawable.loading_web_animation);
   animationDrawable = (AnimationDrawable)mProgressBar.getBackground();
   mProgressBar.setVisibility(View.VISIBLE);
   animationDrawable.start();
   mProgressBar.setVisibility(View.GONE);
   animationDrawable.stop();`
  

Answer 5

My solution is to use an Animated icon.

1°) Create an XML "animated" in Drawable :

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/micro_1" android:duration="200" />
    <item android:drawable="@drawable/micro_2" android:duration="200" />
    <item android:drawable="@drawable/micro_3" android:duration="200" />
    <item android:drawable="@drawable/micro_4" android:duration="200" />
    <item android:drawable="@drawable/micro_3" android:duration="200" />
    <item android:drawable="@drawable/micro_2" android:duration="200" />
</animation-list>

2°) Put an imageview in your layout

3°) Put the following code in your activity :

import androidx.appcompat.app.AppCompatActivity;
import android.app.ProgressDialog;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.os.Handler;
import android.view.View;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {
    ProgressDialog progressBar;
    private int progressBarStatus = 0;
    private Handler progressBarHandler = new Handler();
    private ImageView micButton;
    //-- for testing progress bar
    private long fileSize = 0;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //-- declare animation
        final AnimationDrawable[] rocketAnimation = new AnimationDrawable[1];
        final ImageView micButton = findViewById(R.id.mic_button);
        micButton.setBackgroundResource(R.drawable.micro_1);
        //-- button listener
        micButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //-- init button with animation
                micButton.setBackgroundResource(R.drawable.mic_image);
                rocketAnimation[0] = (AnimationDrawable) micButton.getBackground();
                startprogress(rocketAnimation[0]);
            }
        });
    }


    public void startprogress(final AnimationDrawable rocketAnimation) {
         rocketAnimation.start();
        progressBar = new ProgressDialog(MainActivity.this);
         //--reset filesize for demo
        fileSize = 0;
        //-- thread for demo
        new Thread(new Runnable() {
            public void run() {
                while (progressBarStatus < 100) {
                    // process some tasks
                    progressBarStatus = doSomeTasks();
                    // your computer is too fast, sleep 1 second
                    try {
                        Thread.sleep(1000);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                    // Update the progress bar
                    progressBarHandler.post(new Runnable() {
                        public void run() {
                            progressBar.setProgress(progressBarStatus);
                        }
                    });
                }

                // ok, file is downloaded,
                if (progressBarStatus >= 100) {
                    // sleep 2 seconds, so that you can see the 100%
                    try {
                        Thread.sleep(2000);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }

                    // close the progress bar dialog
                    progressBar.dismiss();
                    if(rocketAnimation.isRunning()){
                        rocketAnimation.stop();
                    }
                }
            }
        }).start();

    }

    // file download simulator... a really simple
    public int doSomeTasks() {

        while (fileSize <= 1000000) { //1000000

            fileSize++;

            if (fileSize == 100000) {
                return 10;
            } else if (fileSize == 200000) {
                return 20;
            } else if (fileSize == 300000) {
                return 30;
            } else if (fileSize == 400000) {
                return 40;
            } else if (fileSize == 500000) {
                return 50;
            } else if (fileSize == 600000) {
                return 60;
            }
        }

        return 100;
    }
}

Answer 6

I think I'm late to answer this, But you can try this also.

XML

<FrameLayout
                android:id="@+id/progress_container"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true">
                <ProgressBar
                    android:id="@+id/circular_progress"
                    android:layout_width="100dp"
                    android:layout_height="100dp"
                    android:indeterminateDrawable="@drawable/my_progress_indeterminate"
                    />
                <TextView
                    android:id="@+id/circular_progress_counter"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:textSize="@dimen/text_size_big"
                    android:textColor="@color/white"
                    android:text="10"/>
            </FrameLayout>

my_progress_indeterminate.xml

<?xml version="1.0" encoding="utf-8"?>
<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/process_icon"
    android:pivotX="50%"
    android:pivotY="50%" />

In Java File login to show Timer. here I used 10 second timer.

private void progressTimer() {
        handler = new Handler();

        if (maxCount >= 0) {
            handler.postDelayed(new Runnable() {
                @Override
                public void run() {
                    /*
                    Logic to set Time inside Progressbar
                     */

                    mCircularProgressCounter.setText(maxCount+"");

                    maxCount = maxCount - 1;
                    pickupTimer();

                }
            }, 1000);
        } 
    }

Result