이 튜토리얼에서는 안드로이드(Android)에서 Drawable의 색상을 변경하는 방법을 단계별로 알아봅니다. 특히 AnimationDrawable을 활용해 두 개의 그라데이션 배경이 부드럽게 전환되는 애니메이션 효과를 구현하는 예제입니다.
프로젝트 생성하기
먼저 Android Studio에서 새 프로젝트를 생성합니다. 상단 메뉴에서 File → New Project를 선택하고, 필요한 모든 세부 정보를 입력하여 새 프로젝트를 만들어 주세요.
1단계: 레이아웃 파일 작성 (activity_main.xml)
res/layout/activity_main.xml 파일에 아래 코드를 추가합니다. LinearLayout의 배경으로 이후에 만들 background Drawable을 지정하는 것이 핵심입니다.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
xmlns:app="https://schemas.android.com/apk/res-auto"
xmlns:tools="https://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/background"
android:id="@+id/activity_main"
android:orientation="vertical"
tools:context=".MainActivity"
tools:ignore="InvalidId">
</LinearLayout>2단계: MainActivity에 애니메이션 적용
src/MainActivity.java 파일에 다음 코드를 추가합니다. 레이아웃의 배경을 AnimationDrawable로 가져온 뒤, 페이드 인/페이드 아웃 시간을 각각 4초로 설정하고 애니메이션을 시작합니다.
package com.app.sample;
import androidx.appcompat.app.AppCompatActivity;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.widget.LinearLayout;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
LinearLayout your_Layout = (LinearLayout) findViewById(R.id.activity_main);
AnimationDrawable animationDrawable = (AnimationDrawable) your_Layout.getBackground();
animationDrawable.setEnterFadeDuration(4000);
animationDrawable.setExitFadeDuration(4000);
animationDrawable.start();
}
}3단계: 애니메이션 리스트 정의 (background.xml)
res/drawable/background.xml 파일을 생성하고 아래 코드를 추가합니다. <animation-list> 안에 두 개의 그라데이션 Drawable을 등록하고, 각 항목의 지속 시간(duration)을 4000ms로 설정합니다.
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="https://schemas.android.com/apk/res/android">
<item
android:drawable="@drawable/gradient1"
android:duration="4000" />
<item
android:drawable="@drawable/gradient2"
android:duration="4000" />
</animation-list>4단계: 첫 번째 그라데이션 만들기 (gradient1.xml)
res/drawable/gradient1.xml 파일에 아래 코드를 추가합니다. 청록색(#21d6d3)에서 파란색(#044fab)으로 이어지는 대각선 방향(225도)의 그라데이션입니다.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="https://schemas.android.com/apk/res/android">
<gradient android:angle="225" android:endColor="#044fab" android:startColor="#21d6d3" />
</shape>5단계: 두 번째 그라데이션 만들기 (gradient2.xml)
res/drawable/gradient2.xml 파일에 아래 코드를 추가합니다. 회청색(#517f95)에서 보라색(#933c94)으로 전환되는 반대 방향(45도)의 그라데이션으로, 첫 번째 그라데이션과 자연스러운 색상 변화를 연출합니다.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="https://schemas.android.com/apk/res/android">
<gradient android:angle="45" android:endColor="#933c94" android:startColor="#517f95" />
</shape>6단계: 매니페스트 확인 (AndroidManifest.xml)
Manifests/AndroidManifest.xml 파일에 MainActivity가 정상적으로 등록되어 있는지 확인합니다.
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android" package="com.app.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(실행) 아이콘을 클릭하세요. 실행 옵션에서 본인의 모바일 기기를 선택하면, 화면에 두 개의 그라데이션이 4초 간격으로 부드럽게 전환되는 애니메이션이 나타나는 것을 확인할 수 있습니다.
핵심 포인트 정리
- AnimationDrawable: 여러 개의 Drawable 프레임을 순차적으로 재생해 애니메이션 효과를 만드는 클래스입니다.
- setEnterFadeDuration / setExitFadeDuration: 각 프레임이 나타나고 사라질 때의 페이드 시간을 밀리초 단위로 지정합니다.
- animation-list: 전환할 Drawable 목록과 각각의 지속 시간을 XML로 정의합니다.