안드로이드 앱에서 리플(Ripple) 잔물결 애니메이션 구현하는 방법

코드를 살펴보기에 앞서, 안드로이드에서 리플(Ripple) 애니메이션이 무엇인지 먼저 이해할 필요가 있습니다. 리플 애니메이션은 물결이 퍼지듯 번지는 시각적 효과로, 사용자가 버튼이나 뷰를 터치했을 때 마치 잔물결이 일어나는 것처럼 화면에 반응을 보여주는 터치 피드백입니다.

안드로이드에서는 TextView, Button 등 다양한 뷰의 background 속성에 리플 드로어블(Drawable)을 적용하여 이 효과를 쉽게 구현할 수 있습니다. 이 예제에서는 뷰에 리플 애니메이션을 통합하는 방법을 단계별로 알아보겠습니다.

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:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".MainActivity">
   <Button
      android:id="@+id/result"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Result Data"
      android:background="@drawable/rippple"
      android:textSize="20sp"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintLeft_toLeftOf="parent"
      app:layout_constraintRight_toRightOf="parent"
      app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

위 코드에서는 버튼 하나를 추가하고, 해당 버튼의 배경(background)으로 리플 드로어블을 지정했습니다. 이렇게 하면 버튼을 클릭할 때마다 지정된 색상의 잔물결 효과가 나타납니다.

3단계: 리플 드로어블 파일 생성

drawable 폴더에 ripple.xml이라는 이름의 파일을 생성하고 아래 코드를 추가합니다.

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="https://schemas.android.com/apk/res/android"
   xmlns:tools="https://schemas.android.com/tools"
   android:color="#f816a463"
   tools:targetApi="lollipop">
   <item android:id="@android:id/mask">
      <shape android:shape="rectangle">
         <solid android:color="#f816a463" />
      </shape>
   </item>
</ripple>

여기서 <ripple> 태그의 android:color 속성은 잔물결이 퍼질 때 표시될 색상을 정의합니다. @android:id/mask 항목은 터치 영역을 결정하는 역할을 하며, 여기서는 사각형(rectangle) 형태로 지정되어 있습니다. 참고로 리플 드로어블은 API 21(롤리팝) 이상에서만 동작하므로 tools:targetApi="lollipop" 속성으로 이를 명시해 주었습니다.

애플리케이션 실행 및 결과 확인

이제 애플리케이션을 실행해 보겠습니다. 실제 안드로이드 기기를 컴퓨터에 연결했다고 가정합니다. Android Studio에서 프로젝트의 액티비티 파일 중 하나를 열고, 상단 툴바의 Run 아이콘을 클릭하세요.

실행 옵션 목록에서 연결된 모바일 기기를 선택하면, 기본 화면이 아래와 같이 표시됩니다.

이제 화면 중앙의 Result Data 버튼을 클릭하면, 아래 그림과 같이 버튼 위로 잔물결 애니메이션이 실행되는 것을 확인할 수 있습니다.