[Android, Ripple Effect, Selector] 클릭시 뷰에 효과 주기

안녕하세요. 블랙진입니다.

이번에는 버튼 클릭 효과를 주는 2가지 방법에 대해서 포스팅 해보겠습니다.

1. API 21 이상부터는 Material Design 인 ripple effect 를 제공해줍니다.

사용법은 매우 간단합니다.

클릭 효과를 주고싶은 View Background 에 

android:background="?attr/selectableItemBackground"

를 넣어주면 됩니다. 혹은

android:background="?attr/selectableItemBackgroundBorderless"

위와 같이 Boredless 가 추가된 효과를 넣어주셔도 되는데요 위 둘의 차이는 아래와 같습니다.

위와 같이 첫번째는 내가 클릭한 지점에서부터 물결이 퍼져서 해당 뷰를 꽉 채웁니다.

하지만 두번째는 부모 뷰 까지 물결이 퍼지는 효과를 줄 수 있습니다. 위 두가지 차이는 사용하시는 용도에 맞게 쓰시면 됩니다.

참고로 API 21 하위 버전에서 코드를 사용시 crush 가 발생되지는 않고 물결 효과 없이 회색 배경으로 클릭효과가 나타납니다.

위 예제에서는 클릭시 분홍색으로 표시가 되고 있습니다. (기본 설정은 회색입니다.)

이는 values - styles 의 AppTheme 에서 colorControlHighlight 추가해 줬기 때문입니다.

colorControlHighlight 를 통해 RippleEffect 의 색을 변경 할 수 있습니다.

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>

    <!-- color high light -->
    <item name="colorControlHighlight">#fd4381</item>

</style>

2.  drawable 의 selector 를 사용한 효과입니다.

2-1. drawable 폴더에 selector_view.xml 을 아래와 같이 만듭니다.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/drawable_view_focused"/>
    <item android:state_focused="true" android:drawable="@drawable/drawable_view_focused"/>
    <item android:drawable="@drawable/drawable_view"/>
</selector>

state_pressed 와 state_focused 는 눌렸을 때와 포커스가 되었을 때를 나타냅니다. 여기에는 View 를 눌렸을 때 변화시킬 drawable 을 설정해 주시면 됩니다.

2-2. drawable_view.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <solid
        android:color="#00ffffff"/>

</shape>

클릭 전에 보여질 배경으로 투명색으로 설정합니다.

2-3. drawable_view_focused.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <solid
        android:color="#fd4381"/>

</shape>

클릭되었을 때 보여질 색으로 분홍색으로 설정하였습니다.

2-4. Background 에 적용하기

클릭 효과를 주고 싶은뷰에 아래와 같이 배경으로 지정해주면 끝!

android:background="@drawable/selector_view"

짜잔!  위와 같이 뷰를 눌렀을 때 원하는 색으로 효과를 줄수가 있게 됩니다.~!!

이렇게 뷰를 클릭했을 때 효과를 줄 수 있는 2가지 방법을 모두 알아보았습니다.

물론 머테리얼 디자인의 리플 이펙트가 멋지지만 앱의 특징에 맞게 적절한 UI 를 사용하시면 되겠습니다.

아래는 예제에서 사용한 전체 코드입니다.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:id="@+id/btnMyTest1"
        android:background="?attr/selectableItemBackground"
        android:layout_width="match_parent"
        android:layout_height="100dp">

        <TextView
            android:layout_centerInParent="true"
            android:text="selectableItemBackground"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <ImageView
            android:layout_alignParentBottom="true"
            android:background="#8c8c8c"
            android:layout_width="match_parent"
            android:layout_height="1dp" />

    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/btnMyTest2"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:layout_width="match_parent"
        android:layout_height="100dp">

        <TextView
            android:layout_centerInParent="true"
            android:text="selectableItemBackgroundBorderless"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <ImageView
            android:layout_alignParentBottom="true"
            android:background="#8c8c8c"
            android:layout_width="match_parent"
            android:layout_height="1dp" />

    </RelativeLayout>


    <RelativeLayout
        android:id="@+id/btnMyTest3"
        android:background="@drawable/selector_view"
        android:layout_width="match_parent"
        android:layout_height="100dp">

        <TextView
            android:layout_centerInParent="true"
            android:text="selector"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <ImageView
            android:layout_alignParentBottom="true"
            android:background="#8c8c8c"
            android:layout_width="match_parent"
            android:layout_height="1dp" />

    </RelativeLayout>

</LinearLayout>

MainActivity.class

class MainActivity: AppCompactActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        btnMyTest1.setOnClickListener {

            showToast("btnMyTest1")
        }

        btnMyTest2.setOnClickListener {

            showToast("btnMyTest2")
        }

        btnMyTest3.setOnClickListener {

            showToast("btnMyTest3")
        }
    }
}