안드로이드에서 애니메이션 그라데이션 배경 만드는 방법 완벽 가이드

본격적인 예제에 들어가기 전에, 그라데이션 색상(Gradient Color)이 무엇인지 먼저 알아보겠습니다. 위키백과에 따르면, 컴퓨터 그래픽스 분야에서 컬러 그라데이션(색상 경사 또는 색상 진행이라고도 함)은 위치에 따라 변화하는 일련의 색상 범위를 지정하는 것으로, 주로 특정 영역을 채우는 데 사용됩니다. 실제로 많은 윈도우 매니저에서 화면 배경을 그라데이션으로 지정할 수 있습니다.

이 글에서는 안드로이드 앱에서 애니메이션이 적용된 그라데이션 배경을 만드는 방법을 단계별로 살펴보겠습니다.

1단계: 새 프로젝트 생성

Android Studio를 실행하고 File → New Project 메뉴로 이동한 뒤, 새 프로젝트를 만들기 위해 필요한 모든 정보를 입력합니다.

2단계: 레이아웃 및 드로어블 리소스 작성

res/layout/activity_main.xml 파일에 아래 코드를 추가합니다.

<?xml version = "1.0" encoding = "utf-8"?>
<android.support.constraint.ConstraintLayout 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:id = "@+id/constraintLayout"
    android:layout_width = "match_parent"
    android:layout_height = "match_parent"
    android:background = "@drawable/gradient_animation"
    tools:context = ".MainActivity">
    <!-- 여기에 원하는 레이아웃을 배치하세요 -->
    <TextView
        android:layout_width = "368dp"
        android:layout_height = "520dp"
        android:layout_marginBottom = "8dp"
        android:layout_marginLeft = "8dp"
        android:layout_marginRight = "8dp"
        android:layout_marginTop = "8dp"
        android:gravity = "center"
        android:text = "@string/app_name"
        android:textAlignment = "center"
        android:textColor = "@android:color/background_light"
        android:textSize = "30sp"
        android:textStyle = "bold"
        app:layout_constraintBottom_toBottomOf = "parent"
        app:layout_constraintLeft_toLeftOf = "parent"
        app:layout_constraintRight_toRightOf = "parent"
        app:layout_constraintTop_toTopOf = "parent"
        tools:text = "@string/app_name"/>
</android.support.constraint.ConstraintLayout>

위 코드에서는 배경(background)으로 gradient_animation이라는 드로어블을 지정했습니다. 이제 drawable 폴더 안에 gradient_animation.xml 파일을 새로 만들고 다음 코드를 추가합니다.

<?xml version = "1.0" encoding = "utf-8"?>
<animation-list xmlns:android = "https://schemas.android.com/apk/res/android">
    <item
        android:drawable = "@drawable/drawable_purple_gradient"
        android:duration = "3000" />
    <item
        android:drawable = "@drawable/drawable_amber_gradient"
        android:duration = "3000" />
    <item
        android:drawable = "@drawable/drawable_green_gradient"
        android:duration = "3000" />
    <item
        android:drawable = "@drawable/drawable_red_gradient"
        android:duration = "3000" />
</animation-list>

위의 animation-list에는 4개의 하위 드로어블이 등록되어 있으며, 각 항목마다 지속 시간(duration)이 설정되어 있습니다. 설정된 시간이 지나면 배경이 자동으로 다음 그라데이션으로 전환됩니다.

보라색 그라데이션 만들기

drawable_purple_gradient는 보라색 계열의 배경을 담당합니다. drawable 폴더에 drawable_purple_gradient.xml 파일을 생성하고 아래 코드를 추가합니다.

<?xml version = "1.0" encoding = "utf-8"?>
<shape xmlns:android = "https://schemas.android.com/apk/res/android">
    <gradient
        android:angle = "90"
        android:endColor = "#D500F9"
        android:startColor = "#4A148C" />
</shape>

나머지 그라데이션 파일 만들기

같은 방식으로 drawable 폴더에 drawable_amber_gradient.xml, drawable_green_gradient.xml, drawable_red_gradient.xml 파일을 차례로 생성하고 아래 코드를 각각 추가합니다.

drawable_amber_gradient.xml

<?xml version = "1.0" encoding = "utf-8"?>
<shape xmlns:android = "https://schemas.android.com/apk/res/android">
    <gradient
        android:angle = "135"
        android:endColor = "#FFC400"
        android:startColor = "#FF6F00" />
</shape>

drawable_green_gradient.xml

<?xml version = "1.0" encoding = "utf-8"?>
<shape xmlns:android = "https://schemas.android.com/apk/res/android">
    <gradient
        android:angle = "0"
        android:endColor = "#00E676"
        android:startColor = "#1B5E20"/>
</shape>

drawable_red_gradient.xml

<?xml version = "1.0" encoding = "utf-8"?>
<shape xmlns:android = "https://schemas.android.com/apk/res/android">
    <gradient
        android:angle = "45"
        android:endColor = "#FF1744"
        android:startColor = "#B71C1C" />
</shape>

3단계: MainActivity.java 코드 작성

src/MainActivity.java 파일에 아래 코드를 추가합니다.

package com.example.andy.myapplication;

import android.graphics.drawable.AnimationDrawable;
import android.support.constraint.ConstraintLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {
    private ConstraintLayout constraintLayout;
    private AnimationDrawable animationDrawable;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        constraintLayout = (ConstraintLayout) findViewById(R.id.constraintLayout);
        animationDrawable = (AnimationDrawable) constraintLayout.getBackground();
        animationDrawable.setEnterFadeDuration(3000);
        animationDrawable.setExitFadeDuration(2000);
    }
    @Override
    protected void onResume() {
        super.onResume();
        if (animationDrawable != null && !animationDrawable.isRunning()) {
            animationDrawable.start();
        }
    }
    @Override
    protected void onPause() {
        super.onPause();
        if (animationDrawable != null && animationDrawable.isRunning()) {
            animationDrawable.stop();
        }
    }
}

앱 실행 및 결과 확인

이제 애플리케이션을 실행해 보겠습니다. 실제 안드로이드 기기를 컴퓨터에 연결했다고 가정합니다. Android Studio에서 프로젝트의 액티비티 파일 중 하나를 연 뒤 툴바의 Run 아이콘을 클릭하고, 목록에서 자신의 모바일 기기를 선택합니다. 그러면 연결된 기기 화면에 앱이 실행됩니다.

실행 결과를 보면 알 수 있듯이, 3초마다 배경 색상이 부드럽게 전환되는 것을 확인할 수 있습니다. setEnterFadeDuration()과 setExitFadeDuration() 값을 조절하면 색상 전환 속도와 페이드 효과를 자유롭게 변경할 수 있으니, 다양한 값으로 실험해 보시기 바랍니다.