Android custom progress bar with .gif file

问题

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

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

回答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

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

}

回答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!

来源：https://stackoverflow.com/questions/26302282/android-custom-progress-bar-with-gif-file

标签

android

android-custom-view

android-progressbar