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

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

Answer 1

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

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

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

Answer 3

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 4

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!