- Android Working with XML Animations
- Basic steps to perform animation
- Step 1: Create xml that defines the animation
- Step 2: Load the animation
- Step 3: Set the animation listeners (Optional)
- Step 4: Finally start the animation
- Complete Code
- Important XML animation attributes
- Some useful animations
- Fade In
- Fade Out
- Cross Fading
- Blink
- Zoom In
- Zoom Out
- Rotate
- Slide Up
- Slide Down
- Bounce
- Sequential Animation
- Together Animation
- Android Fade In / Out Animations with Examples
- Create XML File to Define Animation
- Android Load and Start the Animation
- Android Fade In & Fade Out Animations Example
- activity_main.xml
- fade_in.xml
- fade_out.xml
- MainActivity.java
- Output of Android Fade In / Out Animations Example
Android Working with XML Animations
Adding animations to your app interface will give high quality feel to your android applications. Animations can be performed through either XML or android code. In this tutorial i explained how to do animations using XML notations. I will explain how to do the same using android java code in future tutorials. Here i covered basic android animations like fade in, fade out, scale, rotate, slide up, slide down etc.,
In the source code project provided in this tutorial, I wrote separate activity and XML for each animation. Download and play with the code to get familiar with the animations. Following are list of animations covered in this article.
Basic steps to perform animation
Following are the basic steps to perform an animation on any UI element. Creating animation is very simple, all it needs is creating necessary files and write small pieces of code.
Step 1: Create xml that defines the animation
Create an xml file which defines type of animation to perform. This file should be located under anim folder under res directory (res ⇒ anim ⇒ animation.xml). If you don’t have anim folder in your res directory create one. Following is example of simple fade in animation.
Step 2: Load the animation
Next in your activity create an object of Animation class. And load the xml animation using AnimationUtils by calling loadAnimation function.
Step 3: Set the animation listeners (Optional)
If you want to listen to animation events like start, end and repeat, your activity should implements AnimationListener. This step is optional. If you implement AnimationListener you will have to override following methods.
onAnimationStart – This will be triggered once the animation started
onAnimationEnd – This will be triggered once the animation is over
onAnimationRepeat – This will be triggered if the animation repeats
Step 4: Finally start the animation
You can start animation whenever you want by calling startAnimation on any UI element by passing the type of animation. In this example i am calling fade in animation on TextView.
Complete Code
Following is complete code for FadeInActivity
Important XML animation attributes
When working with animations it is better to have through knowledge about some of the important XML attributes which create major differentiation in animation behavior. Following are the important attributes you must known about.
android:duration – Duration of the animation in which the animation should complete
android:startOffset – It is the waiting time before an animation starts. This property is mainly used to perform multiple animations in a sequential manner
android:interpolator – It is the rate of change in animation
android:fillAfter – This defines whether to apply the animation transformation after the animation completes or not. If it sets to false the element changes to its previous state after the animation. This attribute should be use with node
android:repeatMode – This is useful when you want your animation to be repeat
android:repeatCount – This defines number of repetitions on animation. If you set this value to infinite then animation will repeat infinite times
Some useful animations
Following i am giving xml code to perform lot of useful animations. Try to assign different values to xml attributes to see change in animations.
Fade In
For fade in animation you can use tag which defines alpha value. Fade in animation is nothing but increasing alpha value from 0 to 1.
Fade Out
Fade out is exactly opposite to fade in, where we need to decrease the alpha value from 1 to 0
Cross Fading
Cross fading is performing fade in animation while other element is fading out. For this you don’t have to create separate animation file, you can just use fade_in.xml and fade_out.xml files.
In the following code i loaded fade in and fade out, then performed them on two different UI elements.
Blink
Blink animation is animating fade out or fade in animation in repetitive fashion. For this you will have to set android:repeatMode=”reverse” and android:repeatCount attributes.
Zoom In
For zoom use tag. Use pivotX=”50%” and pivotY=”50%” to perform zoom from the center of the element. Also you need to use fromXScale, fromYScale attributes which defines scaling of the object. Keep these value lesser than toXScale, toYScale
Zoom Out
Zoom out animation is same as zoom in but toXScale, toYScale values are lesser than fromXScale, fromYScale
Rotate
Rotate animation uses tag. For rotate animation required tags are android:fromDegrees and android:toDegrees which defines rotation angles.
Clock wise – use positive toDegrees value
Anti clock wise – use negative toDegrees value
In order to change position of object use tag. It uses fromXDelta, fromYDelta for X-direction and toXDelta, toYDelta attributes for Y-direction.
Slide Up
Sliding animation uses tag only. Slide up can be achieved by setting android:fromYScale=”1.0″ and android:toYScale=”0.0″
Slide Down
Slide down is exactly opposite to slide down animation. Just interchange android:fromYScale and android:toYScale values.
Bounce
Bounce is just an animation effect where animation ends in bouncing fashion. For this set android:interpolator value to @android:anim/bounce_interpolator. This bounce can be used with any kind animation. Following slide down example uses bounce effect.
Sequential Animation
If you want to perform multiple animation in a sequential manner you have to use android:startOffset to give start delay time. The easy way to calculate this value is to add the duration and startOffset values of previous animation. Following is a sequential animation where set of move animations performs in sequential manner.
Together Animation
Performing all animation together is just writing all animations one by one without using android:startOffset
I hope you like this tutorial, feel free to ask any kind of questions in the comment section.
Hi there! I am Founder at androidhive and programming enthusiast. My skills includes Android, iOS, PHP, Ruby on Rails and lot more. If you have any idea that you would want me to develop? Let’s talk: [email protected]
Источник
Android Fade In / Out Animations with Examples
In android, Fade In and Fade Out animations are used to change the appearance and behavior of the objects over a particular interval of time. The Fade In and Fade Out animations will provide a better look and feel for our applications.
Generally, the animations are useful when we want to notify users about the changes happening in our app, such as new content loaded or new actions available, etc.
To create an animation effect to the objects in our android application, we need to follow below steps.
Create XML File to Define Animation
We need to create an XML file that defines the type of animation to perform in a new folder anim under res directory (res à anim à fade_in.xml) with the required properties. In case, if anim folder does not exist in res directory, create a new one.
To use Fade In or Fade Out animations in our android applications, we need to define a new XML file with tag like as shown below.
For Fade In animation, we need to increase the alpha value from 0 to 1 like as shown below.
xml version= «1.0» encoding= «utf-8» ?>
set xmlns: android = «http://schemas.android.com/apk/res/android» android :interpolator= «@android:anim/linear_interpolator» >
alpha
android :duration= «2000»
android :fromAlpha= «0.1»
android :toAlpha= «1.0» >
alpha >
set >
For Fade Out animation, we need to decrease the alpha value from 1 to 0 like as shown below.
Once we are done with creation of required animation XML files, we need to load those animation files using different properties.
Android Load and Start the Animation
In android, we can perform animations by using AnimationUtils component methods such as loadAnimation(). Following is the code snippet of loading and starting an animation using loadAnimation() and startAnimation() methods.
Animation aniFade = AnimationUtils.loadAnimation(getApplicationContext(),R.anim. fade_in );
img .startAnimation(aniFade);
If you observe above code snippet, we are adding an animation to the image using loadAnimation() method. The second parameter in loadAnimation() method is the name of our animation xml file.
Here we used another method startAnimation() to apply the defined animation to imageview object.
Now we will see how to implement fade in and fade out animations for imageview on button click in android applications with examples.
Android Fade In & Fade Out Animations Example
Following is the example of implementing a fade in and fade out animations to fade in /out an image on button click in android applications.
Create a new android application using android studio and give names as FadeInOutExample. In case if you are not aware of creating an app in android studio check this article Android Hello World App.
Once we create an application, open activity_main.xml file from \res\layout folder path and write the code like as shown below.
activity_main.xml
xml version= «1.0» encoding= «utf-8» ?>
RelativeLayout xmlns: android = «http://schemas.android.com/apk/res/android»
android :layout_width= «match_parent»
android :layout_height= «match_parent»
android :paddingLeft= «10dp»
android :paddingRight= «10dp» >
ImageView android :id= «@+id/imgvw»
android :layout_width= «wrap_content»
android :layout_height= «250dp»
android :src= «@drawable/bangkok»/>
Button
android :id= «@+id/btnFadeIn»
android :layout_below= «@+id/imgvw»
android :layout_width= «wrap_content»
android :layout_height= «wrap_content»
android :text= «Fade In» android :layout_marginLeft= «100dp»/>
Button
android :id= «@+id/btnFadeOut»
android :layout_width= «wrap_content»
android :layout_height= «wrap_content»
android :layout_alignBottom= «@+id/btnFadeIn»
android :layout_toRightOf= «@+id/btnFadeIn»
android :text= «Fade Out»/>
RelativeLayout >
As discussed, we need to create an xml files to define fade in and fade out animations in new folder anim under res directory (res à anim à fade_in.xml, fade_out.xml) with required properties. In case anim folder not exists in res directory, create a new one.
Following is the example of creating an XML files (fade_in.xml, fade_out.xml) under anim folder to define fade in / out animation properties.
Now open fade_in.xml file and write the code to set fade in animation properties like as shown below.
fade_in.xml
xml version= «1.0» encoding= «utf-8» ?>
set xmlns: android = «http://schemas.android.com/apk/res/android» android :interpolator= «@android:anim/linear_interpolator» >
alpha
android :duration= «2000»
android :fromAlpha= «0.1»
android :toAlpha= «1.0» >
alpha >
set >
Now open fade_out.xml file and write the code to set fade out animation properties like as shown below
fade_out.xml
xml version= «1.0» encoding= «utf-8» ?>
set xmlns: android = «http://schemas.android.com/apk/res/android»
android :interpolator= «@android:anim/linear_interpolator» >
alpha
android :duration= «2000»
android :fromAlpha= «1.0»
android :toAlpha= «0.1» >
alpha >
set >
Now open your main activity file MainActivity.java from \java\com.tutlane.fadeinoutexample path and write the code like as shown below
MainActivity.java
package com.tutlane.fadeinoutexample;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.ImageView;
public class MainActivity extends AppCompatActivity <
private Button btnfIn ;
private Button btnfOut ;
private ImageView img ;
@Override
protected void onCreate(Bundle savedInstanceState) <
super .onCreate(savedInstanceState);
setContentView(R.layout. activity_main );
btnfIn = (Button)findViewById(R.id. btnFadeIn );
btnfOut = (Button)findViewById(R.id. btnFadeOut );
img = (ImageView)findViewById(R.id. imgvw );
btnfIn .setOnClickListener( new View.OnClickListener() <
@Override
public void onClick(View v) <
Animation animFadeIn = AnimationUtils.loadAnimation(getApplicationContext(),R.anim. fade_in );
img .startAnimation(animFadeIn);
>
>);
btnfOut .setOnClickListener( new View.OnClickListener() <
@Override
public void onClick(View v) <
Animation animFadeOut = AnimationUtils.loadAnimation(getApplicationContext(),R.anim. fade_out );
img .startAnimation(animFadeOut);
>
>);
>
>
If you observe above code, we are adding an animation to the image using loadAnimation() method and used startAnimation() method to apply the defined animation to imageview object.
Output of Android Fade In / Out Animations Example
When we run above program in android studio we will get the result like as shown below.
If you observe the above result, whenever we are clicking on Fade In or Fade Out buttons, the image size varies based on our functionality.
This is how we can implement fade in and fade in animations for imageview in android applications based on our requirements.
Источник
