หน้าเว็บ

วันอังคารที่ 21 กุมภาพันธ์ พ.ศ. 2555

HOW TO MAKE A LOADING ANIMATION IN ANDROID

HOW TO MAKE A LOADING ANIMATION IN ANDROID

HOW TO MAKE A LOADING ANIMATION IN ANDROID

When I was trying to build my new android app, I wanted to put a loading image while getting images in another thread. But I faced with the fact that animated gif images are not supported on android sdk, so you must make your own animation. There are two alternatives to accompolish this task.
100
  • Frame animation
This method works just like animated gif's work. You are creating frame by frame animations and then starting animation.
Create a xml file called loadinganim.xml under res/drawable directory with the content below.
view plaincopy to clipboardprint?
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <animation-list xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:oneshot="false">  
  4.     <item android:drawable="@drawable/load0" android:duration="60" />  
  5.     <item android:drawable="@drawable/load1" android:duration="60" />  
  6.     <item android:drawable="@drawable/load2" android:duration="60" />  
  7.     <item android:drawable="@drawable/load3" android:duration="60" />  
  8.     <item android:drawable="@drawable/load4" android:duration="60" />  
  9.     <item android:drawable="@drawable/load5" android:duration="60" />  
  10.     <item android:drawable="@drawable/load6" android:duration="60" />  
  11.     <item android:drawable="@drawable/load7" android:duration="60" />  
  12.     <item android:drawable="@drawable/load8" android:duration="60" />  
  13.     <item android:drawable="@drawable/load9" android:duration="60" />  
  14.     <item android:drawable="@drawable/load10" android:duration="60" />  
  15.     <item android:drawable="@drawable/load11" android:duration="60" />  
  16.     <item android:drawable="@drawable/load12" android:duration="60" />  
  17.     <item android:drawable="@drawable/load13" android:duration="60" />  
  18.     <item android:drawable="@drawable/load14" android:duration="60" />  
  19.     <item android:drawable="@drawable/load15" android:duration="60" />  
  20.     <item android:drawable="@drawable/load16" android:duration="60" />  
  21.     <item android:drawable="@drawable/load17" android:duration="60" />  
  22.     <item android:drawable="@drawable/load18" android:duration="60" />  
  23.     <item android:drawable="@drawable/load19" android:duration="60" />  
  24.     <item android:drawable="@drawable/load20" android:duration="60" />  
  25.     <item android:drawable="@drawable/load21" android:duration="60" />  
  26.     <item android:drawable="@drawable/load22" android:duration="60" />  
  27.     <item android:drawable="@drawable/load23" android:duration="60" />  
  28.     <item android:drawable="@drawable/load24" android:duration="60" />  
  29.     <item android:drawable="@drawable/load25" android:duration="60" />  
  30.     <item android:drawable="@drawable/load26" android:duration="60" />  
  31.     <item android:drawable="@drawable/load27" android:duration="60" />  
  32.     <item android:drawable="@drawable/load28" android:duration="60" />  
  33.     <item android:drawable="@drawable/load29" android:duration="60" />  
  34. </animation-list>  

Then put this imageview in your layout file where you want to show the loading image
view plaincopy to clipboardprint?
  1. <ImageView  
  2.         android:id="@+id/blankImageView"  
  3.         android:layout_width="wrap_content"  
  4.         android:layout_height="wrap_content"  
  5.         android:src="@drawable/load0"/>  
Then in your java code where you want to put
view plaincopy to clipboardprint?
  1. setContentView(R.layout.YOUR_LAYOUT_THAT_CONTAINS_IMAGE_VIEW_ABOVE);  
  2. final ImageView imageView = (ImageView) findViewById(R.id.blankImageView);   
  3. AnimationDrawable yourAnimation;   
  4. imageView.setBackgroundResource(R.drawable.loadinganim);   
  5. yourAnimation = (AnimationDrawable) imageView.getBackground();    
  6. imageView.setOnClickListener(new OnClickListener(){    
  7.             @Override   
  8.             public void onClick(View v)   
  9.             {                 yourAnimation.start();   
  10.             }   
  11. });  
When you click on the image it will start to animate. You should be careful about not putting start() code on your oncreate method, because while executing that method ui have not been created, so you won't see an animated image. As a result of this, I put start() code in a clicklistener. You can put it in your applications right place that is guaranteed to have a valid ui. (you can use your activities onWindowFocusChanged method) I have created a nice animation that you can see above, and you can download the images for the code above here.(Unzip and put these images under res/drawable folder)
  • Tween Animation
Other method is tween animation. We will use rotate for this purpose, you can use whatever you want. You can see a list of tween animations here
Create a xml called rotate.xml under res/anim folder, (if this folder is not there, create one)
view plaincopy to clipboardprint?
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <rotate  
  3.     xmlns:android="http://schemas.android.com/apk/res/android"  
  4.     android:fromDegrees="0"  
  5.     android:toDegrees="359"  
  6.     android:pivotX="50%"  
  7.     android:pivotY="50%"  
  8.     android:repeatCount="infinite"  
  9.     android:duration="1000"  
  10.     android:interpolator="@anim/linear_interpolator" />  
Then create a xml called linear_interpolator.xml under res/anim folder. This will generate a linear interpolator, so your animation will not slow down or speed up during animation.
view plaincopy to clipboardprint?
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <linearInterpolator xmlns:android="http://schemas.android.com/apk/res/android" />  
Then put this imageview in your layout file where you want to show the loading image

view plaincopy to clipboardprint?
  1. <ImageView  
  2.         android:id="@+id/blankImageView"  
  3.         android:layout_width="wrap_content"  
  4.         android:layout_height="wrap_content"  
  5.         android:src="@drawable/YOUR_DRAWABLE_THAT_WILL_ROTATE"/>  
Then in your java code where you want to put

view plaincopy to clipboardprint?
  1.  setContentView(R.layout.YOUR_LAYOUT_THAT_CONTAINS_IMAGE_VIEW_ABOVE);    
  2. final ImageView imageView = (ImageView) findViewById(R.id.blankImageView);   
  3. imageView.setOnClickListener(new OnClickListener(){      
  4. @Override  public void onClick(View v)  {    
  5. imageView.startAnimation(AnimationUtils.loadAnimation(YOUR_CONTEXT, R.anim.rotate));   
  6. }   
  7. });   

You can see animated image when you click on image. Again I put this to ensure that ui is created. Of course you will change this in your application logic.
You can get fun of your loading images. I found frame animation suits for me, you can use whatever you want.
Have a nice coding!
เขียนโดย ที่
ป้ายกำกับ: ,

ไม่มีความคิดเห็น:

แสดงความคิดเห็น

สมัครสมาชิก: ส่งความคิดเห็น (Atom)