Android TextView로 카운트 애니메이션 구현하는 방법 (ValueAnimator 활용)

이 튜토리얼에서는 ValueAnimator를 활용해 Android TextView에 0부터 100까지 숫자가 올라가는 카운트 애니메이션을 구현하는 방법을 단계별로 알아봅니다.

1단계: 새 프로젝트 생성

Android Studio를 실행하고 File → New Project 메뉴로 이동한 뒤, 필요한 모든 세부 정보를 입력하여 새 프로젝트를 생성합니다.

2단계: 레이아웃 파일 작성

다음 코드를 res/layout/activity_main.xml에 추가합니다.

<?xml version = "1.0" encoding = "utf-8"?>
<RelativeLayout
    xmlns:android = "https://schemas.android.com/apk/res/android"
    xmlns:tools = "https://schemas.android.com/tools"
    android:layout_width = "match_parent"
    android:gravity = "center"
    android:layout_height = "match_parent">
    <TextView
        android:id = "@+id/text"
        android:textSize = "20dp"
        android:textAlignment = "center"
        android:layout_width = "match_parent"
        android:textColor = "#ff4500"
        android:layout_height = "wrap_content"
        android:singleLine = "true" />
</RelativeLayout>

위 코드에서는 화면 중앙에 배치된 TextView 하나를 사용해 0부터 100까지의 숫자가 변화하는 애니메이션을 보여줍니다. 텍스트 색상은 주황색(#ff4500)으로 지정하여 시각적으로 잘 보이도록 했습니다.

3단계: MainActivity 작성

다음 코드를 src/MainActivity.java에 추가합니다.

package com.example.andy.myapplication;
import android.animation.ValueAnimator;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        final TextView view = findViewById(R.id.text);
        ValueAnimator animator = new ValueAnimator();
        animator.setObjectValues(0, 100);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            public void onAnimationUpdate(ValueAnimator animation) {
                view.setText(String.valueOf(animation.getAnimatedValue()));
            }
        });
        animator.setDuration(10000); // 애니메이션 지속 시간 설정
        animator.start();
    }
}

핵심 코드 살펴보기

카운트 애니메이션의 핵심 로직은 다음과 같습니다.

ValueAnimator animator = new ValueAnimator();
animator.setObjectValues(0, 100);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    public void onAnimationUpdate(ValueAnimator animation) {
        view.setText(String.valueOf(animation.getAnimatedValue()));
    }
});
animator.setDuration(10000);
animator.start();

위 코드의 동작 원리는 다음과 같습니다.

setObjectValues(0, 100): 애니메이션이 시작 값 0에서 종료 값 100까지 진행되도록 범위를 지정합니다.
addUpdateListener: 애니메이션이 업데이트될 때마다 호출되는 리스너를 등록합니다. 현재 애니메이션 값을 가져와 TextView의 텍스트로 설정합니다.
setDuration(10000): 애니메이션 총 지속 시간을 밀리초 단위로 설정합니다. 여기서는 10,000ms, 즉 10초 동안 0부터 100까지 천천히 증가합니다.
start(): 애니메이션을 시작합니다.

지속 시간 값을 조절하면 카운트가 올라가는 속도를 자유롭게 변경할 수 있습니다. 예를 들어 2000으로 설정하면 2초 만에 0부터 100까지 빠르게 카운트됩니다.

앱 실행 및 결과 확인

이제 애플리케이션을 실행해 보겠습니다. 실제 Android 모바일 기기가 컴퓨터에 연결되어 있다고 가정합니다. Android Studio에서 프로젝트의 액티비티 파일 중 하나를 연 뒤, 툴바의 Run ▶ 아이콘을 클릭하세요. 옵션 목록에서 본인의 모바일 기기를 선택하면 기기 화면에 아래와 같은 결과가 표시됩니다.

실행 결과를 보면 TextView의 텍스트가 정적인 값이 아니라 0부터 100까지 부드럽게 증가하는 카운트 애니메이션으로 표시되는 것을 확인할 수 있습니다.

마무리

이처럼 ValueAnimator를 사용하면 별도의 외부 라이브러리 없이도 간단한 코드 몇 줄만으로 TextView 카운트 애니메이션을 구현할 수 있습니다. 이 기법은 점수 표시, 통계 대시보드, 다운로드 진행률 등 숫자가 변화하는 다양한 UI에 응용할 수 있으니 프로젝트에 적극 활용해 보시기 바랍니다.