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

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

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

Your Small Help will appreciated.

Fausta

Why do you want to use AsyncTask? onTouchEvent will gets executed only when you touch the screen. – Attlee

@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. – Fausta

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. – Attlee

Start animation at runtime androidforums.com/application-development/… – Attlee

@Brontok Okay I'll just do that and let you know, thanks for your help. – Fausta

protected void onProgressUpdate(Integer... progress) { // here you can try your animation } – Cappella

instead of asynctask you can use Threads. – Cappella

Answer 1

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

1. progress_sm_w00.png (Default blank transparent image)
2. progress_sm_w01.png (first animtion position)
3. progress_sm_w02.png
4. progress_sm_w03.png
5. progress_sm_w04.png
6. progress_sm_w05.png
7. progress_sm_w06.png
8. progress_sm_w07.png
9. progress_sm_w08.png
10. progress_sm_w09.png
11. progress_sm_w10.png
12. progress_sm_w11.png
13. progress_sm_w12.png (last animation position).

Example : one of these is below i have added

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.

Hope this will help you. Cheers!!

Fausta

Re step 2: The file needs to be in the folder res/drawable. – Deliadelian

upload those image files and share – Washin

Answer 2

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)

Arianna