Custom Progress Dialog With Squre Image Rotation With AsynTask

Question

I have created a custom Loading Progress Dialog. And its working well.

I am rotating 12 square Images here is one of them

enter image description here

But when I want to use it with AsynTask, The animation not working.

My Sample code is below.

Activity Where I Start Loading... Animation and Stop.

MainActivity.java

public class MainActivity extends Activity {
    AnimationDrawable loadingViewAnim;
    TextView loadigText;
    ImageView loadigIcon;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        loadigText = (TextView) findViewById(R.id.textView1);
        loadigText.setText("Loading...");
        loadigText.setVisibility(View.GONE);

        loadigIcon = (ImageView) findViewById(R.id.imageView1);
        loadigIcon.setVisibility(View.GONE);

        loadigIcon.setBackgroundResource(R.anim.progress_animation_white);
        loadingViewAnim = (AnimationDrawable) loadigIcon.getBackground();


    }

    //When User Touch on Screen The Loading... Animation Starts With Image Rotation

    //If I start below code in AsynTask's onPreExecute method it doesn't work
    public boolean onTouchEvent(MotionEvent event)
      {
        loadigText.setVisibility(View.VISIBLE);
        loadigIcon.setVisibility(View.VISIBLE);

          if (event.getAction() == MotionEvent.ACTION_DOWN)
          {
             loadingViewAnim.start();
             return true;
          }
         return super.onTouchEvent(event);
      }
}

XML layout with Simple Text and Image for Progress Dialog.

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#000000"
    android:gravity="center"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/progress_sm_w01" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="Loading..."
        android:textColor="#ffffff"
        android:textSize="12sp" />

</LinearLayout>

Animation List having 12 Images I am Rotating with Angle & Time Duration

progress_animation_white.xml

<animation-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/progress_sm_w01" android:duration="50" />
    <item android:drawable="@drawable/progress_sm_w02" android:duration="50" />
    <item android:drawable="@drawable/progress_sm_w03" android:duration="50" />
    <item android:drawable="@drawable/progress_sm_w04" android:duration="50" />
    <item android:drawable="@drawable/progress_sm_w05" android:duration="50" />
    <item android:drawable="@drawable/progress_sm_w06" android:duration="50" />
    <item android:drawable="@drawable/progress_sm_w07" android:duration="50" />
    <item android:drawable="@drawable/progress_sm_w08" android:duration="50" />
    <item android:drawable="@drawable/progress_sm_w09" android:duration="50" />
    <item android:drawable="@drawable/progress_sm_w10" android:duration="50" />
    <item android:drawable="@drawable/progress_sm_w11" android:duration="50" />
    <item android:drawable="@drawable/progress_sm_w12" android:duration="50" />

    </animation-list>

Here is the result Loading Screen..

enter image description here

My Question is Is there anyway to Achieve the same Loading Animation with AsynTask.

Your Small Help will appreciated.

Why do you want to use AsyncTask? onTouchEvent will gets executed only when you touch the screen. — Jitender Dev, Nov 11 '13 at 07:18
@Brontok yeah Agree dear, but is there any way I can Rotate Square Images with AsynTask progress loading? **Because I want to use this Custom Progress Dialog with My Network Job and for that I am using AsynTask.** — swiftBoy, Nov 11 '13 at 07:19
Hmmm you must start your animation in onPreExecute() now perform your background operations in doInBackground() and stop your animation in onPostExecute() method. As you have defined 50ms of time in animation that should be done at runtime in java code. — Jitender Dev, Nov 11 '13 at 07:24
Start animation at runtime http://androidforums.com/application-development/11620-programmatic-frame-frame-animation-examle-animationdrawable.html — Jitender Dev, Nov 11 '13 at 07:25
@Brontok Okay I'll just do that and let you know, thanks for your help. — swiftBoy, Nov 11 '13 at 07:32
protected void onProgressUpdate(Integer... progress) { // here you can try your animation } — URAndroid, Nov 11 '13 at 07:39

score 33 · Accepted Answer · answered Nov 15 '13 at 09:31

Well thanks to @Brontok and @URAndroid for their help. I got solved my problem. So let me answer my own question, Hoe i achieved that Custom Loading animation

I have added few Image for Image Rotation Animation

Step 1 - in res/drawable folder

progress_sm_w00.png (Default blank transparent image)
progress_sm_w01.png (first animtion position)
progress_sm_w02.png
progress_sm_w03.png
progress_sm_w04.png
progress_sm_w05.png
progress_sm_w06.png
progress_sm_w07.png
progress_sm_w08.png
progress_sm_w09.png
progress_sm_w10.png
progress_sm_w11.png
progress_sm_w12.png (last animation position).

Example : one of these is below i have added

enter image description here

Step 2 - in res/anim folder created animation file name "loading_animation.xml"

<item android:drawable="@drawable/progress_sm_w01" android:duration="50" />
<item android:drawable="@drawable/progress_sm_w02" android:duration="50" />
<item android:drawable="@drawable/progress_sm_w03" android:duration="50" />
<item android:drawable="@drawable/progress_sm_w04" android:duration="50" />
<item android:drawable="@drawable/progress_sm_w05" android:duration="50" />
<item android:drawable="@drawable/progress_sm_w06" android:duration="50" />
<item android:drawable="@drawable/progress_sm_w07" android:duration="50" />
<item android:drawable="@drawable/progress_sm_w08" android:duration="50" />
<item android:drawable="@drawable/progress_sm_w09" android:duration="50" />
<item android:drawable="@drawable/progress_sm_w10" android:duration="50" />
<item android:drawable="@drawable/progress_sm_w11" android:duration="50" />
<item android:drawable="@drawable/progress_sm_w12" android:duration="50" />

</animation-list>

Step 3 - now created Custom Loading View layout in my Screen (Activity) wherever I need to show loading

example. XML layout for my Facebook login screen

<LinearLayout
         android:id="@+id/LinearLayout1"
         android:layout_width="fill_parent"
         android:layout_height="fill_parent"
         android:background="#0D000000"
         android:gravity="center"
         android:orientation="vertical"
         android:visibility="gone" >

    <ImageView
    android:id="@+id/imageView111"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/progress_sm_w00"
    android:visibility="gone" />

    <TextView
    android:id="@+id/textView111"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:text="Searching..."
    android:textColor="#ffffff"
    android:textSize="12sp"
    android:visibility="gone" />

</LinearLayout>

Step 4 - In java code (Activity) I created Loading view and after completing OnCreate method I started Asyn Task so my Animation get work properly.

public class ResultActivity extends Activity {

      private static final String TAG = "ResultActivity";
      private AnimationDrawable loadingViewAnim=null;
      private TextView loadigText = null;
      private ImageView loadigIcon = null;
      private LinearLayout loadingLayout = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_result);

        loadingLayout = (LinearLayout)findViewById(R.id.LinearLayout1);
        loadingLayout.setVisibility(View.GONE);

        loadigText = (TextView) findViewById(R.id.textView111);
        loadigText.setVisibility(View.GONE);

        loadigIcon = (ImageView) findViewById(R.id.imageView111);
        loadigIcon.setVisibility(View.GONE);

        loadigIcon.setBackgroundResource(R.anim.loading_animation);
        loadingViewAnim = (AnimationDrawable) loadigIcon.getBackground();

        // This line is to start Asyn Task only when OnCreate Method get completed, So Loading Icon Rotation Animation work properly
        loadigIcon.post(new Starter());

    }

    class Starter implements Runnable {
          public void run() {
            //start Asyn Task here   
            new LongOperation().execute("");
          }
      }

    private class LongOperation extends AsyncTask<String, Void, String> {

        @Override
        protected String doInBackground(String... params) {
            //ToDo your Network Job/Request etc. here 
            return "Executed";
        }

        @Override
        protected void onPostExecute(String result) {
        //ToDo with result you got from Task

        //Stop Loading Animation
            loadingLayout.setVisibility(View.GONE);
        loadigText.setVisibility(View.GONE);
        loadigIcon.setVisibility(View.GONE);
        loadingViewAnim.stop();
        }

        @Override
        protected void onPreExecute() {
        //Start  Loading Animation
        loadingLayout.setVisibility(View.VISIBLE);
        loadigText.setVisibility(View.VISIBLE);
        loadigIcon.setVisibility(View.VISIBLE);
        loadingViewAnim.start();
        }

        @Override
        protected void onProgressUpdate(Void... values) {}
    }
}

Step 5 - Here is the Result Screen with Progress Loading animation.

enter image description here

Hope this will help you. Cheers!!

Re step 2: The file needs to be in the folder `res/drawable`. — Leukipp, Jan 16 '16 at 01:47

score 0 · Answer 2 · edited May 23 '17 at 11:33

0

Maybe you can use GLIDE, for example

Glide.with(context)
    .load(imageUrl)
    .asGif()
    .placeholder(R.drawable.loading2)
    .crossFade()
    .into(imageView);

Show GIF file with Glide (image loading and caching library)

edited May 23 '17 at 11:33

Community

1
1

answered Apr 15 '16 at 19:14

David Hackro

3,652
6
41
61

Custom Progress Dialog With Squre Image Rotation With AsynTask

2 Answers2

Linked