안드로이드 앱에서 XML 파일로 애니메이션 만드는 방법 (단계별 가이드)

개요

이 튜토리얼에서는 안드로이드 앱에서 XML 파일을 사용해 애니메이션을 구현하는 방법을 단계별로 알아봅니다. XML 기반 애니메이션은 별도의 복잡한 코드 없이 리소스 파일만으로 페이드 인(fade-in), 줌(zoom), 블링크(blink) 같은 다양한 효과를 손쉽게 적용할 수 있다는 장점이 있습니다.

1단계: 새 프로젝트 생성

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

2단계: 레이아웃 작성 (activity_main.xml)

res/layout/activity_main.xml 파일에 아래 코드를 추가합니다. 화면 중앙에는 TextView를 배치하고, 하단에는 애니메이션을 시작하는 버튼을 배치했습니다.

<?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:padding="4dp"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <TextView
        android:textSize="24sp"
        android:textStyle="bold"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Have a Wonderful day!"
        android:layout_centerInParent="true"
        android:id="@+id/textView" />
    <Button
        android:id="@+id/button"
        android:layout_alignParentBottom="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Start Animation"/>
</RelativeLayout>

3단계: 애니메이션 리소스 디렉터리 및 파일 생성

새로운 안드로이드 리소스 디렉터리인 anim을 생성하고, 그 안에 아래에서 소개하는 애니메이션 리소스 파일들을 추가합니다.

Myanim.xml — 페이드 인 효과

투명도(alpha) 값을 0.0에서 1.0으로 서서히 변화시켜 페이드 인 효과를 구현합니다. 가속 인터폴레이터(accelerate_interpolator)를 사용해 자연스러운 속도 변화를 줍니다.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="https://schemas.android.com/apk/res/android" android:fillAfter="true">
    <alpha
        android:duration="1000"
        android:fromAlpha="0.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:toAlpha="1.0" />
</set>

zoom.xml — 확대(줌) 효과

중심점(pivotX, pivotY)을 기준으로 크기를 1배에서 3배까지 확대하는 스케일(scale) 애니메이션입니다.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="https://schemas.android.com/apk/res/android" android:fillAfter="true">
    <scale
        android:duration="1000"
        android:fromXScale="1"
        android:fromYScale="1"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="3"
        android:toYScale="3"></scale>
</set>

blink.xml — 깜빡임 효과

투명도를 반복적으로 변화시켜 무한히 깜빡이는 효과를 구현합니다. repeatCount 값이 "infinite"로 설정되어 있어 애니메이션이 계속해서 반복됩니다.

<?xml version="1.0" encoding="utf-8"?>
<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>

4단계: MainActivity.java 작성

src/MainActivity.java에 다음 코드를 추가합니다. AnimationUtils.loadAnimation() 메서드로 blink 애니메이션을 로드한 뒤, 버튼을 클릭하면 TextView가 화면에 나타나며 애니메이션이 시작됩니다.

import androidx.appcompat.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.TextView;
public class MainActivity extends AppCompatActivity implements
Animation.AnimationListener {
    TextView textView;
    Button button;
    Animation animation;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        textView = findViewById(R.id.textView);
        button = findViewById(R.id.button);
        animation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.blink);
        animation.setAnimationListener(this);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                textView.setVisibility(View.VISIBLE);
                textView.startAnimation(animation);
            }
        });
    }
    @Override
    public void onAnimationStart(Animation animation) {
    }
    @Override
    public void onAnimationEnd(Animation animation1) {
    }
    @Override
    public void onAnimationRepeat(Animation animation) {
    }
}

5단계: AndroidManifest.xml 설정

androidManifest.xml 파일에 아래 코드가 올바르게 포함되어 있는지 확인합니다.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android" package="app.com.sample">
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
            <activity android:name=".MainActivity">
                <intent-filter>
                    <action android:name="android.intent.action.MAIN" />
                    <category android:name="android.intent.category.LAUNCHER" />
                </intent-filter>
        </activity>
    </application>
</manifest>

앱 실행 및 결과 확인

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