Animation trong Android được sử dụng để tạo giao diện người dùng (UI) sống động, mang lại trải nghiệm trực quan và hấp dẫn hơn. Trong các ứng dụng Android, bạn có thể thực hiện animation thông qua XML hoặc viết trực tiếp bằng mã Java/Kotlin. Trong hướng dẫn này, chúng ta sẽ sử dụng mã XML để thêm các hiệu ứng animation vào ứng dụng.

Khái niệm Animation trong Android

Animation trong Android là quá trình tạo chuyển động và thay đổi hình dạng. Các loại animation cơ bản mà chúng ta sẽ tìm hiểu trong bài viết này bao gồm:

1. Fade In Animation
2. Fade Out Animation
3. Cross Fading Animation
4. Blink Animation
5. Zoom In Animation
6. Zoom Out Animation
7. Rotate Animation
8. Move Animation
9. Slide Up Animation
10. Slide Down Animation
11. Bounce Animation
12. Sequential Animation
13. Together Animation

Ví dụ Animation bằng XML trong Android

Chúng ta sẽ tạo một thư mục tài nguyên mới có tên anim trong thư mục res/, dùng để chứa tất cả các file XML định nghĩa logic animation. Dưới đây là một ví dụ file XML đơn giản mô tả logic animation trong Android: sample_animation.xml

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="<https://schemas.android.com/apk/res/android>"
  android:interpolator="@android:anim/accelerate_decelerate_interpolator"
  android:duration="300"
  android:fillAfter="true"
  android:fromXScale="0.0"
  android:fromYScale="0.0"
  android:toXScale="1.0"
  android:toYScale="1.0" />

• android:interpolator: Đây là thuộc tính xác định tốc độ thay đổi của animation theo thời gian. Chúng ta có thể tự định nghĩa interpolator riêng bằng cách sử dụng thời gian làm ràng buộc. Trong ví dụ XML trên, chúng ta đã gán một interpolator có sẵn (inbuilt interpolator).
• android:duration: Thời lượng của animation – tức là khoảng thời gian animation sẽ được thực thi. Trong ví dụ này là 300 mili giây. Đây cũng là khoảng thời gian lý tưởng để thể hiện hiệu ứng chuyển động mượt mà trên màn hình. Thời điểm bắt đầu và kết thúc của animation có thể được thiết lập thông qua các thuộc tính sau:

android:fromTRANSFORMATION
android:toTRANSFORMATION

• TRANSFORMATION: là phép biến đổi mà chúng ta muốn xác định. Trong trường hợp này, chúng ta bắt đầu với tỉ lệ x và y bằng 0 và kết thúc với tỉ lệ x và y bằng 1.
• android:fillAfter: thuộc tính này xác định liệu view có được hiển thị hay ẩn đi sau khi animation kết thúc. Trong đoạn mã trên, chúng ta đã đặt nó hiển thị (true). Nếu đặt là false, phần tử sẽ trở về trạng thái ban đầu sau khi animation hoàn tất.
• android:startOffset: là khoảng thời gian chờ trước khi animation bắt đầu. Thuộc tính này chủ yếu được sử dụng khi thực hiện nhiều animation theo thứ tự tuần tự.
• android:repeatMode: hữu ích khi bạn muốn lặp lại animation.
• android:repeatCount: xác định số lần lặp lại của animation. Nếu chúng ta đặt giá trị này là infinite (vô hạn) thì animation sẽ được lặp lại vô số lần.

Animation khi widget giao diện người dùng được nhấn

Mục tiêu của chúng ta là hiển thị một animation khi bất kỳ widget nào (ví dụ như TextView) được nhấn vào. Để làm điều đó, chúng ta cần sử dụng lớp Animation. Tệp XML chứa logic animation sẽ được tải bằng lớp AnimationUtils bằng cách gọi hàm loadAnimation(). Phần bên dưới minh họa cách triển khai này.

Animation animation;
animation = AnimationUtils.loadAnimation(getApplicationContext(),
                R.anim.sample_animation);

Để bắt đầu animation, chúng ta cần gọi hàm startAnimation() trên phần tử giao diện người dùng, như minh họa trong đoạn mã bên dưới.

sampleTextView.startAnimation(animation);

Ở đây, chúng ta thực hiện animation trên một thành phần textview bằng cách truyền kiểu Animation làm tham số.

Thiết lập Animation Listeners

Chúng ta chỉ cần phần này nếu muốn lắng nghe các sự kiện như bắt đầu, kết thúc hoặc lặp lại animation. Để làm điều đó, activity cần implement AnimationListener và override các phương thức sau:

• onAnimationStart: được kích hoạt khi animation bắt đầu
• onAnimationEnd: được kích hoạt khi animation kết thúc
• onAnimationRepeat: được kích hoạt nếu animation được lặp lại

Cấu trúc dự án Android Animation

Như bạn có thể thấy, chúng ta đã bao gồm các tệp XML cho hầu hết các loại animation chính được đề cập ở trên.

Ví dụ về mã XML Animation trong Android

Dưới đây là các đoạn mã ví dụ cho hầu hết các animation phổ biến trong Android.

Fade In Animation

fade_in.xml

<set xmlns:android="<https://schemas.android.com/apk/res/android>"
    android:fillAfter="true" >
&lt;alpha
    android:duration="1000"
    android:fromAlpha="0.0"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:toAlpha="1.0" /&gt;

</set>

Trong đoạn này, alpha đại diện cho độ mờ của một đối tượng. Một đối tượng có giá trị alpha thấp sẽ trong suốt hơn, còn một đối tượng có giá trị alpha cao thì ít trong suốt hơn, tức là đục hơn. Animation dạng “fade in” đơn giản là quá trình tăng giá trị alpha từ 0 đến 1.

Fade Out Animation

fade_out.xml

<set xmlns:android="<https://schemas.android.com/apk/res/android>"
    android:fillAfter="true" >
&lt;alpha
    android:duration="1000"
    android:fromAlpha="1.0"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:toAlpha="0.0" /&gt;

</set>

Fade out animation trong Android là quá trình ngược lại so với fade in, tức là giảm giá trị alpha từ 1 xuống 0.

Cross Fading Animation

Cross fading là hiệu ứng đồng thời: một TextView thực hiện animation fade in trong khi một TextView khác thực hiện fade out. Có thể đạt được hiệu ứng này bằng cách áp dụng fade_in.xml và fade_out.xml lần lượt cho hai TextView. Mã nguồn ví dụ sẽ được trình bày trong MainActivity.java.

Blink Animation

blink.xml

<set xmlns:android="<https://schemas.android.com/apk/res/android>">
    <alpha android:fromAlpha="0.0"
        android:toAlpha="1.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:duration="600"
        android:repeatMode="reverse"
        android:repeatCount="infinite"/>
</set>

Ở đây, hiệu ứng fade in và fade out được thực hiện lặp lại vô hạn, mỗi lần sẽ đảo ngược chế độ (reverse mode) so với lần trước.

Zoom In Animation zoom_in.xml

<set xmlns:android="<https://schemas.android.com/apk/res/android>"
    android:fillAfter="true" >
&lt;scale
    xmlns:android="&lt;https://schemas.android.com/apk/res/android&gt;"
    android:duration="1000"
    android:fromXScale="1"
    android:fromYScale="1"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toXScale="3"
    android:toYScale="3" &gt;
&lt;/scale&gt;

</set>

Chúng ta sử dụng pivotX="50%" và pivotY="50%" để thực hiện thu nhỏ từ tâm của phần tử.

Zoom Out Animation zoom_out.xml

<set xmlns:android="<https://schemas.android.com/apk/res/android>"
    android:fillAfter="true" >
&lt;scale
    xmlns:android="&lt;https://schemas.android.com/apk/res/android&gt;"
    android:duration="1000"
    android:fromXScale="1.0"
    android:fromYScale="1.0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toXScale="0.5"
    android:toYScale="0.5" &gt;
&lt;/scale&gt;

</set>

Lưu ý rằng android:from và android:to có giá trị ngược nhau trong zoom_in.xml và zoom_out.xml.

Rotate Animation rotate.xml

<set xmlns:android="<https://schemas.android.com/apk/res/android>">
    <rotate android:fromDegrees="0"
        android:toDegrees="360"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="600"
        android:repeatMode="restart"
        android:repeatCount="infinite"
        android:interpolator="@android:anim/cycle_interpolator"/>
</set>

Thẻ from/toDegrees được sử dụng ở đây để xác định góc độ, và một bộ nội suy chu kỳ (cyclic interpolator) được sử dụng.

Move Animation move.xml

<set
    xmlns:android="<https://schemas.android.com/apk/res/android>"
    android:interpolator="@android:anim/linear_interpolator"
    android:fillAfter="true">
<translate
android:fromXDelta="0%p"
android:toXDelta="75%p"
android:duration="800" />
</set>

Slide Up Animation slide_up.xml

<set xmlns:android="<https://schemas.android.com/apk/res/android>"
    android:fillAfter="true" >
&lt;scale
    android:duration="500"
    android:fromXScale="1.0"
    android:fromYScale="1.0"
    android:interpolator="@android:anim/linear_interpolator"
    android:toXScale="1.0"
    android:toYScale="0.0" /&gt;

</set>

Điều này được thực hiện bằng cách thiết lập android:fromYScale=”1.0″ và android:toYScale=”0.0″ bên trong thẻ scale.

Slide Down Animation slide_down.xml

<set xmlns:android="<https://schemas.android.com/apk/res/android>"
    android:fillAfter="true">
&lt;scale
    android:duration="500"
    android:fromXScale="1.0"
    android:fromYScale="0.0"
    android:toXScale="1.0"
    android:toYScale="1.0" /&gt;

</set>

Bounce Animation bounce.xml

<set xmlns:android="<https://schemas.android.com/apk/res/android>"
    android:fillAfter="true"
    android:interpolator="@android:anim/bounce_interpolator">
&lt;scale
    android:duration="500"
    android:fromXScale="1.0"
    android:fromYScale="0.0"
    android:toXScale="1.0"
    android:toYScale="1.0" /&gt;

</set>

Sequential Animation sequential.xml

<set xmlns:android="<https://schemas.android.com/apk/res/android>"
    android:fillAfter="true"
    android:interpolator="@android:anim/linear_interpolator" >
&lt;!-- Move --&gt;
&lt;translate
    android:duration="800"
    android:fillAfter="true"
    android:fromXDelta="0%p"
    android:startOffset="300"
    android:toXDelta="75%p" /&gt;
&lt;translate
    android:duration="800"
    android:fillAfter="true"
    android:fromYDelta="0%p"
    android:startOffset="1100"
    android:toYDelta="70%p" /&gt;
&lt;translate
    android:duration="800"
    android:fillAfter="true"
    android:fromXDelta="0%p"
    android:startOffset="1900"
    android:toXDelta="-75%p" /&gt;
&lt;translate
    android:duration="800"
    android:fillAfter="true"
    android:fromYDelta="0%p"
    android:startOffset="2700"
    android:toYDelta="-70%p" /&gt;

&lt;!-- Rotate 360 degrees --&gt;
&lt;rotate
    android:duration="1000"
    android:fromDegrees="0"
    android:interpolator="@android:anim/cycle_interpolator"
    android:pivotX="50%"
    android:pivotY="50%"
    android:startOffset="3800"
    android:repeatCount="infinite"
    android:repeatMode="restart"
    android:toDegrees="360" /&gt;

</set>

Một giá trị android:startOffset khác được sử dụng cho các chuyển động để đảm bảo chúng diễn ra tuần tự.

Together Animation together.xml

<set xmlns:android="<https://schemas.android.com/apk/res/android>"
    android:fillAfter="true"
    android:interpolator="@android:anim/linear_interpolator" >
&lt;!-- Move --&gt;
&lt;scale
    xmlns:android="&lt;https://schemas.android.com/apk/res/android&gt;"
    android:duration="4000"
    android:fromXScale="1"
    android:fromYScale="1"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toXScale="4"
    android:toYScale="4" &gt;
&lt;/scale&gt;

&lt;!-- Rotate 180 degrees --&gt;
&lt;rotate
    android:duration="500"
    android:fromDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:repeatCount="infinite"
    android:repeatMode="restart"
    android:toDegrees="360" /&gt;

</set>

Code

Layout activity_main.xml bao gồm một ScrollView và RelativeLayout (chúng ta sẽ thảo luận phần này trong một hướng dẫn sau), trong đó mỗi loại animation được kích hoạt trên văn bản thông qua các nút tương ứng. Tệp xml được trình bày bên dưới: activity_main.xml

<ScrollView xmlns:android="<https://schemas.android.com/apk/res/android>"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
&lt;RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"&gt;

    &lt;Button
            android:id="@+id/btnFadeIn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:text="Fade In" /&gt;

    &lt;TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:text="Fade In"
            android:id="@+id/txt_fade_in"
        android:layout_alignBottom="@+id/btnFadeIn"
        android:layout_alignLeft="@+id/txt_fade_out"
        android:layout_alignStart="@+id/txt_fade_out" /&gt;

    &lt;Button
            android:id="@+id/btnFadeOut"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:layout_below="@id/btnFadeIn"
            android:text="Fade Out" /&gt;

    &lt;Button
            android:id="@+id/btnCrossFade"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:layout_below="@id/btnFadeOut"
            android:text="Cross Fade" /&gt;

    &lt;TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:text="Cross Fade In"
            android:id="@+id/txt_out"
            android:visibility="gone"
            android:layout_gravity="center_horizontal"
            android:layout_alignTop="@+id/txt_in"
            android:layout_alignLeft="@+id/txt_in"
            android:layout_alignStart="@+id/txt_in" /&gt;

    &lt;Button
            android:id="@+id/btnBlink"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:layout_below="@id/btnCrossFade"
            android:text="Blink" /&gt;

    &lt;Button
            android:id="@+id/btnZoomIn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:layout_below="@id/btnBlink"
            android:text="Zoom In" /&gt;

    &lt;TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:text="Blink"
            android:id="@+id/txt_blink"
            android:layout_gravity="center_horizontal"
        android:layout_alignBottom="@+id/btnBlink"
        android:layout_alignLeft="@+id/txt_zoom_in"
        android:layout_alignStart="@+id/txt_zoom_in" /&gt;

    &lt;Button
            android:id="@+id/btnZoomOut"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:layout_below="@id/btnZoomIn"
            android:text="Zoom Out" /&gt;

    &lt;Button
            android:id="@+id/btnRotate"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:layout_below="@id/btnZoomOut"
            android:text="Rotate" /&gt;

    &lt;Button
            android:id="@+id/btnMove"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:layout_below="@id/btnRotate"
            android:text="Move" /&gt;

    &lt;Button
            android:id="@+id/btnSlideUp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:layout_below="@id/btnMove"
            android:text="Slide Up" /&gt;

    &lt;TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:text="Fade Out"
            android:id="@+id/txt_fade_out"
            android:layout_gravity="center_horizontal"
        android:layout_alignBottom="@+id/btnFadeOut"
        android:layout_alignLeft="@+id/txt_in"
        android:layout_alignStart="@+id/txt_in" /&gt;

    &lt;Button
            android:id="@+id/btnSlideDown"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:layout_below="@id/btnSlideUp"
            android:text="Slide Down" /&gt;

    &lt;Button
            android:id="@+id/btnBounce"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:layout_below="@id/btnSlideDown"
            android:text="Bounce" /&gt;

    &lt;Button
            android:id="@+id/btnSequential"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:layout_below="@id/btnBounce"
            android:text="Sequential Animation" /&gt;

    &lt;Button
            android:id="@+id/btnTogether"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/btnSequential"
            android:layout_margin="5dp"
            android:text="Together Animation" /&gt;

    &lt;TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:text="Cross Fade Out"
            android:id="@+id/txt_in"
            android:layout_gravity="center_horizontal"
        android:layout_alignBottom="@+id/btnCrossFade"
        android:layout_alignLeft="@+id/txt_blink"
        android:layout_alignStart="@+id/txt_blink" /&gt;

    &lt;TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="Zoom In"
        android:id="@+id/txt_zoom_in"
        android:layout_alignBottom="@+id/btnZoomIn"
        android:layout_alignLeft="@+id/txt_zoom_out"
        android:layout_alignStart="@+id/txt_zoom_out" /&gt;

    &lt;TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="Zoom Out"
        android:id="@+id/txt_zoom_out"
        android:layout_alignBottom="@+id/btnZoomOut"
        android:layout_toRightOf="@+id/btnSequential"
        android:layout_toEndOf="@+id/btnSequential" /&gt;

    &lt;TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="Rotate"
        android:id="@+id/txt_rotate"
        android:layout_above="@+id/btnMove"
        android:layout_toRightOf="@+id/btnSequential"
        android:layout_toEndOf="@+id/btnSequential" /&gt;

    &lt;TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="Move"
        android:id="@+id/txt_move"
        android:layout_alignBottom="@+id/btnMove"
        android:layout_alignLeft="@+id/txt_slide_up"
        android:layout_alignStart="@+id/txt_slide_up" /&gt;

    &lt;TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="Slide Up"
        android:id="@+id/txt_slide_up"
        android:layout_alignBottom="@+id/btnSlideUp"
        android:layout_toRightOf="@+id/btnSequential"
        android:layout_toEndOf="@+id/btnSequential" /&gt;

    &lt;TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="Slide Down"
        android:id="@+id/txt_slide_down"
        android:layout_alignBottom="@+id/btnSlideDown"
        android:layout_alignLeft="@+id/txt_slide_up"
        android:layout_alignStart="@+id/txt_slide_up" /&gt;

    &lt;TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="Bounce"
        android:id="@+id/txt_bounce"
        android:layout_alignBottom="@+id/btnBounce"
        android:layout_alignLeft="@+id/txt_slide_down"
        android:layout_alignStart="@+id/txt_slide_down" /&gt;

    &lt;TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="Sequential"
        android:id="@+id/txt_seq"
        android:layout_alignBottom="@+id/btnSequential"
        android:layout_alignLeft="@+id/txt_bounce"
        android:layout_alignStart="@+id/txt_bounce" /&gt;

    &lt;TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="Together"
        android:id="@+id/txt_tog"
        android:layout_alignBottom="@+id/btnTogether"
        android:layout_toRightOf="@+id/btnSequential"
        android:layout_toEndOf="@+id/btnSequential" /&gt;

&lt;/RelativeLayout&gt;

</ScrollView>

Tóm lại, RelativeLayout sắp xếp các thành phần giao diện UI dựa trên vị trí tương đối với nhau. Tệp MainActivity.java chứa các onclick listener (trình lắng nghe sự kiện nhấp chuột) cho từng nút tương ứng với loại animation của nó. Mã nguồn được trình bày bên dưới.

package com.journaldev.animations;
import android.app.Activity;
import android.content.Intent;
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.TextView;
public class MainActivity extends Activity {
Button btnFadeIn, btnFadeOut, btnCrossFade, btnBlink, btnZoomIn,
        btnZoomOut, btnRotate, btnMove, btnSlideUp, btnSlideDown,
        btnBounce, btnSequential, btnTogether;
Animation animFadeIn,animFadeOut,animBlink,animZoomIn,animZoomOut,animRotate
        ,animMove,animSlideUp,animSlideDown,animBounce,animSequential,animTogether,animCrossFadeIn,animCrossFadeOut;
TextView txtFadeIn,txtFadeOut,txtBlink,txtZoomIn,txtZoomOut,txtRotate,txtMove,txtSlideUp,
            txtSlideDown,txtBounce,txtSeq,txtTog,txtIn,txtOut;

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

    btnFadeIn = (Button) findViewById(R.id.btnFadeIn);
    btnFadeOut = (Button) findViewById(R.id.btnFadeOut);
    btnCrossFade = (Button) findViewById(R.id.btnCrossFade);
    btnBlink = (Button) findViewById(R.id.btnBlink);
    btnZoomIn = (Button) findViewById(R.id.btnZoomIn);
    btnZoomOut = (Button) findViewById(R.id.btnZoomOut);
    btnRotate = (Button) findViewById(R.id.btnRotate);
    btnMove = (Button) findViewById(R.id.btnMove);
    btnSlideUp = (Button) findViewById(R.id.btnSlideUp);
    btnSlideDown = (Button) findViewById(R.id.btnSlideDown);
    btnBounce = (Button) findViewById(R.id.btnBounce);
    btnSequential = (Button) findViewById(R.id.btnSequential);
    btnTogether = (Button) findViewById(R.id.btnTogether);
    txtFadeIn=(TextView)findViewById(R.id.txt_fade_in);
    txtFadeOut=(TextView)findViewById(R.id.txt_fade_out);
    txtBlink=(TextView)findViewById(R.id.txt_blink);
    txtZoomIn=(TextView)findViewById(R.id.txt_zoom_in);
    txtZoomOut=(TextView)findViewById(R.id.txt_zoom_out);
    txtRotate=(TextView)findViewById(R.id.txt_rotate);
    txtMove=(TextView)findViewById(R.id.txt_move);
    txtSlideUp=(TextView)findViewById(R.id.txt_slide_up);
    txtSlideDown=(TextView)findViewById(R.id.txt_slide_down);
    txtBounce=(TextView)findViewById(R.id.txt_bounce);
    txtSeq=(TextView)findViewById(R.id.txt_seq);
    txtTog=(TextView)findViewById(R.id.txt_tog);
    txtIn=(TextView)findViewById(R.id.txt_in);
    txtOut=(TextView)findViewById(R.id.txt_out);
    animFadeIn = AnimationUtils.loadAnimation(getApplicationContext(),
            R.anim.fade_in);
	
    animFadeIn = AnimationUtils.loadAnimation(getApplicationContext(),
            R.anim.fade_in);
    // fade in
    btnFadeIn.setOnClickListener(new View.OnClickListener() {

        @Override
        public void onClick(View v) {
            txtFadeIn.setVisibility(View.VISIBLE);
            txtFadeIn.startAnimation(animFadeIn);
        }
    });

    animFadeOut = AnimationUtils.loadAnimation(getApplicationContext(),
            R.anim.fade_out);

    // fade out
    btnFadeOut.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            txtFadeOut.setVisibility(View.VISIBLE);
            txtFadeOut.startAnimation(animFadeOut);
        }
    });
    animCrossFadeIn = AnimationUtils.loadAnimation(getApplicationContext(),
            R.anim.fade_in);
    animCrossFadeOut = AnimationUtils.loadAnimation(getApplicationContext(),
            R.anim.fade_out);
    // cross fade
    btnCrossFade.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            txtOut.setVisibility(View.VISIBLE);
            // start fade in animation
            txtOut.startAnimation(animCrossFadeIn);

            // start fade out animation
            txtIn.startAnimation(animCrossFadeOut);
        }
    });
    animBlink = AnimationUtils.loadAnimation(getApplicationContext(),
            R.anim.blink);
    // blink
    btnBlink.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            txtBlink.setVisibility(View.VISIBLE);
            txtBlink.startAnimation(animBlink);
        }
    });

    animZoomIn = AnimationUtils.loadAnimation(getApplicationContext(),
            R.anim.zoom_in);
    // Zoom In
    btnZoomIn.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            txtZoomIn.setVisibility(View.VISIBLE);
            txtZoomIn.startAnimation(animZoomIn);
        }
    });
    animZoomOut = AnimationUtils.loadAnimation(getApplicationContext(),
            R.anim.zoom_out);
    // Zoom Out
    btnZoomOut.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            txtZoomOut.setVisibility(View.VISIBLE);
            txtZoomOut.startAnimation(animZoomOut);
        }
    });
    animRotate = AnimationUtils.loadAnimation(getApplicationContext(),
            R.anim.rotate);

    // Rotate
    btnRotate.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            txtRotate.startAnimation(animRotate);
        }
    });
    animMove = AnimationUtils.loadAnimation(getApplicationContext(),
            R.anim.move);
    // Move
    btnMove.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            txtMove.startAnimation(animMove);
        }
    });
    animSlideUp = AnimationUtils.loadAnimation(getApplicationContext(),
            R.anim.slide_up);
    // Slide Up
    btnSlideUp.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            txtSlideUp.startAnimation(animSlideUp);
        }
    });
    animSlideDown = AnimationUtils.loadAnimation(getApplicationContext(),
            R.anim.slide_down);
    // Slide Down
    btnSlideDown.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            txtSlideDown.startAnimation(animSlideDown);
        }
    });
    animBounce = AnimationUtils.loadAnimation(getApplicationContext(),
            R.anim.bounce);
    // Slide Down
    btnBounce.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            txtBounce.startAnimation(animBounce);
        }
    });
    animSequential = AnimationUtils.loadAnimation(getApplicationContext(),
            R.anim.sequential);
    // Sequential
    btnSequential.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {

                    txtSeq.startAnimation(animSequential);
        }
    });
    animTogether = AnimationUtils.loadAnimation(getApplicationContext(),
            R.anim.together);

    // Together
    btnTogether.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            txtTog.startAnimation(animTogether);
        }
    });

}

}

Như đã đề cập trước đó, mỗi animation cho TextView được bắt đầu bằng cách gọi đối tượng animation tương ứng, trong đó logic animation được tải bằng phương thức AnimationUtils.loadAnimation(). Animation crossFade bao gồm hai TextView, một cái mờ dần biến mất (fade out) và cái còn lại hiện dần lên (fade in). Bên dưới là một đoạn video ngắn trình bày tất cả các animation trong ứng dụng của chúng ta.

Animation together được minh họa trong hình phía trên. Lưu ý rằng các animation này khi chạy trên trình giả lập có thể không mượt, vì vậy nên chạy ứng dụng trên thiết bị thật.