[Android] 둥글게 펼쳐지는 Ripple을, 바삭하게 구현

간이적으로 터치 피드백이 없는 버튼이나 레이아웃, 탭 범위가 좁아져 버린 버튼 등에, 범위 밖으로 둥글게 퍼지는 Ripple로 탭감, 영역을 조금 늘립니다.

이런 느낌 (화질 나쁘고 미안해..)



Ripple을 내고 싶은 요소의 외측을, FrameLayout (파트를 하나만 배치해 사용하는 레이아웃)로 둘러싸고, 겹쳐 줍니다.
이 구현은 FrameLayout을 상속하는 레이아웃에서도 사용할 수 있습니다.

보려는 Ripple의 범위는 padding하여 조작할 수 있습니다.

<FrameLayout
    style="@style/RippleFrameStyle"
    android:padding="20dp">

    <Button
        style="@style/ButtonStyle"
        android:background="@drawable/icon" />

</FrameLayout>

적용하는 스타일은 이런 느낌입니다.
잘라내면 사용하겠습니다.

style.xml

<!--リップルエフェクトを出すための親レイアウト-->
<style name="RippleFrameStyle">
    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:layout_centerVertical">true</item>
    <item name="android:background">?attr/selectableItemBackgroundBorderless</item>
    <item name="android:clickable">true</item>
    <item name="android:focusable">true</item>
</style>

<!--配置する見た目となるレイアウト-->
<style name="ButtonStyle">
    <item name="android:layout_width">30dp</item>
    <item name="android:layout_height">30dp</item>
    <item name="android:layout_centerVertical">true</item>
    <item name="android:clickable">false</item>
</style>

터치 피드백을 부모가 되는 ViewGroup로 지정해 주는 이미지입니다.

FrameLayout 측에서 clicable과 focusable을 true로 하여 클릭, 포커스를 가능하게 해 줍니다.
또한 내부 부품이 클릭 가능하면 clicable을 제거합니다.

그리고, 부모가 되는 FrameLayout에, 친숙한 ?attr/selectableItemBackgroundBorderless 를 설정해 줍니다.

그건 그렇고, selectableItemBackgroundBorderless는 API 레벨 21 (Lollipop) 이상으로 제한됩니다.

사용자 지정 애니메이션 정의

그러므로, 어떠한 동적인 처리(onClickListener라든지)를 설정하는 경우, FrameLayout 자체를 지정해 주세요.

UI에 그렇게 구현 비용을 할 수는 없지만, 서둘러 Material Design 같은 탭 감출하고 싶다! 라고 말하는 분은 이것만 해 주면 조금 화려하게 될지도 모릅니다.

더 멋진 구현 방법 있으면 교수 받고 싶습니다.