Custom Progress Dialog With Squre Image Rotation With AsynTask

swiftBoy picture swiftBoy · Nov 11, 2013 · Viewed 29.3k times · Source

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.

Answer

swiftBoy picture swiftBoy · Nov 15, 2013

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

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