Android custom progress bar with .gif file

Question

In my app i have a custom progress bar

progress.xml

 <ProgressBar
    android:id="@+id/progressBar1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:progressDrawable="@drawable/loader" />

my gif file

My gif image

I want to create a progress bar with this image

In other word i want to show this image whenever i download data from server and remove it after downloading the data

or you can say , how to show this image as a progress bar

Android does not support git images . You have to use different images in Drawable folder and animate them. Follow this question :- [link](http://stackoverflow.com/questions/19900747/custom-progress-dialog-with-squre-image-rotation-with-asyntask) — Nishant Tanwar, Apr 08 '15 at 11:01
If you need to use gif file again, I would recommend you to use [this](http://abhinavasblog.blogspot.in/2014/04/animated-gif-imageview-library-for.html) library instead of using several images. It's too simple and efficient. :) — Tushar Gogna, Apr 08 '15 at 11:14
I' ve never tried it but I think you can use WebView instead of using external library. Good luck. — Mehmet Taha Meral, Dec 25 '15 at 12:19

score 16 · Accepted Answer · edited Jul 14 '20 at 15:30

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();`

score 1 · Answer 2 · answered Sep 08 '16 at 13:20

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

It gives slow animation than expected. Any solution? – HBB20 Mar 13 '17 at 11:19 — HBB20, Mar 13 '17 at 11:19

score 1 · Answer 3 · answered Dec 11 '17 at 10:23

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();
}

}

Hamed Jaliliani · Answer 4 · 2018-06-09T14:51:07.977

0

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!

edited Jun 09 '18 at 14:51

answered Feb 16 '18 at 18:37

Hamed Jaliliani

2,789
24
31

score 0 · Answer 5 · answered Apr 04 '20 at 15:50

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;
    }
}

Android custom progress bar with .gif file

5 Answers5

Linked