[Android] View에 Ripple 효과 적용하기 / 버튼 눌리는 애니메이션

 

 

 

안드로이드에서 기본 버튼을 만들면 버튼을 누를 때 자동으로 애니메이션 효과가 적용되는데,

이를 Ripple 효과라고 한다.

 

꼭 Button이 아니더라도 TextView, ImageView, Layout 등

웬만한 View에는 OnClickListener를 장착하여 클릭 이벤트를 만들어 줄 수 있다.

 

하지만 Button이 아닌 일반적인 View에는 Ripple 효과가 자동으로 적용되지 않는다.

Ripple 효과를 직접 설정하여 일반적인 View에 적용해본다.

 

 

 

 

---

 

 

✅ 기본 UI

 

Ripple 효과를 적용해볼 View는 다음과 같은 UI다.

 

 

흔히 볼 수 있는 설정 화면을 간단하게 구현해 보았다.

 

 

 

' > ' 아이콘에만 클릭 이벤트를 장착하면 많은 사용자가 불편함을 느끼기에,

시중 대부분의 앱들은 다음과 같은 영역으로 상호 작용한다.

 

 

즉, Button이 아닌 Layout 영역에 OnClickListener를 장착했다고 볼 수 있다.

 

하지만 위에서도 언급했다시피, 위 Layout에는 기본적인 Ripple 효과가 없기 때문에

사용자가 터치를 하더라도 '터치를 했다' 라는 사용감을 주지 못한다.

 

이제 위 Layout에 Ripple 효과를 적용해보자.

 

 

 

 

 

 

✅ Drawable 파일 생성 & View에 적용

 

먼저 Drawable 파일을 하나 생성해준다.

 

 

 

 

Root element의 기본 값으로 selector가 적용되어 있을텐데,

ripple로 변경해주고 적절한 파일명으로 생성해준다.

 

 

 

 

ripple 속성을 사용하려면 color 값을 필수로 입력해줘야 한다.

 

 

필수 속성을 입력하기 전에는 위 처럼 ripple 속성이 빨간색 에러를 내뿜는 것을 확인할 수 있다.

 

 

 

Ripple 색상은 무난한 회색으로 지정해줬다.

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/gray"> // 리플 효과 색상 지정
    
    // 기본 배경 스타일 지정
    <item>
        <shape
            android:shape="rectangle">
            <solid
                android:color="@color/white"
                />
        </shape>
    </item>

</ripple>

 

위 Drawable 파일을 View의 background 속성으로 적용할 것이기에,

해당 View의 기존 background 색상을 위 Drawable 파일 내에서 <item>으로 선언해주었다.

 

 

 

이제 적용할 View에 위 Drawable 파일을 background로 지정해주면 된다.

<LinearLayout
  ...
  android:background="@drawable/ripple_background"
  >

 

 

 

 

 

 

✅ 결과

 

 

Layout을 클릭하면 Ripple 효과가 동작하는 것을 확인할 수 있다.

 

Layout의 좌측을 터치했기 때문에 점차 오른쪽으로 퍼지는 애니메이션이 동작 중인 모습이다.

 

 

 

 

 

 

---

 

 

 

 

 

Button이 아닌 View에도 Button과 같은 Ripple 효과를 적용해보았다.

 

소소하긴 하지만 앱 내 상호 작용의 어색함을 덜어주는 것 또한

사용자 편의성을 높이는 요소 중 하나가 될 수 있다.